React Starter: How does JSX make HTML elements?

Celý článek

JSX makes making React components easier. Some may find JSX to have a high learning curve and that's totally understandable. It's not exactly HTML and it's not exactly JavaScript, so it can take some getting used to.

We have the ability to create React apps without JSX.

We could create the code for all of our React applications without JSX. Here is a demonstration of some JSX code and how Babel (our transpiler) will convert it to create our DOM elements.

// JSX
const myElement = <h1>WHOA I am some JSX</h1>;

// Converted to plain JavaScript
var myElement = React.createElement("h1", null, "WHOA I am some JSX");

Test this code on babeljs.io. Play around with the code to see how Babel transpiles our code to something every browser will understand.

Babel transpiles our JSX code to plain JavaScript. We could skip JSX and write this JavaScript ourselves.

Babel handles converting our JSX to JavaScript code so that React can render our applications. We can make use of the current tools like transpilers so that we can write clean and readable code.

Let the tools (Babel) convert our code to something that browsers can understand.

This is similar to how we wouldn't want to write all our code in the older ES5 JavaScript syntax. We can write in ES6 and let the tools handle the browser backwards compatibility.

We wouldn't want to write out the plain JavaScript version of our React applications. There is a lot that JSX can do for us to save us time in writing our code and also make our code far more readable.

Let's look at how much code we'd have to write if we wrote out the plain JavaScript ourselves instead of JSX.

Adding a Class

Let's update the above example and also add a className to this <h1>

// JSX
const myElement = <h1 className="whoa">WHOA I am some JSX</h1>;

// Converted to plain JavaScript by Babel
var myElement = React.createElement("h1", {
  className: "whoa"
}, "WHOA I am some JSX");

Try this code on babeljs.io.

Notice how the second parameter is now present since we added a className. JSX allows us to write our React templates cleanly!

Adding Expressions

Let's try creating a variable and displaying that variable in our JSX template.

// JSX
const name = 'Chris';
const myElement = <h1>I am {name}</h1>;

// Converted to plain JavaScript by Babel
var name = 'Chris';
var myElement = React.createElement("h1", null, "I am ", name);

Try this code on babeljs.io.

Nested Elements and Expressions

Let's wrap that {name} with a <span> now and see just how much JSX can do for us when we nest elements:

// JSX
const name = 'Chris';
const myElement = <h1>I am <span>{name}</span></h1>;

// Converted to plain JavaScript by Babel
var name = 'Chris';
var myElement = React.createElement("h1", null, "I am ", React.createElement("span", null, name));

Try this code on babeljs.io.

Conclusion

Just from these few examples, it's clear to see that JSX does a lot for us in terms of creating React components.

Let's take advantage of modern coding techniques like ES6 and JSX. We'll let Babel transpile things down to the JavaScript that all browsers can understand.

JSX is more readable for humans. It is more readable for teams of humans.

It's a good exercise to look at what it takes to write React without JSX. I think it's a good way to realize that JSX is worth the learning curve also.