JSX

<tags> become `React.createElement`

Use <lowercase /> tags for DOM elements:

<div />

React.createElement('div')

And use <Capitalized /> tags for custom elements:

<Modal />

React.createElement(Modal)

Use "" quotes when your props are strings:

<Modal title="Edit" />

React.createElement(Modal, {
  title: "Edit"
})

And use {} braces when your props are literals or variables:

<Modal
  title={`Edit ${name}`}
  onClose={this.handleClose}
/>

React.createElement(Modal, {
  title: `Edit ${name}`,
  onClose: this.handleClose,
})

Use it in place of Object.assign

<div
  className='default'
  {...this.props}
/>

React.createElement('div',
  Object.assign(
    { className: 'default' },
    this.props
  )
)

They can be text:

<p>
  What good is a phone call...
</p>

React.createElement('p', {},
  "What good is a phone call..."
)

They can be elements:

<Modal>
  <h1>
    And then there will be cake
  </h1>
</Modal>

React.createElement(Modal, {},
  React.createElement('h1', {},
    "And then there will be cake"
  )
)

Or they can be a mix of both:

<p>
  I'm sorry <em>Dave</em>
</p>

React.createElement('p', {},
  "I'm sorry ",
  React.createElement('em', {}, "Dave")
)

You can interpolate text:

<p>
  I'm sorry {name}
</p>

React.createElement('p', {},
  "I'm sorry ", name
)

Or even arrays:

<ol>
  {steps.map(step =>
    <li key={step.name}>
      {step.content}
    </li>
  )}
</ol>

React.createElement('ol', {},
  steps.map((step, i) =>
    React.createElement(
      'li', {key: i}, step
    )
  )
)