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 we'll cover event handlers in elements. In the application that you are building, you are using the following button element to dismiss an item from the list.

...

<button
  onClick={() => this.onDismiss(item.objectID)}
  type="button"
>
  Dismiss
</button>

...

This function is already complex because it passes a value to the class method and has to wrap it in another (arrow) function. Essentially, it has to be a function that is passed to the event handler. The  code given below wouldn't work if you are following along on a local React setup, because the class method would be executed immediately when you open the application in the browser:


...

<button
  onClick={this.onDismiss(item.objectID)}
  type="button"
>
  Dismiss
</button>

...

# `onClick`
When using `onClick={doSomething()}`, the `doSomething()` function executes immediately when the application is opened in a browser. The expression in the handler is evaluated. Since the returned value of the function isn't a function anymore, nothing would happen when you click the button. But using `onClick={doSomething}` where `doSomething` is a function, it would only be executed if the button is clicked. 

The same rules apply for the `onDismiss()` class method.

However, using `onClick={this.onDismiss}` wouldn't suffice, because the `item.objectID` property needs to be passed to the class method to identify the item that should be dismissed. We wrap it into another function to sneak in the property. This concept is called higher-order functions in JavaScript, which we will cover briefly later.


Learn how to define event handlers in a React app. You will also get to learn the importance of using Arrow function inside event handlers.  

Event Handler

Learn how to define event handlers in a React app. You will also get to learn the importance of using Arrow function inside event handlers.

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

Event Handler

`onClick`