Scribd
Upload
232 views

JSX Cheatsheet

The document discusses how JSX code is converted to React elements and how children, attributes, and object spreading work in JSX. It provides examples of using different JSX syntax like tags, attributes, children, and object spreading to map to equivalent React code.

Uploaded by

Hassan Zakeri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
232 views

JSX Cheatsheet

The document discusses how JSX code is converted to React elements and how children, attributes, and object spreading work in JSX. It provides examples of using different JSX syntax like tags, attributes, children, and object spreading to map to equivalent React code.

Uploaded by

Hassan Zakeri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

<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

You might also like