JSX — JS: React

JSX is as simple as naked HTML. You have to remember how it's assembled and that's it. However, it's built into JS itself and can interact with it. In other words, you get templating right in the programming language itself (yes, that's how PHP works). It's this confusion with JS that causes the most questions for newcomers. Let's try and deal with some of these questions.

To better understand what's going on, check what this lesson's code translates into in the online compiler https://babeljs.io/repl/

Any text written inside the tags (we'll call them that from now on for simplicity) stays as just static text when output. What if I want to insert a variable value? The answer is below:

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 places in JS 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 itself is an expression, and to embed a JS expression inside jsx you have to use curly brackets. Consequently, you can 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 />
  </div>;

In other words, jsx, like any programming language, has a recursive structure. You can put expressions into other expressions ad infinitum. This isn't surprising, because jsx is the same JS code written in a special 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 for an obvious reason. 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 (
  <nav>
    <Home />
    {button}
  </nav>
);

Composition

As discussed in the last lesson, all React “tags” are essentially built-in components that work just like the ones you defined. This means that 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 components:

const vdom = (
  <div>
    <Hello />
    <Hello />
    <AnotherComponent>
      <p>What is love</p>
    </AnotherComponent>
  </div>
);

In the above example, the components written with a capital letter are self-written, 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. For example, if you don't pass text into a component, you don't need to output the relevant chunk. Example:

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

const vdom = (
  <div>
    {header}
    <Hello />
  </div>
);

Or like this:

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

I.e., null is a valid value that React treats as an empty component. false, true and undefined are interpreted interpreted in exactly the same way. Therefore, the example above can be rewritten in an even shorter way.

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

Comments

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

{/* A JSX comment */}

It's the same for a multi-line comment:

{/*
  Multi
  line
  comment
*/}

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

The Hexlet support team or other students will answer you.