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

# Introducing React Developer Tools
[React Developer Tools](https://github.com/facebook/react-devtools) lets you inspect the React components hierarchy, props and state. It comes as a browser extension for Chrome and Firefox and as a standalone app that works with other environments. Once installed, the extension icon will light up on websites using React. On such pages, you will see a tab called "React" in your browser's developer tools.

# Debugging the Hacker News App
Let's try it on our Hacker News application. On most browsers, a quick way to bring the *dev tools* up is to right-click on the page and than hit "Inspect". Do it when your application is loaded, then click on the "React" tab. You should see its elements hierarchy, being `<App>` the root element. If you expand it, you will find instances of your `<Search>`, `<Table>` and `<Button>` components, as well.

The extension shows on the side pane the component's state and props for the selected element. For instance, if you click on `<App>`, you will see that it has no props, but it already has a state. A very straightforward debugging technique is monitoring your application's state changes from user interaction.

First, check the "Highlight Updates" option, usually above the elements tree. Second, type a different search term in the application's input field. Only `searchTerm` will be changed in the component's state. We already knew that would happen, but now we can see it working as planned.

Finally, press the "Search" button. The `searchKey` state will immediately changes to same value as `searchTerm`, and then the response object is added to `results`. The asynchronous nature of your code is now visible.

If you right-click on any element, a dropdown menu will show several useful options. For instance, you could copy the element's props or name, find the corresponding DOM node, or jump to the application's source code in the browser. The last option is very useful for inserting breakpoints and debugging your JavaScript functions.
$$$$
# Exercises
* Install the [React Developer Tools](https://github.com/facebook/react-devtools) extension on your favorite browser
  * Run your Hacker News Clone application and inspect it using the extension
  * Experiment with state and props changes
  * Watch what happens when you trigger an asynchronous request
  * Perform several requests, including repeated ones. Watch the cache mechanism working
$$$$
# Further Reading:
* Read about [how to debug your JavaScript functions in the browser](https://developers.google.com/web/tools/chrome-devtools/javascript/)
* Read about (and use) [the React Profiler](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)

In this lesson, we'll learn how to debug React code with React Developer Tools

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

Debugging with React Developer Tools

Introducing React Developer Tools

Debugging the Hacker News App