React

4.8
3,638 Reviews
  • Updated 59 days ago

This course is guaranteed to be up to date.

If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of developers and maintains an average rating of 4.8/5. Since then we've rebuilt it from the ground up to include all of the best practices and newest APIs for building professional React apps in 2019.

Pre-Requisites

Familiarity with HTML, CSS, and JavaScript (ES6+). If that's not you, check out our "Advanced JavaScript" and "Modern JavaScript" courses first.
Sign Up

What you'll learn

  • Why React?

    React is both the most popular and most loved front-end framework on the planet. Before spending the time to learn it, it's important to understand how it'll help you build better UI.

  • Imperative vs Declarative Programming

    React takes a declarative approach to creating and updating your UI. Unfortunately, that probably doesn't mean much to you if you don't know what 'declarative' means. You'll learn the difference between imperative and declarative code and how that can help you write better UIs.

  • Composition vs Inheritance

    React is all about composition. You'll learn what that means and how it differs from the traditional way of writing software with inheritance.

  • NPM

    React won't do you much good if you can't add it to your app. You'll learn all about NPM (the company and the package manager) to more effectively manage your external packages.

  • Webpack

    At its core, webpack is a module bundler. You'll learn what that means, how it can help you, and anything else you'd ever want to know about Webpack and how to use it.

  • React Elements vs React Components

    You can't build a React app without components, and you can't build components without elements. You'll learn the difference between the two and what JSX does behind the scenes.

  • JSX

    JSX allows you to describe what you want your UI to look like based on the state of your component. You'll learn how to use it and some other tips every React developer should know.

  • Props

    Props are to components what arguments are to functions. You'll learn all about props and how to use them to pass information into components.

  • Rendering Lists in React

    At the end of the day, we're all just glorified list developers. You'll learn how to performantly render lists of data using React.

  • The "this" Keyword

    The 'this' keyword is a JavaScript feature that allows you to invoke functions with different focal objects. It's required knowledge for any JavaScript and React developer.

  • .call, .apply, .bind

    This isn't just a good interview question. Understanding the difference between .call, .apply, and .bind in JavaScript will help you with certain aspects of building React apps.

  • Managing State in React

    This is where React shines. You'll learn all about adding and managing state using React components.

  • Pure Functions

    One key to writing predictable software is to keep your functions pure. You'll learn why that is and how React adopts and leverages that principle.

  • PropTypes

    What if you pass a string to a component that expects an object? You'll learn about PropTypes which helps you avoid that issue.

  • The Component Lifecycle

    You'll look at how you can hook into different moments in a component's lifecycle in order to accomplish specific tasks like data fetching or setting up subscriptions.

  • API Requests in React

    If your app doesn't fetch external data, it's just a static website. We'll look at the key to creating dynamic, data-driven websites - making API requests in React.

  • React Icons

    The React Icons library is the most popular way to add icons to a React app. You'll learn the API and what options are available to you.

  • Forms in React

    Getting user input is a critical part of any application. You'll learn patterns you can leverage to do it at any scale.

  • Controlled vs Uncontrolled Components

    With React, components manage their own state. Historically though, state has lived in the DOM. You'll learn the difference between controlled and uncontrolled components which gets to the heart of this issue.

  • Composition with React children

    React gives you the ability to compose UI via its children prop. You'll learn why it's useful and how to use it.

  • Default Props

    React allows you to pass data to components via props. Sometimes, you want to set default values for specific props if they're not passed into the component. You'll learn how to do that using defaultProps.

  • Higher-order Components

    React lets you reuse visual logic via the component API. However, sometimes you want to reuse stateful, non-visual logic. You'll learn the most common pattern for accomplishing this - higher-order components.

  • React Render Props

    Higher-order components allow you to reuse stateful logic but the API is a little weird. You'll learn another pattern for accomplishing this same thing - render props.

  • React Context

    Often you need to pass data deep through your component tree. One way to avoid passing data down through every component is React Context. You'll learn the API as well as when you should and shouldn't use it.

  • React Router

    Any non-trivial application will need a router. You'll learn the theory and API behind the most popular Router in the React ecosystem, React Router.

  • Class Fields

    Class Fields are a recent addition to the JavaScript language and allow you to add instance properties directly as a property on the class. You'll learn why they're useful and what they mean for your React code.

  • Building React Apps for Production

    By default, React comes in development mode. You'll learn how to change to it to production mode as well as other steps you need to take to prepare your React app for production.

  • Deployment and Hosting

    What's the use of building an app if you don't deploy it live? In the last section of the course, you'll learn to take the app you built and deploy it so others can enjoy it from anywhere.

Who is this course for?

  • Mid to Sr level developers who are new to JavaScript but want to learn React as quickly as possible.
  • Students who feel their Bootcamp/University isn't teaching them React effectively enough.
  • Recent Bootcamp or University graduates who are confident in the fundamentals of JavaScript and want to become more employable by learning React.
  • Angular or Vue developers who want to learn React.
  • Developers who are frustrated with the disjointed approach to learning React and want a linear, project-based path.
  • jQuery or Backbone developers who want to learn a more declarative, component-based approach to building UIs.
  • Native mobile developers who want to learn React so they can learn React Native.
  • Front-end developers wanting to modernize their skill set in order to get a raise or apply for another job.
Sign Up

Course Outline

  • Course Overview

    Introduction, Philosophy, and Tips
    Project (What you'll build)
    State of React
  • React Overview

    Why React?
    The React Ecosystem
    (Bonus) Imperative vs Declarative Programming
    (Bonus) Composition vs Inheritance
  • 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
  • Passing Data to Components

    Introduction to Props
    (Quiz) Props
    (Practice) Props
    (Solution) Props
  • Rendering Lists

    Rendering Lists in React
    (Quiz) Lists
    (Practice) Lists
    (Solution) Lists
    (Project) Popular Navar
  • 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
  • Functional Components

    Pure Functions
    (Quiz) Pure Functions
    (Project) Language Nav
  • Validating Props with PropTypes

    PropTypes
    (Practice) PropTypes
    (Solution) PropTypes
    (Project) Language Nav PropTypes
  • The Component Lifecycle

    The React Component Lifecycle
    (Quiz) The Component Lifecycle
    (Project) Fetch Repos
    (Project) Caching Repos
    React Icons
    (Project) Repos Grid
  • 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
  • Composition with React children

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

    Default Props
    (Project) Loading Component
  • Intermission

    Check in
  • 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
  • Bypassing Props with React Context

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

    Introduction to React Router
    (Project) Adding Routes
    (Project) Navbar
    React Router Query Strings
    (Project) Query Strings
    404 with React Router
    (Project) 404
  • Better Classes with Class Fields

    Class Fields
    (Quiz) Class Fields
    (Project) Migrating to Class Fields
  • Production Builds and Hosting

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

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