React tutorials

app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Car1 from './Car'

// function App() {
//   return (
//     <div className="App">
//       <h1>Helloworld</h1>
//     </div>
//   );
// }


/** 
React lifecycle
1.Mount (putting html in dom)
    -> constructor()
    -> getDerivedStateFromPros()
    -> render
    -> componentDidMount()  //added in the dom or not

2.Update
    ->getDerivedStateFromProps()
    ->shouldComponentUpdate()
    ->render()
    ->getSnapshotBeforeUpdate()
    ->componentDidUpdate()
3.Unmount
 * componentWillUnmount()
 * 
 * */




class App extends React.Component{
  constructor(){
    super();
    this.state = {color : 'red'} 
  }
   render() {
    let obj = {name: "Ford", model: "Mustang"};

    return (
      <div className="App">
        <h1 color ={this.state.color}>Helloworld  {this.props.name} </h1>
        <Car brand= {obj} />
      </div>
    );
  }
}


class Car extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };

  }

  static getDerivedStateFromProps(props, state) {
    alert('getDerivedStateFromProps')
  }

  

  changeColor = () => {

    var colors = ['blue', 'red', 'yellow', 'pink', 'green']
    let index = parseInt(Math.random() * 5)
    this.setState({color: colors[index]});
  }

  componentDidMount() {
    // setTimeout(() => {
    //   this.setState({favoritecolor: "yellow"})
    // }, 1000)
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
  }
  
  render() {

    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p color={this.state.color}>
          It is a {this.state.color} __
             {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

export default Car;