JSX — JS: React

• Composition
• Null
• Comments

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 />
  </div>;

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 (
  <nav>
    <Home />
    {button}
  </nav>
);

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:

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, 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:

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>
);

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 = (
  <div>
    {text && <h1>{text}</h1>}
    <Hello />
  </div>
);

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:

{/* A JSX comment */}

It is the same for a multi-line comment:

{/*
  Multi
  line
  comment
*/}