JSX is a syntax extension of JavaScript. We can use full functionality of JavaScript with combination of html code. However, to make a browser read the JSX code, we need to compile JSX code with Babel. Babel can compile the code we wrote into JavaScript code. And then, browser finally can read that compiled JavaScript code and render it.
DOM and React JSX
Without React JSX, we had to write code seperate with three different files(HTML, CSS, JavaScript). With React JSX, we can write code only with CSS and JSX files so that it is clear to see and track the components.
Remember : JSX is not HTML!!
Why Use JSX?
const user = {
firstName: 'Minwoo',
lastName: 'Gwak'
}
let sayHello = (user) => {
return user.firstName + ' ' + user.lastName;
}
let header = document.createElement('hello');
header.textContent = `Hello, ${sayHello(user)}`;
document.body.appendChild(header);Above code is the JavaScript code and the below one is the html code.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>we need to combine these to files to make the website display what we want.
With JSX, we can simplify and make those codes to be more readable and understandable.
Let's see the codes below.
function App() {
const user = {
firtName: "Minwoo",
lastName: "Gwak"
}
function sayHello(user) {
return user.firstName + " " + user.lastName;
}
return (
<>
<h1>Hello, {sayHello(user)}
</>
)
}As we can see the code above, it is much clear to read and understand what is going in the codes.
