Posted by shihab on 4/27/2020
JSX stands for JavaScript XML. Previously we have written JavaScript into HTML file within script
block. But we can do the opposite using JSX, meaning now we can write HTML into JavaScript file. It enhances React's createElement
function. Since JSX syntax is closer to HTML, so React DOM uses camelCase naming convesion for HTML Attributes, for example className
instead of class
.
It's not mandatory using JSX in React but it's helpful and it helps better describing UI elements within the React component. First example uses JSX and the second example doen't:
Consider a div
with an id
of example
for the HTML markup of both examples.
#Example-1:
const ourExample =
<h1>This example uses JSX
</h1>
ReactDOM.render(React.createElement(ourExample), document.querySelector("#example"))
#Example-2:
ReactDOM.render(React.createElement("h1", null, "This example does not uses JSX"), document.querySelector("#example"))
Also you can use JavaScript Expression into JSX using ${}
syntax. Anyways, you may think that why it's so impressive or why it's so usefull declaring a silly h1
tag. But in reality, it's super helpful to organizing your code & creating UI components using JSX while your project will become larger. Another benefit, you can compile your JSX using Babel.