Can't tell which parts of the code are React, and which are JavaScript? Before you can work effectively with modern frameworks like React, you've gotta understand the language it's based on (or at least things will go much more smoothly if you do!). In this module you'll learn the essential syntax of modern JavaScript that's necessary to work with React.

We'll cover arrow functions and how they differ from regular functions, statements vs. expressions (which will come in handy when you start working with React's JSX syntax), and the ...rest and ...spread operators (two names for three dots that look the same). Then we'll get into immutability and why it matters (super important to understand for avoiding weird bugs in your apps). You'll learn how to use the map, filter, and reduce functions — those three paragons of functional programing — with a special focus on making sure you truly (finally!) understand the `reduce` function. And we'll close out by learning how to import and export modules.

Write Concise Functions with ES6 Arrows and Implicit Returns

Understand How `this` Works in Regular Functions and Arrow Functions

Use let and const for Block-Scoped Variables

Understand the Difference Between Statements and Expressions

Use ES6 Template Strings to Interpolate Values

Use the Rest and Spread Operators on Arrays and Objects

Use Destructuring to Pick Apart Arrays and Objects

Understand Mutable vs. Immutable Operations in JavaScript

Find Elements in JavaScript Arrays with find and findIndex

Remove Array Items with Slice and Splice

Add Items to an Array with Concat and the Spread Operator

Modify Elements in an Array with Map

Remove Elements from an Array with Filter

Use the Reduce Function on Arrays

Use Import and Export On JS Files and Modules

Understand how Babel Transforms Modern JS into Older JS

Modern JavaScript Essentials for React

Welcome to React! In this module you'll write your first React app, and learn how to build apps using React's JSX syntax. We're intentionally starting simple, with hard-coded data and no "state" to worry about. After working through these lessons you'll understand enough of React's fundamental concepts to be able to build static apps, just as you would with plain HTML.

Write Your First React App: Hello World!

How JSX Compiles to Plain JavaScript

Differences Between JSX and HTML

Sketch Before Building: a "Tweet" Component

Build a Tweet Component with Hardcoded Data

Make Components Dynamic with Props

Split up a React App into Component Files

Sketch Before Building: the GitHub File List

Build the GitHub File List app

Use React Children to render dynamic content

The "Slots" Pattern for Passing Multiple Children to a Component

Validate data with PropTypes

Deploy an app to Surge and Now.sh

Easing into React: An Introduction

Until this point, the components we've built have all been stateless and pretty much static. In this module, you'll learn how to write `class` components in React to handle state, which will allow us to create interactive components.

Up until React 16.8, classes were the only way to add state to components. Today, we have Hooks that allow us to add state to function components without writing a class. So you might wonder, why learn classes at all?

The reality is that there is a mountain of React code that existed before Hooks, and plenty of companies aren't fond of rewriting code that already works. Having a full understanding of class components will give you an advantage when it comes to finding a React job, and it'll also help when looking for answers on StackOverflow and the like.

Use React State to Make Components Interactive

Run Code After setState with a Callback

Write a React Component Without the Constructor

setState Uses "Shallow Merge" to Update State

The Consequences of Mutating State

Store the Value of Form Input in State

Use a Ref to Refer to an Uncontrolled Input

Sketch Before Building: Shopper App

Build the Shopper's Item Page

Add Items to the Cart

Build the Shopper's Cart Page

Display Cart Items and a Total

Build a Checkout Form

Phases of the Component Lifecycle

Mounting, Updating, and Unmounting

Optimize a React Component with shouldComponentUpdate

Automatically Scroll a Chat Box with getSnapshotBeforeUpdate

Update State Based On Props with getDerivedStateFromProps

Use Error Boundaries to Catch and Recover from Errors

Classic React with Class Components

React version 16.8 added Hooks, a set of functions that allow you to add state and side effects to function components. In this module you'll learn how to use Hooks in your components! Starting with `useState`, we'll cover how to add simple and complex state to your functions. From there we'll look at using `useReducer` to handle more complex state. You'll learn how to write reusable custom hooks, too. And we'll talk about how hooks work behind the scenes to demystify the "magic". Finally we'll look at `useEffect` and learn how to "think in effects" by converting a few class components to functions with hooks, and learn how to use the `useMemo` and `useCallback` hooks to optimize your components.

Basic

Instructor

Course content (65 lessons)

Instructor