title

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 transpiler which will convert JSX syntax to browser readable JS code

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

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

React with JSX syntax

December 29, 2017

Hello World