Writing our code with React.createElement() and reactDOM.render(), it’s a little bit verbose; not that readable.
The good thing the react team thought about that too and created an HTML-like syntactic suger on top of the raw React Api’s called JSX
JSX rewrites your JavaScript files
JSX is just a tool that converts files like this:
const element =
<div id="container">
Hello, world!
</div>into files like this:
const element =
React.createElement(
'div',
{id:'container'},
"Hello, world!"
)Why use JSX?
To use JSX with reasonable performance, you’d need a build process, which would entail (at a minimum) understanding and installing node.js and create-react-app or babel. While this is usually acceptable, there are times when you’d rather avoid the overhead.
Learning all of this just to avoid typing createElement() a few times doesn’t make much sense if you’re just getting started. However, there will come a point when your apps will be large enough that tooling will be a worthwhile investment. And once you’ve arrived at this point, JSX is a fantastic tool to have.
Large-element definitions are simplified.
It provides visual cues and assists editors with syntax highlighting.
It assists React in producing more useful error and warning messages
Because JSX is not actually JavaScript, you have to convert it using something called a code compiler. Babel is one such tool.
Pro tip: If you’d like to see how JSX gets compiled to JavaScript, check out the online babel REPL here.
If you can train your brain to look at JSX and see the compiled version of that code, you’ll be MUCH more effective at reading and using it! I strongly recommend you give this some intentional practice.
Because JSX is not actually JavaScript, it must be converted using a code compiler. One such tool is Babel.
If you want to see how JSX is compiled to JavaScript, use the online babel REPL.
You’ll be MUCH more effective at reading and using JSX if you can train your brain to look at it and see the compiled version of the code! I strongly advise you to put this into practice on a regular basis.
So let’s convert our code to JSX. First of all, like react and reactDOM, we will add babel script from unpkg
...
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script type="module">
const element = React.createElement('div', {
className: 'container',
children: 'Hello World',
})
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
...Then let’s try to change React. createElement() to JSX
...
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script type="text/babel">
// 🔥 "type="text/bable" to indicate that this code need to be compiled by babel
// const element = React.createElement('div', { className = 'container' });
👇
const element = <div className="container"></div>
ReactDOM.render(element, document.getElementById('root'))
</script>
</body>
...You may have noticed that I changed the type of our JavaScript from module to text/babel and that’s to indicate to the browser not to evaluate the script . However, babel will control the compiling for that script
Easy right? How about children?
...
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script type="text/babel">
// 🔥 "type="text/bable" to indicate that this code need to be compiled by babel
// const element = React.createElement('div', { className = 'container' }, [
// React.createElement('div', { className = 'container' }, "I'm the first child"),
// React.createElement('div', { className = 'container' }, "I'm the first child"),
// ]);
👇
const element = (
<div className="container">
<div className="firstChild">I'm the first child</div>
<div className="secondChild">I'm the second child</div>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
...JSX appears to be HTML, but it is transformed into plain JavaScript objects under the hood by babel.
You can’t return two objects from a function unless they’re wrapped in an array. This explains why you can’t return two JSX tags without first wrapping them in another tag or fragment.
References and articles:
Writing Markup with JSX - React
The library for web and native user interfacesreact.dev
JavaScript in JSX with Curly Braces - React
The library for web and native user interfacesreact.dev
Introducing JSX - React
A JavaScript library for building user interfacesreactjs.org
JSX In Depth - React
A JavaScript library for building user interfacesreactjs.org
Introducing the New JSX Transform - React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Although React 17 doesn't contain new…reactjs.org
Coding Workshops for Women
Start learning how to code today with SheCodes hands-on online coding workshops, designed for busy women. Coding…www.frontendcheatsheets.com