App.jsx

/* eslint-disable react/prefer-stateless-function */
import { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };

    console.log('constructor');
  }

  componentDidMount() {
    console.log('componentDidMount');

    fetch('https://api.randomuser.me')
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          user: res.results[0],
        });
      });
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('mon count a bien changé');
    }
  }

  render() {
    const { count, user } = this.state;
    console.log('render');

    return (
      <main className="container">
        <div className="item">
          <h1>Hello {user && user.name && user.name.first} !</h1>
        </div>
        <div className="item">
          <p>Welcome to your fresh, lightweight, React App ! &#127752;</p>
        </div>
        <div className="item">
          <p>
            Start in the <code>App.jsx</code> component !
          </p>
        </div>
        <div className="item">
          <button
            onClick={() => this.setState({ count: count + 1 })}
            type="button"
          >
            {count}
          </button>
        </div>
      </main>
    );
  }
}

export default App;