3.06.0 Jsx

JSX - is syntax lightweight to understand.

JSX design has two main goals: be the same as HTML for human eyes, and so that machines don't confuse it with HTML. Because HTML is compiled from JSX.

Check out what the same code looks in JSX and in pure React:

JSX

class App extends Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    )
  }
}

React

class App extends Component {
  render() {
    React.createElement(
      'div',
      {
        className: 'shopping-list',
      },
      React.createElement('h1', null, 'Shopping List for ', this.props.name),
      React.createElement(
        'ul',
        null,
        React.createElement('li', null, 'Instagram'),
        React.createElement('li', null, 'WhatsApp'),
        React.createElement('li', null, 'Oculus')
      )
    )
  }
}

Both Pure React and JSX are Javascript. But JSX was desinged to be more like HTML. To facilitate the layout process.

JSX looks like HTML. Pure React looks like Javascript. But this is it. And JSX is Javascript too.

This conversion from JSX to React make Babel.