What is JSX?

JSX is just a tool that converts files like this:

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

Into files like this:

let element =
  React.createElement(
    'div',
    { className: 'test' },
    "Hello, world!"
  )

Simple, right? All JSX does is replace a file’s <tags> with equivalent calls to React.createElement(). This reduces the amount of code you need to write, and allows editors to provide syntax highlighting for element trees. As a result, it’ll make you way more productive — but more importantly — you’ll just have a whole lot more fun.

So how does JSX do it? Actually, JSX itself doesn’t do anything. It’s just a language extension, so to use it you’ll need to compile your JSX files into JavaScript files.

As it happens, the editor in this course can handle the compilation for you. What’s more, it’ll even show you the compiled code if you click the Compile button at the bottom left. Let’s use this feature to take a look at the four most important rules of JSX.

#1. <tags> are elements

JSX <tags> map to calls to React.createElement().

let element = <h1>Hello, world</h1>

ReactDOM.render(element, document.getElementById('root'))

#2. JSX children become child elements

The children of a JSX tag map to the third and subsequent arguments of React.createElement(), i.e. they become the element’s props.children.

JSX children can be text, elements, or a mix of both.

// Children can be text.
let textChildren = <p>What good is a phone call...</p>

// Children can be elements.
let elementChildren = <p><em>If you're unable...</em></p>

// Or they can be a mix of both.
let mixedChildren = <p>To <strong>speak?</strong></p>

ReactDOM.render(
  React.createElement(
    'div',
    null,
    textChildren,
    elementChildren,
    mixedChildren,
  ),
  document.getElementById('root')
)

#3. JSX attributes become props

• Use "" quotes when your props are strings
• Use {} braces when your props are literals or variables
• And use bare attribute names to indicate a value of true

let form =
  <form>
    <input value="Test 1" tabIndex={3} />
    <input
      // The `value` prop will have the string value `"Test"`
      value="Test 2"

      // The `tabIndex` prop will have the number value `2`
      tabIndex={2}

      // The `hidden` prop will have the boolean value `true`
      hidden
    />
    <input value="Test 3" tabIndex={1} />
  </form>
  
ReactDOM.render(form, document.getElementById('root'))

#4. {} interpolates children

When a pair of {} braces is encountered within a JSX element, it’s value will be interpolated in.

You can interpolate anything that can be passed as an element’s children, including text, elements, or even arrays — which we’ll cover in a few lessons time.

let hello1 = "World"
let hello2 = <strong style={{color: '#61dafb'}}>React!</strong>

let hellos =
  <div>
    <div>Hello, {hello1}</div>
    <div>Hello, {hello2}</div>
  </div>
  
ReactDOM.render(hellos, document.getElementById('root'))

Throughout this course, I’ll be switching back and forth between JSX and raw createElement() — just so you can see how they both work. For your own projects though, I highly recommend that you stick with JSX. Of course, this means that you’ll need a build system like Create React App, and that’s why we’ll cover it right after a quick exercise.