How to use JSX in React.js?

How to use JSX in React.js? »

What is JSX?

JSX is a special dialect of Javascript. Before diving into JSX, please make sure you’ve read the article where we learned how to write a Hello World application in React.js using JSX.

In this section, we’re going to focus on the JSX part of the code which we wrote in index.js file.

const App = () => {
    
  return <div>Hello World!</div>

}

The part of the code <div>Hello World!</div> may look like normal HTML to you. But in reality, it’s not. It is the JSX we’re talking about.  You may wonder, if it’s not HTML or JS, then how is it rendered and displayed on the webpage? The answer is little complicated.

Your web browser, whether it is Firefox, Chrome, Edge or Safari, has no idea what a JSX code is. In fact, it only understands HTML, CSS or Javascript code. That means, this JSX code must be converted to one of the browser-supported languages for the browser to understand. So, before sending out this JSX code to the user’s browser, it is converted to normal JavaScript code.