React.
js Cheat sheet
Quick Learning
Components
import React from 'react’
import ReactDOM from 'react-dom'
class Hello extends [Link] {
render ()
{ return <div className='message-box'> Hello {[Link]}
</div> }
}
const el = [Link]
const el = [Link] [Link](<Hello name='John' />, el)
Use the [Link] jsfiddle to start hacking. (or the unofficial jsbin)
Official website: [Link]
Import Multiple Exports
import React, {Component} from 'react’
import ReactDOM from 'react-dom'
class Hello extends Component
{
...
}
Official website: [Link]
Properties
<Video fullscreen={true} autoplay={false} />
render () {
[Link] const
{ fullscreen, autoplay } = [Link]
···
}
Use [Link] to Access Properties Passed to the compentent
Official website: [Link]
Children
<AlertBox> <h1>You have pending notifications</h1> </AlertBox>
class AlertBox extends Component {
render () {
return <div className='alert-box’>
{
[Link]}
</div>
}
}
Children are passed as Child Property
Official website: [Link]
States
constructor(props)
{
super(props)
[Link] = { username: undefined
}
}
[Link]({ username: 'rstacruz’ })
render ()
{ [Link] const { username } = [Link] ··· }
Use [Link] to manage Dynamic Data With Babel you can use proposal-
class-fields and get rid of constructor
class Hello extends Componen
t { state = { username: undefined }; ... }
Nesting
class Info extends Component {
render ()
{ const { avatar, username } = [Link] return
<div>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</div>
}
}
As of React v16.2.0, fragments can be used to return multiple children
without adding extra wrapping nodes to the DOM.
Official website: [Link]
States
constructor(props)
{
super(props)
[Link] = { username: undefined
}
}
[Link]({ username: 'rstacruz’ })
render ()
{ [Link] const { username } = [Link] ··· }
Use [Link] to manage Dynamic Data With Babel you can use proposal-
class-fields and get rid of constructor
class Hello extends Componen
t { state = { username: undefined }; ... }
Official website: [Link]
Nesting
import React,
{ Component,
Fragment
} from 'react’
class Info extends Component {
render () {
const { avatar, username } = [Link]
return
( <Fragment>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</Fragment> )
}
}
Nest components to separate concerns.
Official website: [Link]
Setting Default Props
[Link] = { color: 'blue' }
See: defaultProps
Official website: [Link]
Setting Default States
class Hello
extends Component
{ constructor (props)
{ super(props) [Link] = { visible: true }
}
}
See: defaultProps
Official website: [Link]
Functional Components
function MyComponent
({ name })
{
return
<div className='message-box'> Hello {name}
</div>
}
Functional components have no state. Also their props are passed as the
First Parameter to the Function.
Official website: [Link]
Pure Components
import React, {PureComponent} from 'react’
class MessageBox
extends PureComponent
{
···
}
Official website: [Link]
Components API
[Link]()
[Link]({ ... })
[Link](state => { ... })
[Link] [Link]
Official website: [Link]
State Hooks
import React, { useState } from 'react’;
function Example()
{ // Declare a new state variable, which we'll call "count" const [count,
setCount] = useState(0);
return
(
<div> <p>You clicked {count} times</p> <button onClick={() =>
setCount(count + 1)}> Click me </button> </div>
);
}
Official website: [Link]
Declare Multiple State variables
function ExampleWithManyStates()
{ // Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana’);
const [todos, setTodos] = useState([{ text: 'Learn Hooks’ }
]);
//
...
}
