Advantages of JSX

JSX is just HTML-like syntax, it’s optional, and its purpose is to simplify the creation of React tree nodes with attributes. It lets you create JavaScript objects with HTML syntax, but JSX is not required to use React.

If you are familiar with HTML, it should be quite easy to use JSX when building React application.
One of the things that needs to be remembered is that JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags. It’s worth mentioning that because JSX is JavaScript, identifiers such as class or for are not approved as XML attribute names. Instead, React expect using className and htmlFor, respectively.
Normally, when you want to use JavaScript expression as an attribute value you would use quotes “”. Instead, JSX wraps it in a pair of curly braces {}.
When you write your component and you choose to use inline styles, there is a difference. In React style keys are camelCased, so instead of traditional background-color is equal to some value, you need a backgroundColor version.

To point out why using JSX seems a good thing to do, let’s look at the same sample of code written in pure JavaScript and then the same code written in React developers’ favorite syntax:

Sample written in JSX:

var Home = React.createClass({
	render: function(){
		return (
Search by Github Username Above

) } });

Sample written in pure JavaScript:

var Home = React.createClass({
	displayName: "Home",
	render: function render() {
		return React.createElement(
			{ className: "text-center" },
			"Search by Github Username Above"

There is a very nice online tool where you can paste your JSX code and watch it being compiled to JavaScript at .


Leave a Reply

Your email address will not be published. Required fields are marked *