React Cheat Sheet
Tags: react, reactnative
Published: 2020-07-19 15:57:39

Below are the React __Component__ and __Elements__ Cheat Sheets. 
Read full cheat sheet at [React Cheat Sheet](https://simplecheatsheet.com/tag/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 initial `state` 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 the `props` and `state` _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 />;
```

[Continue...](https://simplecheatsheet.com/tag/react-cheat-sheet/)