> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/redux/notes/background/react-lifecycle.md).

# React-LifeCycle

## React Lifecycle

1. describe the three phases of the REact Component Lifecycle
2. properly explain what the `constructor` and `render` methods do and their place in the React Component Lifecycle
3. use the `componentDidMount` lifecycle method to set a components state post render

## lifecycle methods chart

[Lifecycle Methods Chart](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

## Pokemon project

1. console.log `constructor` and `render` of App.js
2. console.log `render` of function Pokemon component
3. create `componentDidMount` and console.log it
4. create `componentDidUpdate` and console.log it with logic for different parts of the state

## Earthquake project

1. just go through the [Earthquake project](https://codesandbox.io/s/ry6p8j7qq4) and show class coponent and use of `fetch` to get data and update state

## Build doggos project

1. convert App from function component to class component
2. create `doggos` state key in the class state object. it’s an array of image sources
3. define `componentDidMount` and use `fetch` to grab data from teh [dog ceo api](https://dog.ceo/api)
4. flesh out application with other features as time permits
5. allow people to specify dog breed for search
6. allow people to toggle select of dog images