React with JSX syntax
Last Updated: October 9, 2021
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