React.js
Components
{: .-three-column}
Components
{: .-prime}
{: .-setup}
Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)
Import multiple exports
{: .-prime}
{: .-setup}
Properties
{: .-setup}
{: data-line="2,3"}
Use this.props
to access properties passed to the component.
See: Properties
States
{: data-line="2,3"}
Use states (this.state
) to manage dynamic data.
With Babel you can use proposal-class-fields and get rid of constructor
See: States
Nesting
As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.
{: data-line="5,6,7,8,9,10"}
Nest components to separate concerns.
See: Composing Components
Children
{: data-line="2"}
{: data-line="4"}
Children are passed as the children
property.
Defaults
Setting default props
{: data-line="1"}
See: defaultProps
Setting default state
{: data-line="4"}
Set the default state in the constructor()
.
And without constructor using Babel with proposal-class-fields.
{: data-line="2"}
See: Setting the default state
Other components
{: .-three-column}
Functional components
{: data-line="1"}
Functional components have no state. Also, their props
are passed as the first parameter to a function.
See: Function and Class Components
Pure components
{: data-line="3"}
Performance-optimized version of React.Component
. Doesn't rerender if props/state hasn't changed.
See: Pure components
Component API
These methods and properties are available for Component
instances.
See: Component API
Lifecycle
{: .-two-column}
Mounting
Method | Description |
---|---|
| Before rendering # |
| Don't use this # |
| Render # |
| After rendering (DOM available) # |
--- | --- |
| Before DOM removal # |
--- | --- |
| Catch errors (16+) # |
Set initial the state on constructor()
. Add DOM event handlers, timers (etc) on componentDidMount()
, then remove them on componentWillUnmount()
.
Updating
Method | Description |
---|---|
| Use |
| Skips |
| Render |
| Operate on the DOM here |
Called when parents change properties and .setState()
. These are not called for initial renders.
See: Component specs
Hooks (New)
{: .-two-column}
State Hook
{: data-line="5,10"}
Hooks are a new addition in React 16.8.
See: Hooks at a Glance
Declaring multiple state variables
Effect hook
{: data-line="6,7,8,9,10"}
If you're familiar with React class lifecycle methods, you can think of useEffect
Hook as componentDidMount
, componentDidUpdate
, and componentWillUnmount
combined.
By default, React runs the effects after every render β including the first render.
Building your own hooks
Define FriendStatus
{: data-line="11,12,13,14"}
Effects may also optionally specify how to "clean upβ after them by returning a function.
Use FriendStatus
{: data-line="2"}
Hooks API Reference
Also see: Hooks FAQ
Basic Hooks
Hook | Description |
---|---|
| |
| |
| value returned from |
Full details: Basic Hooks
Additional Hooks
Hook | Description |
---|---|
| |
| |
| |
| |
| |
| identical to |
| display a label for custom hooks in React DevTools |
Full details: Additional Hooks
DOM nodes
{: .-two-column}
References
{: data-line="4,9"}
Allows access to DOM nodes.
See: Refs and the DOM
DOM Events
{: data-line="5,9"}
Pass functions to attributes like onChange
.
See: Events
Other features
Transferring props
{: .-setup}
{: data-line="3"}
Propagates src="..."
down to the sub-component.
Top-level API
There are more, but these are most common.
See: React top-level API
JSX patterns
{: .-two-column}
Style shorthand
See: Inline styles
Inner HTML
See: Dangerously set innerHTML
Lists
{: data-line="6,7"}
Always supply a key
property.
Conditionals
Short-circuit evaluation
New features
{: .-three-column}
Returning multiple elements
You can return multiple elements as arrays or fragments.
Arrays
{: data-line="3,4,5,6"}
Fragments
{: data-line="3,4,5,6,7,8"}
Returning strings
{: data-line="2"}
You can return just a string.
Errors
{: data-line="3,4,5"}
Catch errors via componentDidCatch
. (React 16+)
See: Error handling in React 16
Portals
{: data-line="2,3,4,5"}
This renders this.props.children
into any location in the DOM.
See: Portals
Hydration
{: data-line="2"}
Use ReactDOM.hydrate
instead of using ReactDOM.render
if you're rendering over the output of ReactDOMServer.
See: Hydrate
Property validation
{: .-three-column}
PropTypes
{: .-setup}
See: Typechecking with PropTypes
| any
| Anything |
Basic
| string
| | | number
| | | func
| Function | | bool
| True or false |
Enum
| oneOf
(any) | Enum types | | oneOfType
(type array) | Union |
Array
| array
| | | arrayOf
(...) | |
Object
| object
| | | objectOf
(...) | Object with values of a certain type | | instanceOf
(...) | Instance of a class | | shape
(...) | |
Elements
| element
| React element | | node
| DOM node |
Required
| (Β·Β·Β·).isRequired
| Required |
Basic types
Required types
Elements
Enumerables (oneOf)
Arrays and objects
Use .array[Of]
, .object[Of]
, .instanceOf
, .shape
.
Custom validation
Also see
React website (reactjs.org)
React cheatsheet (reactcheatsheet.com)
Awesome React (github.com)
React v0.14 cheatsheet Legacy version
Last updated