Learn React

4.9

★★★★★

180 reviews

last updated 13 months ago

Start for Free

This course is up to date, guaranteed

30 Topics
416 Minutes of Video
35,299 Words of Text
14 Quizzes
4 Exercises
2 Projects

The Outline

Course Overview

Introduction, Philosophy, and Tips
Projects (What you'll build)
State of React

We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll build and the current state of React.

Passing Data to Components

Introduction to Props
(Quiz) Props
(Practice) Props
(Solution) Props

With any component based system you need a way to pass data into component. In this section, we'll cover how to do that in React with props.

Functional Components

Pure Functions
(Quiz) Pure Functions
(Project) Language Nav

With React there are two ways to create components. In this section, you'll learn one of those ways utilizing pure functions.

Handling Form State

(Project) Battle Instructions
Forms in React: Controlled vs Uncontrolled Components
(Project) Player Input
(Project) Render PlayerInput
(Project) Player Preview
(Project) Results Skeleton
(Project) API
(Project) Results Data
(Project) Results UI

Handling form state can be different than handling component state in React. In this section you'll learn both approaches as well as their tradeoffs.

Intermission

Check in

Everything after this section is what I would consider 'Advanced React'. This section is to make sure you're where you need to be to continue on.

React Router

Introduction to React Router
(Project) Adding Routes
(Project) Navbar
React Router Query Strings
(Project) Query Strings
404 with React Router
(Project) 404

React Router is the most popular routing solution for React. In this section you'll learn its philosophy as well as how to use it.

Production Builds and Hosting

Building React Apps for Production
(Quiz) Building for Production
(Project) Production Build
(Project) Hosting with Netlify

What's the point of building an app if you can't host it? In this section you'll not only learn how to host a React application, but first how to build your React app for production to make it more performant.

React Overview

Why React?
The React Ecosystem
(Bonus) Imperative vs Declarative Programming
(Bonus) Composition vs Inheritance

Whenever you learn a new tool, you should first ask yourself why it's necessary. If you can't answer that question, you may not need it. In this section, we'll answer that question in regards to React as well as cover some other programming fundamentals that React utilizes.

Rendering Lists

Rendering Lists in React
(Quiz) Lists
(Practice) Lists
(Solution) Lists
(Project) Popular Navar

As a front-end developer, you eventually come to the reality that you're a glorified list creator. In this section you'll learn how to create performant lists in React.

Validating Props with PropTypes

PropTypes
(Practice) PropTypes
(Solution) PropTypes
(Project) Language Nav PropTypes

Things go wrong when you get your types mixed up. In this section you'll learn how to minimize that by using PropTypes.

Composition with React children

children in React
(Project) Reusable Card Component
(Project) Profile List
(Project) Reset Players

Composition is at the heart of React. In this section you'll learn about React's 'children' feature which allows you to compose components more elegantly.

Code Sharing in React

Higher Order Components
(Quiz) Higher Order Components
(Project) Tooltip
(Project) withHover Higher Order Component
React Render Props
(Quiz) Render Props
(Project) Hover Render Prop

The problem is coupling UI to a component is it makes it hard to reshare non-visual logic. In this section you'll learn two strategies for best accomplishing that - Higher-order components and Render Props.

Better Classes with Class Fields

Class Fields
(Quiz) Class Fields
(Project) Migrating to Class Fields

In this section you'll learn how to utilize JavaScript's new Class Fields feature to make your React components more concise.

Bonus Time

(Bonus) React Interview Questions
(Bonus) React 'AHA' Moments
Next Steps

In this section you'll learn everything else about React that you need to know that didn't fit into the normal flow of the course.

The Road to Hello World

Everything you should know about NPM
(Quiz) NPM
Webpack: A Gentle Introduction
(Quiz) Webpack
(Project) First Component
(Bonus) React Elements vs React Components
JSX Tips for Beginners
(Quiz) JSX

There's more to learning how to build React apps than React itself. In this section you'll learn those topics which include NPM and Webpack.

Managing State

The 'this' keyword: Intro and Implicit Binding
The 'this' keyword: Explicit binding with .call, .apply, and .bind
The 'this' keyword: 'new', 'lexical', and 'window' binding
(Quiz) The 'this' Keyword
Managing State in React
(Quiz) State in React
(Practice) State
(Solution) State
(Project) Navbar State

Components managing their own state is part of what makes React so special. In this section you'll learn how to do that as well as some pitfalls to watch out for.

The Component Lifecycle

The React Component Lifecycle
(Quiz) The Component Lifecycle
(Project) Fetch Repos
(Project) Caching Repos
React Icons
(Project) Repos Grid

React exposes various methods that allow you to hook into the component life-cycle. In this section you'll learn what those methods are as well as pitfalls to avoid.

Building Reusable Components

Default Props
(Project) Loading Component

What good would a component model be without reusability. In this section you'll learn how to create highly reusable React components.

Bypassing Props with React Context

React Context
(Quiz) Context
(Project) Theme Provider
(Project) Toggle Theme
(Project) Consume Theme

Sometimes you need to pass data deep into the component tree. In this section you'll learn how to do that using React's context feature.

Performance Gains with Code Splitting

Code Splitting with React Router v4
(Quiz) Code Splitting
(Project) Code Split

In this section you'll learn how to code split your applications for increased performance gains.

The Love

This is the part where we're supposed to tell you how great the course is. Even better if we get other "famous" developers to give their "reviews". Instead, we'll let those who have actually taken the course do that.

4.9

★★★★★

180 Reviews

91%

Likhit V.
★★★★★
5 days ago
Great course. I was a little hesitant because of the price at the beginning but I soon realized why it is the way it is. The course was never boring because of Tyler's funny personality and I got through it easily and learned a ton. Best $350 spent; these courses are so worth it and valuable.
BM
Ben Millward
★★★★★
27 days ago
Amazingly detailed, really easy to follow and really helps showing the development of each stage
AT
Alex Thelander
★★★★★
37 days ago
This was, and i can't stress this enough, the best REACT course iv'e ever taken. Tyler explains everything in an easy to understand way and backs it up with a lot of examples! Thank you!:)
Nathaniel Palmer
★★★★★
45 days ago
While taking the course I felt I didn't get a whole lot of value from the project sections. I ended up mostly transcribing code from the video which was of limited learning value. I think it would have helped to make these sections more open-ended and set up clearer expectations for how they were intended to be worked through. Aside from the content I also ran into a few UX issues: - having to scroll to the bottom of the page to get to the "next lesson" button - no control over video size which made the content difficult to see when I couldn't play the video full-screen - no easy way to give feedback aside from review button at end of the course
RL
Ryan Lin
★★★★★
52 days ago
best course ever
E
Einar
★★★★★
53 days ago
An exellent starting point for developers interested in getting into React. Can't recommend it enough!
TK
Toms Kedo
★★★★★
54 days ago
Best course on REACT hands down. I have tried couple courses before and always felt the instructors didn't explain enough. Or when starting new topic instead of teaching it without context they start to apply it to big e-commerce project and you are left wondering how to implement new techniques in others projects. Thank you Tyler for this wonderful course, I still yet to start last project, I know I will have to reference back previous lessons to remind myself about concepts and syntax. However I finally feel I will be able to become a React developer. And I will definitely check out rest of courses too.
ER
Euan Ramsay
★★★★★
54 days ago
As someone who has been working with React for a few years now, this course really allowed me to move from being able to use React to understanding how it actually works.
Michael Willis
★★★★★
2 months ago
A really great course that helped a lot with my understanding of React. The project that we walked through during the entire course was great!
Karan Mishra
★★★★★
2 months ago
Hands down the best and only course you will need to learn React. I loved Tyler's approach of teaching and he has structured the lessons brilliantly. I am excited already to implement the new concepts I learnt in this course, at work. Amazing experience :)