Below are the React Component and Elements Cheat Sheets.
Read full cheat sheet at React Cheat Sheet
1. React Component Lifecycle
Each component in React has a lifecycle that you can monitor and manipulate during its three main phases
React Mounting
-
constructor()
: called before anything else, when the component is initiated, and it is the natural place to set up the initialstate
and other initial values.
Example:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
render() {
return (
<h1>My Favorite Food is {this.state.favoritefood}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
-
getDerivedStateFromProps()
: Called right before rendering the element(s) in the DOM
Example:
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
static getDerivedStateFromProps(props, state) {
return {favoritefood: props.favfood };
}
render() {
return (
<h1>My Favorite Food is {this.state.favoritefood}</h1>
);
}
}
ReactDOM.render(<Header favfood="hotdog"/>, document.getElementById('root'));
-
render()
: required, and is the method that actually outputs HTML to the DOM.
Example
class Header extends React.Component {
render() {
return (
<h1>This is the demo content</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
-
componentDidMount()
: called after the component is rendered.
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritefood: "hotdog"})
}, 1000)
}
render() {
return (
<h1>My Favorite Food is {this.state.favoritefood}</h1>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
React Updating
-
getDerivedStateFromProps()
: This is the first method that is called when a component gets updated.
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
static getDerivedStateFromProps(props, state) {
return {favoritefood: props.favfood };
}
changeFood = () => {
this.setState({favoritefood: "sushi"});
}
render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoritefood}</h1>
<button type="button" onClick={this.changeFood}>Change food</button>
</div>
);
}
}
ReactDOM.render(<Header favfood="hotdog"/>, document.getElementById('root'));
-
shouldComponentUpdate()
: you can return a Boolean value that specifies whether React should continue with the rendering or not.
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
shouldComponentUpdate() {
return false;
}
changeFood = () => {
this.setState({favoritefood: "sushi"});
}
render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoritefood}</h1>
<button type="button" onClick={this.changeFood}>Change food</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
-
render()
: called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
changeColor = () => {
this.setState({favoritefood: "sushi"});
}
render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoritefood}</h1>
<button type="button" onClick={this.changeFood}>Change food</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
-
getSnapshotBeforeUpdate()
: you have access to theprops
andstate
before the update, meaning that even after the update, you can check what the values were before the update.
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritefood: "hotdog"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"When I was young, my favorite food is " + prevState.favoritefood;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"And now, my favorite food is " + this.state.favoritefood;
}
render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoritefood}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
-
componentDidUpdate()
: called after the component is updated in the DOM.
Example
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritefood: "pizza"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritefood: "hotdog"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"When I was young, my favorite food is " + this.state.favoritefood;
}
render() {
return (
<div>
<h1>My Favorite Food is {this.state.favoritefood}</h1>
<div id="mydiv"></div>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
Unmounting
componentWillUnmount()
: called when the component is about to be removed from the DOM.
Example
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
ReactDOM.render(<Container />, document.getElementById('root'));
2. React Elements and JSX
JSX produce React Element
const item = <h1>My JSX Element</h1>;
Use curly braces to embed some Javascript
const item = <div>{getContent()}</div>;
Use camelCase for the attribute name
const item = <div className="example"></div>;
Use curly braces to embed some Javascript
const item = <img src={image.url}></img>;
Self-close if the tag is empty
const item = <div />;
Top comments (0)