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>
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>
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>
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>
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>
Top comments (0)