JSX stands for JavaScript XML. It enables using HTML and XML like tags inside javascript. These tags can have text, attributes, children and nested elements.

JSX is compiled and converted to javascript at runtime.

Why JSX?

JSX is used to create elements on a page in React. It is not necessary to use JSX in react though, but using it makes creating web pages a lot easier.

JSX enables you to use attributes and functions in your markup code which makes the web elements more dynamic.
Imagine you want to add a heading with text as “React” using HTML’s h1 tag. With react syntax(without JSX), this should be done as

const element = React.createElement(“h1”, null, “React”);

While with JSX, it can be done as

const element = <h1>React</h1>

Simple, isn’t it. It becomes even more simpler with complex element structure. Example, a div element with two child div elements can be represented in JSX as

<div>
     <div>Learning React</div>
     <div>Codippa</div>
</div>

Above structure written without JSX will be(don’t worry about syntax for now

React.createElement(
"div",
null,
React.createElement(
   "div",
   null,
   "Learning React"
),
React.createElement(
   "div",
   null,
   "Codippa"
)
);

When you use JSX to create elements, it is converted to above react syntax behind the scenes.
This is done by Babel compiler which is automatically installed when you create the app using create-react-app package.

Remember that JSX should be written inside a javascript file or a file having a .js extension.
Expressions in JSX

An expression is anything that returns a value. Examples of expressions are 1 + 5, 2 == 2, a function call that returns a value etc.
It is possible to embed expressions and variables inside JSX. These expressions are evaluated and replaced with values. This makes JSX dynamic and flexible.
Example,

const technology = "react"
<h1>Learning {technology}</h1>

will be rendered as

<h1>Learning react</h1>

Calling functions from JSX

It is also possible to call functions from a JSX expression and substitute the value returned from a function dynamically. Example,

function technology() {
   return "react";
}
<!-- call function and replace its returned value -->
<h1>Learning {technology()}</h1>

will be rendered as

<h1>Learning react</h1>

Applying classes

It is also possible to apply CSS classes to JSX elements. But there is a difference. Instead of using keyword class, you need to use className.
React will convert it to class before rendering the page so that your element will appear as desired. Thus, a simple JSX element with a CSS class applied will look as below.

const technology = "react"
<h1 className="custom">Learning {technology}</h1>

Leave a Reply