DEV Community

Cover image for The Beginner's Guide To React: JSX
Bipin Rajbhar
Bipin Rajbhar

Posted on • Updated on

The Beginner's Guide To React: JSX

#react #beginners #webdev

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.

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

<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>
Enter fullscreen mode Exit fullscreen mode


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:

<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>
Enter fullscreen mode Exit fullscreen mode

Compiled Into:

  <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>
Enter fullscreen mode Exit fullscreen mode

Output:

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:

<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>
Enter fullscreen mode Exit fullscreen mode

Compiled Into:

<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>
Enter fullscreen mode Exit fullscreen mode

Output:

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:

<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>
Enter fullscreen mode Exit fullscreen mode

Complied Into:

<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>
Enter fullscreen mode Exit fullscreen mode

Output:

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:

<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>
Enter fullscreen mode Exit fullscreen mode

Compiled Into:

<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>
Enter fullscreen mode Exit fullscreen mode

Output:

In the code given below, we used spread operator.

JSX Code:

<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>
Enter fullscreen mode Exit fullscreen mode

Compiled Into:

<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>
Enter fullscreen mode Exit fullscreen mode

Output:

Top comments (0)

Read next

judith677 profile image

#87 — Merge Data of The Same Group

Judith-Excel-Sharing -

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -

sebastienlorber profile image

This Week In React #207: Next.js, shadcn/ui, Headless UI, RN 0.76, New Architecture, NativeWind, RNTL, Reassure, Bottom Tabs...

Sebastien Lorber -

1noshishi profile image

Inline Classes in Kotlin: Why, Where, and How to Use Them

Valerii Popov -