One of the weirdest things to me when I started learning React was this JSX syntax. What is it? Where does it come from? And how can I make really cool stuff with this?

JSX is a syntax extension to JavaScript, based loosely on the now-defunct E4X standard and kind of looks like this:

In layman's terms, however, JSX is simply syntactic sugar for React.createElement(component, props, children). That means, the code above is transpiled (or translated) into the following:

Since the latter is neither very simple to read nor particularly user-friendly, Facebook came up with this XML-inspired syntax now known as JSX. You can play with this babel compiler example to see how this works with your own code.

Conditional rendering

If you've used React for any amount of time, you've probably run into situations where you want to render something if a particular condition is met. JSX has this quirk that it doesn't render undefined, false, true and null, and you can use that fact to render something only if your condition is met:

Note that I just showed you two different ways of doing the same thing - both with something called logical short circuting (&&) and ternaries (a ? b : c). Both are valid and both work, but I tend to use the first approach in my own projects.

Props default to true!

If you've specified a prop, but not given it a value, it defaults to true. That means the following two components are equal:

I tend to use the former, just so that I don't have to remember this little detail of the JSX spec, but it's definitely nice to know about. It can potentially make your code look a lot cleaner as well!

Components must be capitalized

When you transpile your code, you'll notice that lower case component names are passed as strings to React.createElement, while capitalized component names are passed as a reference to the component name:

This might lead to some problems, especially if you have a component that receives the DOM element it's supposed to render as a prop.

However, you can get around this limitation by renaming that constant to have a capitalized first letter:

Those damn children

JSX handles the children property a bit different than the rest, in that you can specify it inside the opening and closing tags of your component. React, however, doesn't really care - it's just props to them.

This means you can send in some other JSX, a string literal or even an array or a function as children. You can also just specify children as a regular prop, making the following two statements equal:

The latter approach is probably not something you'll see a lot in the real world, but the fact that children really just is a regular property (and not something magic) is great. If you've been following this calendar over the last few days, then you probably remember the article on HOCs and render props , which uses this fact to send in a function that renders JSX instead of plain JSX.

JSX is yay!

There is tons more to learn about JSX, but as long as you remember the beginning of this article, you should be good: JSX is just syntactic sugar for React.createElement. Now go make something cool!

10-Dec

Today's posts

What is this JSX business?

Sign up for our newsletter

Join in the holiday cheer and count down to Christmas with us!