React.js Implementation Method

Extra Notes

When used in development, React involves a few build steps:

1. Writing the source code in JSX (JavaScript XML) file

2. Transpiling JSX into a regular JavaScript file

3. Bundling the JavaScript file by Webpack

  4. Execution​

​

React calls its way of implementing the UI logic in JavaScript code using XML syntax JSX. JSX stands for JavaScript XML and is the syntax for embedding HTML in JavaScript. What also makes it easy to write the structure of the user interface is the ability to combine the JavaScript logic with HTML-like syntax.

​

For example, in JSX, you can write:

const MyComponent = () => {

  return <h1>Hello, World!</h1>;

};

​

Since browsers can’t understand JSX on its own, it must be transpiled into regular JavaScript. Transpiling is a phenomenon that entails of translating one form of code to another. As for React, the transpiler used is called Babel, which is a JavaScript compiler and a transpiler which converts JSX into normal JavaScript that the browser can read.

​

So, the example code, in JSX, will be tranaspiled by Babel into:

const MyComponent = () => {

  return React.createElement("h1", null, "Hello, World!");

};

​

Now, the JavaScript follows the standard React.createElement() syntax used internally by React, the browser can understand this JavaScript. This transpilation occurs not during the build process, but only when developing a specific build; this is to ensure that what is written on JSX will be understood by the browser.

​

After the JSX, the next process is bundling the JavaScript files After the transpiling of the JSX to JavaScript the last step is bundling it. Large JavaScript applications today and especially those built with technologies like React consist of multiple script files and dependency. If each of these files had to be loaded separately in the browser, it would mean a lot of requests and therefore many requests slowing down the page loading. Among bundlers, we should identify Webpack – a tool that collects all JavaScript files and all the other related content, such as CSS, images, and more, into a number of slimmed-down bundles. It is simpler and quicker to load the application by the browser. Webpack can also deal with code splitting, that allows the application to load only small pieces of code which are imported rather than loading the entire application at one time. For instance, Webpack will take multiple JavaScript modules and bundle them into one or more files like main.js and vendor.js to ease the loading process.

​

The final code generation for the modern web application is accomplished through transpiling (with the help of Babel) followed by bundling it through the Webpack. The set of JavaScript files are sent to browser and browser’s JavaScript engine (for instance, V8 in Chrome or SpiderMonkey in Firefox) executes the code. Execution Process starts with the process that the browser reads and interprets every line of the bundled JavaScript on the web page. When React renders the UI, it starts off with the constructing the so-called Virtual DOM which is an actual DOM copy in memory. This Virtual DOM is to check differences every time changes occur to state by a process called as reconciliation. React then affects only those parts of the real DOM which are required to, which overall enhances the operational efficiency of the web application.

​

For instance, when you have a React app running in the browser, the JavaScript then paints the UI components on the screen and listens to events – such as a button press, form submission and so on. If the user interacts and click a button that alters the state, React will only compare the old state and the new state in the VDOM and then use the least to update the page without the need to reload (Implementation Notes – React, n.d.).