CODEWITHSUNDEEP
reactjsreact-hooks
Swastik
Swastik

Reputation: 283

Equivalent of Ahead Of Time Compilation in React

Like we have AOT in angular where the HTML and typescript code is converted into efficient JS code during the build phase which makes the app load faster.

Do we have something similar in React?

Upvotes: 3

Views: 2916

Answers (1)

Felix
Felix

Reputation: 2691

There's just the Typescript or Babel transpilation, which transforms JSX code into common JavaScript.

So for example the code

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return <h1>Hello World</h1>
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

is compiled to 

import React from 'react';
import ReactDOM from 'react-dom';
var App = function () {
    return React.createElement("h1", null, "Hello World");
};
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));

So basically <h1>Hello World</h1> into React.createElement("h1", null, "Hello World");. That's all.

You could add more stuff to your Babel/Typescript-Compiler (like presets and plugins, eg. babel-plugin-relay), but over all it's nothing more than a simple transpilation step.

See also:

Upvotes: 1

Related Questions