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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
Output:
Latest comments (0)