Register to get access to free programming courses with interactive exercises

JSX JS: React

JSX is similar to HTML in its syntax and structure. However, JSX is built into JavaScript, so it can seamlessly interact with it. It means that you have templating capabilities built into the programming language.

However, for newcomers to JavaScript, it can be confusing. To better understand what is happening with JSX, you can check the code from this lesson in an online compiler like Babel.

Any text written inside the tags stays as static text when output. If you want to insert a variable value, you can use curly brackets with any expression inside, like this:

const name = 'Eva';
const cname = 'container';

const vdom1 = <div>Hello, {name}</div>;
const vdom2 = <div>Hello, {name.repeat(3)}</div>;
const vdom3 = <div className={cname}>Hello!</div>;

As you can see, insertion (essentially, interpolation) is done suing curly brackets, and they can have any expression inside. This scheme works the same way for both tag content and attributes.

In addition, JSX elements themselves are expressions, which means you can use them in any place in JavaScript code that works with expressions:

const name = 'Mike';
const vdom = block ? <div>hello, {name}</div> : <span>i am span</span>;

It's all together now. JSX is an expression too, and to embed a JS expression inside JSX, you have to use curly brackets {}. You can even embed JSX inside JSX itself as long as you write JSX:

const vdom = <div>
    {isAdmin ? <p><a href="#">{text}</a></p> : <p>{text}</p>}
    <Hello />

In other words, JSX, like any programming language, has a recursive structure. You can put expressions into other expressions ad infinitum. It is not surprising because JSX is the same JS code but written in a specific way.

Take a look at the following code to cement this topic definitively:

<div id={if (condition) { 'msg' }}>Hello World!</div>

This code will not work because a conditional construct in JS is an instruction, not an expression. The result of compiling the previous code is:

React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

And this is probably the biggest inconvenience: the inability to use conditional constructs inside JSX. Although you can still use the ternary operation or, in more complicated cases, do this:

let button;
if (loggedIn) {
  button = <LogoutButton />;
} else {
  button = <LoginButton />;

return (
    <Home />


As discussed in the last lesson, all React tags are essentially built-in components that work like the ones you defined.

Everything that applies to self-written components also applies to embedded components. The opposite is also true. In practice, this means, for example, it's possible to combine them:

const vdom = (
    <Hello />
    <Hello />
      <p>What is love</p>

In the above example, the components written with a capital letter are self-written, and the rest are built-in.

This separation is not accidental: React requires that newly created components begin with a capital letter, which incidentally corresponds to the JS class naming standard.


In real life, there are situations where the presence of a component in the DOM depends on certain conditions.

If you don't pass text into a component, you don't need to output the relevant chunk:

const header = text ? <h1>{text}</h1> : null;

const vdom = (
    <Hello />

Or like this:

const vdom = (
    {text ? <h1>{text}</h1> : null}
    <Hello />

The value null is valid that React treats as an empty component. false, true, and undefined are interpreted the same.

We can rewrite the example in an even shorter way:

const vdom = (
    {text && <h1>{text}</h1>}
    <Hello />


JSX doesn't support comments directly, but we can emulate them using JavaScript. To do this, insert a block of code with a single-line JavaScript comment inside it:

{/* A JSX comment */}

It is the same for a multi-line comment:


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Development of front-end components for web applications
10 months
from scratch
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.