Cheatography
https://cheatography.com
React.js Reusability Checklist & General Cheat Sheet
Component Type #1 - Class-based
class MyComponent extends Component {
static propTypes = {}
static defaultProps = {}
constructor(props) {
super(props);
this.state = { // state keys go here }
}
render() { }
}
|
Define a component this way when you need to maintain internal state.
Component Type #2 - Functional
function MyComponent(props) {
return ( <div></div>);
}
|
Define a component this way when you just need to render UI (no internal state required).
Synonymous with "Presentational Component".
Lifecycle Hooks
|
Called before component is mounted |
|
Never call setState() here |
|
Before rendering (no DOM yet) |
|
After rendering |
componentWillUpdate()
|
Can’t use setState()
here |
|
Operate on the DOM here |
componentWillReceiveProps()
|
|
shouldComponentUpdate()
|
Skips render()
if returns false |
Available PropTypes
|
Check if prop is an array |
|
Check if prop is a string |
|
Check if prop is a boolean (true/false) |
|
Check if prop is a number |
|
Check if prop is an object |
|
Check if prop is anything that can
be rendered in a React component |
|
Check if prop is a function |
|
Check if prop is a React element |
PropTypes.oneOf(['M', 'F''])
|
Check if prop matches one of
these values |
PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool
])
|
Check if prop matches one of
these types |
PropTypes.instanceOf(Class)
|
Check if prop is an instance of a class |
PropTypes.arrayOf(Array)
|
Check if prop is an array of
some specific type |
PropTypes.objectOf(PropTypes.number)
|
Check if prop is an object with
property values of a specific type |
PropTypes.shape({
potato: PropTypes.object,
turkey: PropTypes.string
})
|
Check if prop object has a
particular "shape" |
|
Check if anything at all is passed |
|
|
Reusability Checklist (ES6)
|
Step #1 -Define your component and import PropTypes
from the 'prop-types' package import React, { Component } from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
static propTypes = {}
static defaultProps = {}
constructor(props) {
super(props);
}
render() {}
}
|
|
Step #2 - Define the props & what type they are ...
static propTypes: {
className : PropTypes.string
isClosed : PropTypes.bool
email : PropTypes.string
}
...
|
|
Step #3 - Determine which props are required or optional ...
static propTypes: {
className : PropTypes.string
isClosed : PropTypes.bool
email : PropTypes.string.isRequired
}
...
|
|
Step #4 - Define the defaults (if applicable) ...
static defaultProps: {
className : "btn"
isClosed : true
}
...
|
You can custom validate a prop
...
static propTypes: {
email: ((props, propName) => {
const regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!regex.test(props[propName])) {
return new Error('Invalid email!');
}
})
}
...
|
Other APIs
setState(updater, [callback])
|
Component will re-render
with new state |
|
Calls render()
, skips shouldComponentUpdate()
|
Next Steps
Knowing how to create reusable components is step 1. |
Then you need to learn how to architect professional apps using React & Redux. |
|
|
Created By
hackingbeauty.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets