JSX behind the scene.

JSX behind the scene.

Hi... Welcome to my next blog. Here I will explain how JSX works behind the scene in react and how can we code a react app without using JSX. JSX stands for javascript extension. well before moving further this blog assumes you know javascript and react basics.

We know how much easy it becomes to code a React App using JSX but knowing how it works under the hood is always good.

  • The browser does not understand JSX syntax, therefore it must compiled down to some javascript code which browsers can understand.

Now, before diving deeper into this here's an exercise go to babel.io and write some JSX code or just copy paste this in the left side of the editor.

<>
    <p> Hello </p>  
    <p> World </p>  
</>

You will some javascript code in the right side of the editor, that is the actual code which browsers can understand. If you have copied the same JSX code as above you will see the compiled version of JSX as -

React.createElement(React.Fragment, null,
   React.createElement("p", null, " Hello "),
   React.createElement("p", null, " World ")
);

As you can see for every JSX element we have React.createElement() javascript function. That means our JSX syntax gets converted to the javascript function with the help of babel-plugin-transform-react-jsx that can be understood by the modern browsers.

Babeljs.io as the docs says :-

  • Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

It helps to convert our JSX syntax to the javascript code and thus the browser understands what exactly we are trying to do with our JSX.

Till now we understood that JSX gets compiled down to javascript function with the help of babeljs.io, now let's see how compiled JSX function React.createElement() looks like and what parameter does it takes.

React.createElement() takes three parameters

  • type: type of element eg:- div, span etc Or any function/class components,
  • props: any props which can be used to customize the element and
  • children: it takes children node or children component, it can help in creating nested elements.
    React.createElement(
    type,
    [props],
    [...children]
    )
    
    Let's see one more example :-
function Hello(props) {
  return(
       <div>
      { `Hello ${props.toWhat}` }
      </div>
    )
}

ReactDOM.render(
  <Hello toWhat="world" />,
  document.getElementById('root')
);

and the equivalent javascript code for this will be :-

function Hello(props) {
  return React.createElement("div", null, `Hello ${props.toWhat}`);
}

ReactDOM.render(React.createElement(Hello, {
  toWhat: "world", null
}), 
document.getElementById('root'));

Without JSX the code seems more complex to write this is why we use JSX so that we do not need to write so many React.createElement() and Babel compiles it to the browser understandable functional code.

Hope you liked and learned something from this blog and do provide feedback so that I can improve on my blogging journey. Thank You.