React JS LifeCycle

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React JS LifeCycle

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

React JS LifeCycle

React JS LifeCycle

React JS LifeCycle

class Todo extends React.Component {
  //Setting the initial state of the Component
  constructor() {
    super();
    this.state = {
      task: "",
      isCompleted: false,
      dateCreated: ""
    }
  }
}

React JS LifeCycle

class Todo extends React.Component {
  constructor() {
    super();
    this.state = {
      task: "",
      isCompleted: false,
      dateCreated: "",
    };
  }
  
  // Updating state after Component is mounted
  componentDidMount() {
    const currentDate = new Date();
    const dateString = currentDate.toDateString();
    this.setState({dateCreated: dateString});
  }
}

React JS LifeCycle

class Todo extends React.Component {
  constructor() {
    super();
    this.state = {
      task: "",
      isCompleted: false,
      dateCreated: "",
    };
  }
  
  // Updating state after Component is mounted
  componentDidMount() {
    const currentDate = new Date();
    const dateString = currentDate.toDateString();
    this.setState({dateCreated: dateString});
  }
}

30 Hours React JS Course - #06

By Tarun Sharma

30 Hours React JS Course - #06

React JS life Cycle Events

  • 512