DEV Community

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

Posted on • Edited 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)