<tag> children become props.children.

JSX ey can be text:

<p> JSX React.createElement('p', {}, JS
What good is a phone call... "What good is a phone call..."
<tags> become React.createElement </p> )

Use <lowercase />tags for DOM elements:

<div /> JSX React.createElement('div') JS
ey can be elements:
<Modal> JSX React.createElement(Modal, {}, JS
And use <Capitalized />tags for custom elements: <h1>
And then there will be cake
React.createElement('h1', {},
"And then there will be cake"
<Modal /> JSX React.createElement(Modal) JS </h1> )
</Modal> )

attributes are props

Or they can be a mix of both:
Use ""quotes when your props are strings: <p> JSX React.createElement('p', {}, JS
<Modal title="Edit" /> JSX React.createElement(Modal, { JS I'm sorry <em>Dave</em> "I'm sorry ",
title: "Edit" </p> React.createElement('em', {}, "Dave")
}) )

And use {}braces when your props are literals or variables: Interpolate children using {}
<Modal
title={`Edit ${name}`}
JSX React.createElement(Modal, {
title: `Edit ${name}`,
JS
You can interpolate text:
onClose={this.handleClose} onClose: this.handleClose, <p> JSX React.createElement('p', {}, JS
/> }) I'm sorry {name} "I'm sorry ", name
</p> )

{...object}becomes Object.assign
Or even arrays:
Use it in place of Object.assign <ol> JSX React.createElement('ol', {}, JS
<div JSX React.createElement('div', JS {steps.map(step => steps.map((step, i) =>
className='default' Object.assign( <li key={step.name}> React.createElement(
{...this.props} { className: 'default' }, {step.content} 'li', {key: i}, step
/> this.props </li> )
) )} )
) </ol> )

2016 © James K Nelson - jamesknelson.com