JSX

The Elegant React way

Writing our code with React.createElement() and reactDOM.render(), it's a little bit verbose; not that readable.

The good thing the react team thought about that too and create a HTML-like syntactic suger on top of the raw React Api's called JSX

JSX rewrites your JavaScript files

JSX is just a tool that converts files like this:

const element =
  <div id="container">
    Hello, world!
  </div>

into files like this:

const element =
  React.createElement(
    'div',
    {id:'container'},
    "Hello, world!"
  )

Why use JSX?

To use JSX with reasonable performance, you'd need a build process, which would entail (at a minimum) understanding and installing node.js and create-react-app or babel. While this is usually acceptable, there are times when you'd rather avoid the overhead.

Learning all of this just to avoid typing createElement() a few times doesn't make much sense if you're just getting started. However, there will come a point when your apps will be large enough that tooling will be a worthwhile investment. And once you've arrived at this point, JSX is a fantastic tool to have:

Large element definitions are simplified.
It provides visual cues and assists editors with syntax highlighting.
It assists React in producing more useful error and warning messages

Because JSX is not actually JavaScript, you have to convert it using something called a code compiler. Babel is one such tool.

Pro tip: If you'd like to see how JSX gets compiled to JavaScript, check out the online babel REPL here.

If you can train your brain to look at JSX and see the compiled version of that code, you'll be MUCH more effective at reading and using it! I strongly recommend you give this some intentional practice.

Because JSX is not actually JavaScript, it must be converted using a code compiler. One such tool is Babel.

If you want to see how JSX is compiled to JavaScript, use the online babel REPL.

You'll be MUCH more effective at reading and using JSX if you can train your brain to look at it and see the compiled version of the code! I strongly advise you to put this into practice on a regular basis.

So let's convert our code to JSX. First of all, like react and reactDOM, we will add babel script from unpkg

 ...
   <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
    <script type="module">
    
    const element = React.createElement('div', {
      className: 'container',
      children: 'Hello World',
    })

    ReactDOM.render(element, document.getElementById('root'));
    </script>
  </body>
...

Then let's try to change our React.createElement() to JSX

...
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
    // 🔥 "type="text/bable" to indicate that this code need to be compiled by babel
    
    // const element = React.createElement('div', { className = 'container' }); 
    
                                          👇
    
    const element = <div className="container"></div>
    ReactDOM.render(element, document.getElementById('root'))
  </script>
</body>
...

You may have noticed that I changed the type of our JavaScript from module to text/babel and that's to indicate to the browser not to evaluate the script . However, babel will control the compiling for that script

Easy right? How about children?

...
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
  // 🔥  "type="text/bable" to indicate that this code need to be compiled by babel
  
    // const element = React.createElement('div', { className = 'container' }, [
    //  React.createElement('div', { className = 'container' }, "I'm the first child"),
    //  React.createElement('div', { className = 'container' }, "I'm the first child"),
    // ]); 
                                    👇 

    const element = (
      <div className="container">
        <div className="firstChild">I'm the first child</div>
        <div className="secondChild">I'm the second child</div>
      </div>
      );
    ReactDOM.render(element, document.getElementById('root'));
  </script>
</body>
...

JSX appears to be HTML, but it is transformed into plain JavaScript objects under the hood by babel.

You can't return two objects from a function unless they're wrapped in an array. This explains why you can't return two JSX tags without first wrapping them in another tag or fragment.

References and articles :

Writing Markup with JSXreactjs

JavaScript in JSX with Curly Bracesreactjs

Introducing JSX – React

JSX In Depth – React

Introducing the New JSX Transform – React Blog

Coding Workshops for Women

PreviousBasic view on React core API's NextReact Props and styling

Last updated 3 years ago

Was this helpful?