An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-VIII

Highlights of part VII

  • Since React.createElement can't be written every time you want react elements, React team ends up creating JSX syntax

  • JSX is a combination of JS and XML where the XML part enables us to create user-defined tags(i.e basically not like HTML that uses only pre-defined tags like <p>,<h1>,<div> etc.

  • Therefore JSX creates another layer before Virtual DOM. The JSX needs to be converted to virtual DOM.

  • Note: Virtual DOM is a plain JS object with keys - type, key, ref, props, _owner, _store.

  • The converter we use is called Babel. Babel is actually a transpiler that converts one syntax to another equivalent syntax. It can be React specific (JSX to JS) or general (between ECMA versions) or both i.e (Whatever browser acceptable syntax)

But the browser wants one single file?

We know that react builds Single Page Applications that have one index.html which has one tag <div id='root'>. There will be an index.js that has a document.getElementById('root').Almost every UI we create using react components will be traced back to parent id='root'.

We get 'root' div from the Html file through the index.js file (document.getElementById('root')). We actually choose React because we split UI into different components that return react element(UI). This concept is called 'Module'. Therefore at the end of the day, we have split components converged to form the overall UI of the web application. This leads us to another problem from the browser's perspective it has one HTML file that has a link to the index.js. Hence browser will look for one single file which has all the react components combined. This concept is called 'Bundling'.One of the default tools React uses is called 'Webpack'.


What does Webpack do?

Webpack packs all the react components into a single bundle file. Let's name it main.js. Browsers execute this main.js.But with one change, instead of index.js, we need to replace it with main.js in index.html because that's where we get a single javascript file that bundled all components in React.


Webpack = Module Bundler

Webpack can be integrated with babel. Hence it gives a one-stop solution from a browser perspective.





Recent Posts

See All

Disclaimer: This article is me speaking to me through this blog! Short Intro: If you want to innovate in a particular field, you need to understand how things work in the first place. Innovation is a