JS: React
2026-02-21 02:52 Diff
https://hexlet.io/courses/js-react/lessons/jsx/theory_unit

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:

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:

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:

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:

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:

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:

Composition

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:

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.

Null

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:

Or like this:

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:

Comments

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:

It is the same for a multi-line comment: