JSX is a preprocessor step that adds XML syntax to JavaScript. You can develop React applications without using JSX. But when you develop React app with JSX syntax your code will be elegant.

JSX is like XML and it has tag name, attributes, and children

This is the normal JS code we used in our Hello World example

const title = React.createElement(
	'h1',
    {id:'title',classname:'header'},
    'Hello World'
)

ReactDOM.render(
    title,
    document.getElementById('root')

)

Now when I convert it to JSX syntax it will be like this

ReactDOM.render(

Hello World

,
    document.getElementById('root')

)

This code is not going to work in your browser. You need a transpiler that will convert JSX syntax to browser readable JS code

In your index.htm file, you can include Babel transpiler in the head section on your HTML code

This is called in-line transpiling which suitable for testing projects only