Gain insights into V15 React fundamentals, API work, code organization, testing, and state management. Discover hands-on skills by building a Hacker News App for your portfolio.

vuejs-sass.tar.gz

If you’re working with a legacy React codebase, then this course will prove useful. React has seen a great deal of change over the years, but there might be situations where you have to work with an older version.

In this course, you will learn the fundamentals of V15 React. You will learn how to work with an API, how to organize and test your code as well as how to give your React app state. Throughout this course, you will have hands-on experience building a fully functional Hacker News App. By the end of this course, you will be prepared to build your own applications and have something to showcase in your portfolio.

If you’re looking for the updated version of this course featuring V16, please visit The Road to React: The one with Hooks.

Nicole Ferguson

I’m doing Robin’s Road to Learn React course this weekend & I almost feel guilty for having so much fun.

 Web developer

Eric Priou

The Road to learn React by Robin Wieruch is a must read. Clean and concise for React and JavaScript.

Web developer

Nicholas Hunt-Walker

This is one of the most well-written & informative coding books I’ve ever worked through. A solid React & ES6 introduction.

Instructor at a Seattle Coding School

Andre Vargas

The Road to Learn React by Robin Wieruch is such an awesome book! Most of what I learned about React and even ES6 was through it!

Muhammad Kashif

I recommend this to any student or professional interested in learning react basics to advanced level. I have 17 years of experience in web and desktop app development, and before reading this I was having trouble in learning react. It works like magic.

The Road to React: The One with Class Components

Now it's time to get real with APIs and move past sample data. If you are not familiar, I encourage you [to read my article on how I got to know APIs](https://www.robinwieruch.de/what-is-an-api-javascript/).

For our first foray into the concept, we will be using [Hacker News](https://news.ycombinator.com/), a solid news aggregator about tech topics. In this exercise, we will use the Hacker News API to fetch trending stories. There are [basic](https://github.com/HackerNews/API) and [search](https://hn.algolia.com/api) APIs to get data from the platform. Search makes sense in the application that we are building in this course because we want to be able to search Hacker News stories. Visit the API specification to get an understanding of the data structure.
$$$$
## Lifecycle Methods

You may remember lifecycle methods were mentioned briefly in the last chapter, as a hook into the lifecycle of a React component. They can be used in ES6 class components, but not in functional stateless components. Besides the `render()` method, there are several methods that can be overridden in a React ES6 class component. All of these are the lifecycle methods.
$$$$
### Mounting 

We have already covered two lifecycle methods that can be used in an ES6 class component:

* The constructor is only called when an instance of the component is created and inserted in the DOM. The component gets instantiated in a process called mounting.
* The `render()` method is called during the mount process too, but also when the component updates. Each time the state or the props of a component changes, the `render()` method is called.

There are two more lifecycle methods when mounting a component: `getDerivedStateFromProps()` and `componentDidMount()`. The constructor is called first, `getDerivedStateFromProps()` is called before the `render()` method, and `componentDidMount()` is called after the `render()` method.

Overall, the mounting process has 4 lifecycle methods, invoked in the following order:

* constructor()
* getDerivedStateFromProps()
* render()
* componentDidMount()
$$$$
### Updating 
For the update lifecycle of a component when the state or the props change, there are 5 lifecycle methods, in the following order:

* getDerivedStateFromProps()
* shouldComponentUpdate()
* render()
* getSnapshotBeforeUpdate()
* componentDidUpdate()
$$$$
### Unmounting 

Lastly, there is the unmounting lifecycle. It has only one lifecycle method: `componentWillUnmount()`.
$$$$
### Description of Lifecycle Methods  

You don't need to know all the lifecycle methods from the beginning, and even in a large React application you'll only use a few of them besides the `constructor()` and the `render()` methods. Still, it is good to know each lifecycle method can be used for specific purposes:

* **constructor(props)** is called when the component gets initialized. You can set an initial component state and bind class methods during that lifecycle method.

* **static getDerivedStateFromProps(props, state)** is called before the `render()` lifecycle method, both on the initial mount and on the subsequent updates. It should return an object to update the state, or null to update nothing. It exists for **rare** use cases where the state depends on changes in props over time. It is important to know that this is a static method and it doesn't have access to the component instance.

* **render()** is a mandatory lifecycle method that returns elements as an output of the component. The method should be pure, so it shouldn't modify the component state. It gets an input as props and state and returns an element.

* **componentDidMount()** is called once, when the component mounted. That's the perfect time to do an asynchronous request to fetch data from an API. The fetched data is stored in the local component state to display it in the `render()` lifecycle method.

* **shouldComponentUpdate(nextProps, nextState)** is always called when the component updates due to state or props changes. You will use it in mature React applications for performance optimization. Depending on a boolean that you return from this lifecycle method, the component and all its children will render or will not render on an update lifecycle. You can prevent the render lifecycle method of a component.

* **getSnapshotBeforeUpdate(prevProps, prevState)** is a lifecycle method, invoked before the most recently rendered output is committed to the DOM. In rare cases, the component needs to capture information from the DOM before it is potentially changed. This lifecycle method enables the component to do it. Another method (`componentDidUpdate()`) will receive any value returned by `getSnapshotBeforeUpdate()` as a parameter.

* **componentDidUpdate(prevProps, prevState, snapshot)** is a lifecycle method that is invoked immediately after updating, but not for the initial render. You can use it as to perform DOM operations or to perform more asynchronous requests. If your component implements the `getSnapshotBeforeUpdate()` method, the value it returns will be received as the `snapshot` parameter.

* **componentWillUnmount()** is called before you destroy your component. You can use this lifecycle method to perform any cleanup tasks.

As you may have gathered, the `constructor()` and `render()` lifecycle methods are the most commonly used lifecycle methods for ES6 class components. The `render()` method is always required to return a component instance.

Lastly, `componentDidCatch(error, info)` was introduced in [React 16](https://www.robinwieruch.de/what-is-new-in-react-16/) as a way to catch errors in components. For instance, displaying the sample list in your application works fine, but there could be a time when a list in the local state is set to `null` by accident (e.g. when fetching the list from an external API, but the request failed and you set the local state of the list to null). It becomes impossible to filter and map the list because it is `null` and not an empty list. The component would be broken, and the whole application would fail. Using `componentDidCatch()`, you can catch the error, store it in your local state, and show a message to the user.
$$$$


Now it's time to get real with APIs and move past sample data. If you are not familiar, I encourage you [to read my article on how I got to know APIs](https://www.robinwieruch.de/what-is-an-api-javascript/).

For our first foray into the concept, we will be using [Hacker News](https://news.ycombinator.com/), a solid news aggregator about tech topics. In this exercise, we will use the Hacker News API to fetch trending stories. There are [basic](https://github.com/HackerNews/API) and [search](https://hn.algolia.com/api) APIs to get data from the platform. Search makes sense in the application that we are building in this course because we want to be able to search Hacker News stories. Visit the API specification to get an understanding of the data structure.
$$$$
# Lifecycle Methods

You may remember lifecycle methods were mentioned briefly in the last chapter, as a hook into the lifecycle of a React component. They can be used in ES6 class components, but not in functional stateless components. Besides the `render()` method, there are several methods that can be overridden in a React ES6 class component. All of these are the lifecycle methods.
$$$$
## Mounting 

We have already covered two lifecycle methods that can be used in an ES6 class component:

* The constructor is only called when an instance of the component is created and inserted in the DOM. The component gets instantiated in a process called mounting.
* The `render()` method is called during the mount process too, but also when the component updates. Each time the state or the props of a component changes, the `render()` method is called.

There are two more lifecycle methods when mounting a component: `getDerivedStateFromProps()` and `componentDidMount()`. The constructor is called first, `getDerivedStateFromProps()` is called before the `render()` method, and `componentDidMount()` is called after the `render()` method.

Overall, the mounting process has 4 lifecycle methods, invoked in the following order:

* constructor()
* getDerivedStateFromProps()
* render()
* componentDidMount()
$$$$
## Updating 
For the update lifecycle of a component when the state or the props change, there are 5 lifecycle methods, in the following order:

* getDerivedStateFromProps()
* shouldComponentUpdate()
* render()
* getSnapshotBeforeUpdate()
* componentDidUpdate()
$$$$
## Unmounting 

Lastly, there is the unmounting lifecycle. It has only one lifecycle method: `componentWillUnmount()`.
$$$$
## Description of Lifecycle Methods  

You don't need to know all the lifecycle methods from the beginning, and even in a large React application you'll only use a few of them besides the `constructor()` and the `render()` methods. Still, it is good to know each lifecycle method can be used for specific purposes:

* **constructor(props)** is called when the component gets initialized. You can set an initial component state and bind class methods during that lifecycle method.

* **static getDerivedStateFromProps(props, state)** is called before the `render()` lifecycle method, both on the initial mount and on the subsequent updates. It should return an object to update the state, or null to update nothing. It exists for **rare** use cases where the state depends on changes in props over time. It is important to know that this is a static method and it doesn't have access to the component instance.

* **render()** is a mandatory lifecycle method that returns elements as an output of the component. The method should be pure, so it shouldn't modify the component state. It gets an input as props and state and returns an element.

* **componentDidMount()** is called once, when the component mounted. That's the perfect time to do an asynchronous request to fetch data from an API. The fetched data is stored in the local component state to display it in the `render()` lifecycle method.

* **shouldComponentUpdate(nextProps, nextState)** is always called when the component updates due to state or props changes. You will use it in mature React applications for performance optimization. Depending on a boolean that you return from this lifecycle method, the component and all its children will render or will not render on an update lifecycle. You can prevent the render lifecycle method of a component.

* **getSnapshotBeforeUpdate(prevProps, prevState)** is a lifecycle method, invoked before the most recently rendered output is committed to the DOM. In rare cases, the component needs to capture information from the DOM before it is potentially changed. This lifecycle method enables the component to do it. Another method (`componentDidUpdate()`) will receive any value returned by `getSnapshotBeforeUpdate()` as a parameter.

* **componentDidUpdate(prevProps, prevState, snapshot)** is a lifecycle method that is invoked immediately after updating, but not for the initial render. You can use it as to perform DOM operations or to perform more asynchronous requests. If your component implements the `getSnapshotBeforeUpdate()` method, the value it returns will be received as the `snapshot` parameter.

* **componentWillUnmount()** is called before you destroy your component. You can use this lifecycle method to perform any cleanup tasks.

As you may have gathered, the `constructor()` and `render()` lifecycle methods are the most commonly used lifecycle methods for ES6 class components. The `render()` method is always required to return a component instance.

Lastly, `componentDidCatch(error, info)` was introduced in [React 16](https://www.robinwieruch.de/what-is-new-in-react-16/) as a way to catch errors in components. For instance, displaying the sample list in your application works fine, but there could be a time when a list in the local state is set to `null` by accident (e.g. when fetching the list from an external API, but the request failed and you set the local state of the list to null). It becomes impossible to filter and map the list because it is `null` and not an empty list. The component would be broken, and the whole application would fail. Using `componentDidCatch()`, you can catch the error, store it in your local state, and show a message to the user.
$$$$


This lesson briefly introduces the lifecycle methods that can be overridden in a React ES6 class component 

Lifecycle Methods

This lesson briefly introduces the lifecycle methods that can be overridden in a React ES6 class component

Introduction

Intro to React and some JavaScript Basics

Basics in React

Getting Real with an API

Code Organization and Testing

Advanced React Components

State Management in React and beyond

Final Steps to Production

Appendix: Bootstrapping your React App

Lifecycle Methods

Lifecycle Methods