The Beginner's Guide To React: JSX
Tags: react, beginners, webdev
Published: 2020-03-28 13:36:38

**What is React?**
JSX stands for JavaScript XML. It is syntactic sugar to ``React.createElement(component, props, ...children)`` method which returns React element.

**JSX Code:**
``const element = <h1>Hello, World</h1>;``

**Compile Into:**
``const element = React.createElement(“h1”, null, “Hello, World”);``

**Who compiles the JSX?**
**Babel** compiles the JSX to ``React.createElement(component, props, ...children)`` method.

**What is Babel?**
Babel is a toolchain (set of programming tools) that is mainly used to convert ES6 code into a backward-compatible version of JavaScript in current and older browser or environment.

**If the Babel is mainly used to convert ES6 code int backward-compatible, so how Babel compiles JSX code to ``React.createElement(component, props, ...children)`` method?**

**Babel** uses preset called **@babel/preset-react** which convert JSX code into ``React.createElement(component, props, ...children)`` method.

Here I am using a **@babel/standalone** package. It has all the presets including **@babel/preset-react**.

To see how Babel is compiling JSX code to ``React.createElement(component, props, ...children)`` method:
click on [babeljs.io](https://bit.ly/2xqJRy1).

Add the script given below after the **react-dom** script:
``<script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>``

```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
       <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>

</body>
```html

**Make sure you have added ``type="text/babel"`` in the ``script`` tag.**

In the code given below ``<h1>JSX is awesome</h1>`` is neither String nor HTML its JSX.

Yes, you can store a JSX in a variable.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code
      const element = <h1>JSX is awesome</h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Compiled Into:**
```html
  <body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement("h1", null, "JSX is awesome");

      ReactDOM.render(element, rootElement);
    </script>
  </body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585387637/the-begineer%27s-guide-to-react/lhkwegwo7vtcsc1gjolo.png)

In the code given below, I have added the ``style`` props or attribute to the ``h1`` tag.

If you are thinking about why I am writing style in ``{ border: "1px solid black", padding: "8px"}`` object why not ``"border: 1px solid black"`` in String because its a JSX not HTML 😂.

The ``style`` attribute expects a JavaScript Object with camelCased properties rather than CSS string.

> Every express must be in the curly braces.

That is why we put ``{ border: "1px solid black", padding: "8px"}`` (expression) in curly braces ``{{ border: "1px solid black", padding: "8px"}}``.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code
      const element = (
        <h1 style={{ border: "1px solid black", padding: "8px" }}>
          JSX is awesome
        </h1>
      );

      ReactDOM.render(element, rootElement);
    </script>
  </body>
```

**Compiled Into:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement(
        "h1",
        {
          style: {
            border: "1px solid black",
            padding: "8px"
          }
        },
        "JSX is awesome"
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585387638/the-begineer%27s-guide-to-react/wj5wxdigeno7r0twcffh.png)

In the code given below, we closed the `div` tag as an **empty tag**.

Yes, you can close any tag as an empty tag.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code
      const element = (
        <div
          style={{
            backgroundColor: "skyBlue",
            border: "1px solid black",
            width: "50px",
            height: "50px"
          }}
        />
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Complied Into:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement("div", {
        style: {
          backgroundColor: "skyBlue",
          border: "1px solid black",
          width: "50px",
          height: "50px"
        }
      });

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585387637/the-begineer%27s-guide-to-react/r5b5mrc2vit3ixoa8xyf.png)

In the code given below, we used a ``children`` property and closed an ``h1`` tag as an empty tag. We have already seen the children's property in the introduction.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

    // JSX Code
      const element = <h1 children="JSX is Awesome"></h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>
```
**Compiled Into:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = React.createElement("h1", {
        children: "JSX is Awesome"
      });

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585387637/the-begineer%27s-guide-to-react/lhkwegwo7vtcsc1gjolo.png)

In the code given below, we used **spread operator**.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // JSX Code

      const style = {
        padding: "8px",
        border: "1px solid black"
      };

      const children = "JSX is Awesome";

      const props = { style, children };

      const element = <h1 {...props}></h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Compiled Into:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const style = {
        padding: "8px",
        border: "1px solid black"
      };
      const children = "JSX is Awesome";
      const props = {
        style,
        children
      };
      const element = React.createElement("h1", props);

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585387638/the-begineer%27s-guide-to-react/wj5wxdigeno7r0twcffh.png)