Cheatography
https://cheatography.com
React.js Reusability Checklist & General Cheat Sheet
Component Type #1 - Class-basedclass 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 - Functionalfunction 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 Hooksconstructor()
| Called before component is mounted | render()
| Never call setState() here | componentWillMount()
| Before rendering (no DOM yet) | componentDidMount()
| After rendering | componentWillUpdate()
| Can’t use setState() here | componentDidUpdate()
| Operate on the DOM here | componentWillReceiveProps()
| Use setState( ) here | shouldComponentUpdate()
| Skips render() if returns false |
Available PropTypesPropTypes.array
| Check if prop is an array | PropTypes.string
| Check if prop is a string | PropTypes.bool
| Check if prop is a boolean (true/false) | PropTypes.number
| Check if prop is a number | PropTypes.object
| Check if prop is an object | PropTypes.node
| Check if prop is anything that can be rendered in a React component | PropTypes.func
| Check if prop is a function | PropTypes.element
| 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" | PropTypes.any
| 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 APIssetState(updater, [callback])
| Component will re-render with new state | forceUpdate()
| Calls render() , skips shouldComponentUpdate() |
Next StepsKnowing 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