Register to get access to free programming courses with interactive exercises

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
*/}

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
130
courses
1000
exercises
2000+
hours of theory
3200
tests

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: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months

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.