JSX is html like syntax (it is not html) which is created by some developers to create the react elements easy and hustle free. But for the purpose of converting JSX codes into pure javaScript code we need a compiler. The compiler we used is called Babel. Babel takes in JSX code and gives out React codes (we can say pure JavaScript code). You can try out it in Babel website. There if you give a JSX code it will gives out the React code for the exact element. Play with it. Its really awesome.
But how to get the super powers of babel in our html file. Yes, by using the CDN. So we have to add one more script tag for babel below the ‘react’ and ‘react-dom’ script tags. And also add the attribute “type=’text/babel’ ” in the below script tag where our react code are put in.
Old code (with out JSX) :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Myapp</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
// creating react element using a "createElement" method from react library.
let header = React.createElement("h1", {}, "Header")
let body = React.createElement("h1", {}, "My first react app")
let footer = React.createElement("h1", {}, "Footer")
let app = React.createElement("h1", {}, [header, body, footer])
// Appending it to the root div element using "createRoot" method from ReactDOM.
let root = ReactDOM.createRoot(document.getElementById("root"))
root.render(app)
</script>
</body>
</html>New code (with JSX) :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Myapp</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// creating react element using a JSX codes.
let header = <h1>Header</h1>
let body = <h1>My first react app</h1>
let footer = <h1>Footer</h1>
let app = [header, body, footer]
// Appending it to the root div element using "createRoot" method from ReactDOM.
let root = ReactDOM.createRoot(document.getElementById("root"))
root.render(app)
</script>
</body>
</html>Without babel those codes won’t work. Just check it out by yourselves.
