JSX Basics

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

JSX Examples

<div className=”red”>Children Text</div>;

<MyCounter count={3 + 5} />;

// Here, we set the “scores” attribute below to a JavaScript object.

var gameScores = {

player1: 2,

player2: 5

};

<DashboardUnit data-index=”2″>

<h1>Scores</h1>

<Scoreboard className=”results” scores={gameScores} />

</DashboardUnit>;

The above gets compiled to the following without JSX. I hope you will agree JSX syntax reads more naturally.

React.createElement(“div”, { className: “red” }, “Children Text”);

React.createElement(MyCounter, { count: 3 + 5 });

React.createElement(

DashboardUnit,

{ “data-index”: “2” },

React.createElement(“h1”, null, “Scores”),

React.createElement(Scoreboard, { className: “results”, scores: gameScores })

);

Why className – You’ll notice that React uses className instead of the traditional DOM class. From the docs, “Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.”

JSX Detail

Using JSX is not mandatory for writing React. Under the hood, it’s running createElement, which takes the tag, object containing the properties, and children of the component and renders the same information. The below code will have the same output as the JSX above.

Non-JSX

const heading = React.createElement(‘h1’, { className: ‘site-heading’ }, ‘Hello, React!’)

JSX is actually closer to JavaScript, not HTML, so there are a few key differences to note when writing it.

• className is used instead of class for adding CSS classes, as class is a reserved keyword in JavaScript.
• Properties and methods in JSX are camelCase – onclick will become onClick.
• Self-closing tags must end in a slash – e.g. <img />

JavaScript expressions can also be embedded inside JSX using curly braces, including variables, functions, and properties.

const name = ‘Tania’

const heading = <h1>Hello, {name}</h1>

JSX is easier to write and understand than creating and appending many elements in vanilla JavaScript, and is one of the reasons people love React so much.