React Fundamentals part 3: JSX

#webdev #javascript #react #tutorial

Writing our code with React.createElement() and reactDOM.render()is 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]

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

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.

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.