React

4.9
124 reviews

last updated 2 days ago

react

This course is up to date, guaranteed

So you want to learn React?

Here are some common approaches

  • Random Blogs

    It's not that blog posts are bad, it's that finding and piecing together unrelated yet up to date posts that form a linear, cohesive path to learning complex technical topics is hard.

  • Youtube Videos

    It's happened to all of us, one moment you're using Youtube to learn about React's useEffect Hook and the next you're watching a "KIDS REACT TO PAYPHONES" video. Finding a high-quality, up-to-date YouTube video that effectively answers all of your questions on a JavaScript topic might actually be more difficult than finding a needle in a haystack. With so many videos and zero quality control, it’s easy to get sucked down the YouTube rabbit hole for hours without getting much learning out of it.

  • Live Workshops

    You know what they say, the best learning happens sitting in a classroom for 8 hours at a time listening to dry lectures and working through practice problems that only serve to make you feel comfortable so you’ll feel like you learned something. Oh wait, no. No one says that.

  • Conferences

    Things conferences are great for - networking, travelling on your company's dime, free swag, finding other companies to join. Things conferences are not great for - learning in depth technical topics that you will remember and put into practice literally 3 days later when you’re back at the office, quality wifi.

  • All-In-One Subscriptions

    These are the larger companies that offer courses on seemingly every technology under the sun. We won’t name them, but chances are your company has a business subscription to at least one of them and chances are that you don’t use it much. Their courses are made by a wide assortment of third-party contractors and optimized for production quality, not educational value.

The better approach?

All our courses follow the same proven structure, optimized for knowledge, not the illusion of learning.

  • Effort

    We're obsessed with making the most effective developer education content on the planet. On average, it takes us around 1,900 hours to create a new course. While others prioritize quantity, we optimize for quality.

  • Non-Contextual Analysis

    The first time you're introduced to a topic, any extra contextual information you have to process only serves as a distraction. Although it takes more time, our non-contextual analysis comes in two forms, video and text. This way, no matter how you prefer to learn, there's an option for you.

  • Quiz

    Nothing fancy here. After learning about the topic you'll receive a quiz to make sure you have a solid conceptual understanding before moving on to the hands-on practice.

  • Non-Contextual Practice

    Similar to the non-contextual analysis, context is everything. The first time you're hands-on with a new topic, any extra contextual information you have to process only serves as a distraction. This is why we first have you work through small, focused practice problems before you ever see the new topic in the context of a larger project.

  • Contextual Practice

    You've probably experienced it before, you feel like you're learning so much going through a tutorial only to hit a wall once it's time to actually apply that knowledge outside of the context of the tutorial. All the non-contextual practice in the world is useless if you're not then able to take that knoweldge and apply it towards a (contextual) production level codebase.

The result?

React Mastery

The ability to take what you learn and apply it towards a production codebase

  • react
  • react
  • react

This Course

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

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.

  • Hype

    DV
    Dig Vargas

    I was highly skeptical of yet-another-react-course as most I was finding online were way too basic. I'm a seasoned front-end dev in Angular and Ember and plain JS. Tyler's course was gold. Even the pieces that were "fundamentals" broke it down in a way that has me re-orient and re-integrate my old JS knowledge. I have a much deeper understanding of functional developemnt, javacript and of course React after making it through to the end.

    I've taken a few React courses and this is the one that finally made things click for me. The combination of explanations of the reasons behind certain React concepts, and the practical application of those concepts really helps the information stick. I highly recommend this course to anyone wanting to learn React.

    S
    Seong

    Before working through Tyler's course, I was familiar with the basics of React but wasn't very confident about starting a React project from scratch or answering interview questions about React. I now know how to set up a React project without blindly using Create React App, learned a ton of stuff not covered in my web development classes, and feel like I have a rock solid foundation for working on some advanced projects. Highly recommended for anyone looking for a complete React course.

    I was lost in the React ecosystem until I took this course. It really helped connect the pieces I already knew. The pacing with each topic is great. I actually feel like I've accomplished something. Highly recommend for anyone who wants to take a deep dive in React!

    I had read the React documentation before taking this course, so I didn't think I would learn anything new. However, I found that this course refined my understanding of the documentation, helped teach me techniques I didn't know I didn't know, and gave me a greater sense of confidence as a developer. Thank you for the quality content, Tyler!

    KD
    Kaleb Davenport

    This course helped me to go light years farther than the average React course. Instead of learning just the syntax, I acquired problem solving patterns and React thinking paradigms. As I have ideas that I want to turn into an apps, I feel confident to tackle a wide range of ideas and turn them into dynamic, easily accessible React apps. Thanks Tyler!

    DT
    Douglas Thom

    I had spent many hours working with examples and documentation trying to learn React. I really wish I had known about Tyler's program beforehand. Not only would I have saved a ton of time, but Tyler makes the explanation very clear right off the bat. Thank you!

    The best part of this course is it doesn't teach you just how to do it but rather also why to do it. The course is absolutely incredible. I feel i have a good understanding of React now.

    A continuous climb of the stairs towards mastery. Tyler is a true expert, because it takes an expert to make a complex topic this simple.

    This React course was as React itself. Simple, clear and brilliant. Thanks Tyler for the effort! I liked the detail and structure of this course and I liked it is not the 999 beginner React tutorial. ;)

    This course is great! It starts from the ground up and teaches you concepts you won't learn in most courses or bootcamps! I really enjoyed learning about webpack and babel under the hood.

    Master React today

    FAQ

    • What makes these courses different from other online courses?

      Our courses are designed to teach you everything you need to know to confidently write production-ready code. The tradeoff is it will require more work and focus than a course that features a few bite-sized screencasts. Real learning takes time, but you can feel confident that once you've finished a course, you’ll have mastered everything you need to know with minimal knowledge gaps.

    • Do the courses have captions?

      Yes.

    • How long should I expect each course to take?

      Naturally, it depends. Considering all our courses are comprised of video, text, quizzes, practice problems, and curriculum - 15-30 hours per course is a safe assumption.

    • In which order should I take the courses?

      If you're comfortable with JavaScript (including ES6) and want to jump straight to React, go with "React", "React Hooks", then any other course that looks interesting. If you're not comfortable with JavaScript, start with "Modern JavaScript", then "Advanced JavaScript", then any other course you'd like.

    • What level of experience is required for getting the most out of these courses?

      A fundamental understanding of JavaScript or familiarity with another programming language. For example, you should be comfortable with functions, arguments, loops, control flow, etc. If you want to jump straight in to the React courses, we recommend having a stronger knowledge of JavaScript, which you can get from our JavaScript courses if you’re unsure.

    • How does the subscription work?

      Like Netflix. You pay $40 per month or $350 per year for access to all our courses, premium newsletters, and events. Your subscription will be active until you cancel, which you can do at any time in your dashboard.

    • I need an official invoice with certain fields like VAT. Can I get one?

      Once you sign up, as part of the welcome email, you'll be given a link to fill out where you can input all your company's info.

    • What projects will I build throughout the courses

      You can find every project on the /projects page.

    4.9

    124 Reviews

    91%
    9%
    0%
    0%
    0%
    • W
      WD
      24 days ago

      Very clear, great distilled content, good mix of video, written, and quiz instruction.

    • SG
      Simon Gretas
      30 days ago

      Not my first intro to React course, but first time I feel confident about going out there and start writing my first React app. I didn't only learn how to write a React component, but actually understanding what it is and how to use it.

    • Sergio Andrade
      32 days ago

      This course is incredible, I love the way Tyler teaches you, it makes React super easy. In the past I've took another React course that was part of a bootcamp and I didn't understood it, I was just able to create basic components, but now I'm confident about building great things.

    • Porfirio Basaldua
      33 days ago

      The content is really well structured and covers a lot of topics. This at times feels overwhelming, but through the actual coding practice and perhaps rewatching the content, I believe the content makes for a really good learning. Another thing that I liked is that the course is self-contained, meaning that all the necessary tools are right here in the videos and it is seldom required to look for information in other sources.

    • JJ
      Joe Johnson
      36 days ago

      A lot of the concepts and lessons for this course assume that you've been programming much longer than I have been. As a result, there were several stages of the course where I felt that I was out of my league and that I was ill-prepared. Tyler's instructional style and the course docs and videos are very straight-forward and scaffolded well. I learned a lot, but it's very obvious that my foundational programming skills are lacking and that I should look elsewhere and spend a lot more time in more introductory JavaScript courses before returning to this site. I certainly don't regret paying for the course, though, and I can see the value of this site and its courses and will be returning when I have learned more of the prerequisite programming skills needed to be more successful.

    • A
      Andrew
      37 days ago

      Really amazing course. Tyler breaks down the why as well as the how on React and this went a long way in helping my understanding of the material. Definitely worth the subscription.

    • Sean Kelliher
      46 days ago

      Overall, I found the course helpful. I didn't know anything about React. Now, I know something about React. The course structure alternates between instructional chapters where you learn a new skill and a project chapter where you deploy that skill to build another part of the app you are creating. Having the two parts is helpful. Some of the instructional chapters are long and can be IMHO confusing. You learn various ways of doing something (this is probably good). But, as a result, you're often sort of doing something, then undoing it when a better way is introduced a little later on. The React course does take a lot of time. Sometimes, I spent an hour or two on a chapter when the video is only about 10 or 15 minutes. I stopped and started the video and took really detailed notes. Hopefully, this pays off in the long run.

    • EH
      Erica Hill
      48 days ago

      This course was great. It was a challenging course but easy to get through. I like that there's an additional project at the end to work through independently.

    • LC
      Luis Chacon
      49 days ago

      I really liked this course. I enjoyed it a lot and I considered it's truly helpful for learning React. I think Tyler is a great teacher.

    • JF
      Jeff Feiwell
      52 days ago

      I will absolutely be recommending this course, thank you for making it. If you want feedback I only have one suggestion - there are a few things I'm still stuck on and would be amazing to have an FAQ to access (assuming you can't scale something like office hours) at certain parts in the course.