Learn React

4.9
★★★★★
163 reviews

last updated 10 months ago

Start for Free
react

This course is up to date, guaranteed

  • react
  • react
  • react

The Numbers

  • 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
    ★★★★★

    163 Reviews

    91%
    8%
    1%
    0%
    0%
    • KD
      Karthikeyan Dever
      ★★★★★
      2 days ago

      loved the approach taken to make understand every concept from the root.

    • JT
      Jeremy Teo
      ★★★★★
      5 days ago

      Starting from the stage "almost-zero" of web programming, I've been searching for courses that would enable to wrap my head around JavaScript and React concepts. I've tried numerous numbers of books and (expensive) courses but always ended up with lots of unanswered "Whys" and "Hows". I've just completed Tyler's course in Advance, Modern JavaScript and React course and am yearning to jump to the next course after the curriculum. Not only does he do a great job of breaking down complex concepts, the courses he teach also gives you a lot of those "Ah-Ha" learning moments. Best of all, this course is so affordable for the results I'm getting.

    • Avatar for Sam S
      Sam S
      ★★★★★
      6 days ago

      I already knew React decently but your course was a great holistic view that does really well removing magic. Well done Tyler

    • Avatar for Mark Baker
      Mark Baker
      ★★★★★
      8 days ago

      This is an excellent way to learn React. I most liked the combination of teaching concepts and then providing a code along for a project. I highly recommend this course.

    • JS
      Jarrod Seccombe
      ★★★★★
      23 days ago

      Fantastic pacing for the course, building up concepts based on things tought in past lessons. Thanks for a great React primer!

    • Avatar for Alex Patterson
      Alex Patterson
      ★★★★★
      2 months ago

      I took this course to see what I was missing in React and it turned out I learned more things about JavaScript...lol. Other than that it had a great pace and I would recommend it to anyone (err everyone)!

    • TH
      Thang Hoang
      ★★★★★
      3 months ago

      It is very easy to learn for beginner like me. I like the way you break up each lesson into smaller undertandable reasonings. I will recommend this to anybody who wants to learn React.

    • PR
      Patrick Riley
      ★★★★★
      3 months ago

      I found this course after buying a React textbook, but not making much progress. The book was complete, but dry, and I didn't have any Eureka moments. This course was valuable to me, as an experienced developer looking to wrap my head around a foreign approach to web development. I'll definitely be keeping my subscription and taking other courses. Next stop: hooks. Thanks for the great content!

    • Avatar for Jakob Bergeson
      Jakob Bergeson
      ★★★★★
      3 months ago

      This course was awesome! I had already learned React months ago but the depth provided here let me really LEARN React. Thank you so much!

    • Avatar for Christina Martinez
      Christina Martinez
      ★★★★★
      4 months ago

      I really enjoyed this React course. Tyler explained things clearly and in plain English, so it was in-depth without being inaccessible. I'd highly recommend it to anyone who wants to learn React!

    Join Us

    Join thousands of ambitious developers who use our courses, community, and weekly events to scale their JavaScript careers.