What about JSX?

#What about JSX?

You may be a little surprised to find out that React works just fine without JSX. After all, aren’t React and JSX made for each other?

It’s true that JSX is an amazingly useful tool - there’s a good reason so many people use it. But actually… you don’t need JSX. In fact, plenty of organizations choose not to use it, instead using it’s vanilla JavaScript equivalent: React.createElement().

#JSX rewrites your JavaScript files

JSX is just a tool that converts files like this:

let element =
  <div className='test'>
    Hello, world!

Into files like this:

let element =
    { className: 'test' },
    "Hello, world!"

To repeat myself, all JSX does is replace a file’s <tags> with equivalent calls to React.createElement().

JSX is not, not a special way to embed HTML in JavaScript - it’s not a template system. It’s just a tool for rewriting <tags> into calls to React.createElement().

You can get a feel for all 6 rules of JSX with the JSX live cheatsheet.

You’ll notice that in the above example, the <div> tag specifies a className prop instead of HTML’s class attribute. JSX doesn’t try to be clever. It doesn’t do anything special that you can’t do with plain JavaScript. It just gives you a handy shortcut for creating large Element objects.

#Why use JSX?

The thing about JSX is that to use it with reasonable performance, you’d need a build process, which would mean (at minimum) understanding and installing node.js and create-react-app or babel. And while this is usually acceptable, there are times when you’d rather avoid the overhead.

If you’re just getting started, learning all this just to avoid typing createElement() a few times doesn’t make must sense. But there’ll comes a point where your apps get large enough that tooling becomes a worthwhile investment. And when you get to this point, JSX is a great tool to have. It:

  • Simplifies definition of large elements
  • Provides visual hints, and helps editors with syntax highlighting
  • Helps React provide more useful error and warning messages

#Trying JSX

The easiest way to see how JSX works is to open the compiled panel within this site’s editors! When you use a JSX expression within a JavaScript file, the editor will convert tags to createElement() calls before running it, by using babel-standalone.

I’ve opened the compiled tab for you in the editor below. Can you see how the <div> tag in the ContactItem component maps to a call to React.createElement()? Try changing the <div> to another tag like <section>, then try adding and removing child tags, and watch how the compiled code changes.

///name:JSX Example
const ContactItem = props =>
  <div className='ContactItem'>
    <div className='ContactItem-name'>{props.name}</div>
    <img className='ContactItem-photo' src={props.photoURL} />
    <div className='ContactItem-email'>{props.email}</div>

.ContactItem-photo {
  height: 80px;
  width: 80px;

For more examples covering the JSX syntax, take a look at the toolbox’s JSX live cheatsheet.

But while JSX is a great tool, I’ll stick to React.createElement() for the rest of this course. This way, you’ll be learning React’s fundamentals — and you’ll be able to apply them in any context — JSX or not.