React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Learn React

Learn how to use container’s own props inside the mapStateToProps() and mapDispatchToProps() functions.

Redux: Generating Containers with connect() from React Redux (FooterLink)

Learn how to keep code maintainable and self-documenting by extracting action creators from the components.

Redux: Extracting Action Creators

How is Redux different from Backbone or Flux? Learn the first principle of Redux—the single immutable state tree.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Redux: The Single Immutable State Tree

When you declare your Component and Props in JSX, you can pass those props along to your [RxJS](/q/rxjs) stream. This is typically done using `switchMap` or `combineLatest` where you can grab from the props from your `props$` stream and push them into another stream.

Pass a React Prop to a Stream in RxJS

Since MST offers a runtime type system, it can create and compose types on the fly, making it possible to reuse logic in new and powerful ways.

In this lesson you will learn:
* That MST types are immutable and composed together behind the scenes
* How to compose types explicitly by using `types.compose`
* How to create dynamic, parameterized types by leveraging that MST types are first class javascript citizens

Create Dynamic Types and use Type Composition to Extract Common Functionality

We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests that run before we deploy a new version of the app. But if our tests aren't doing exactly what the user will do, then how do we really know that things will work when users interact with our apps?

Let's rethink what it means to ship applications with confidence and what it takes to get there. With improved tools and practices, we can be more certain that what we're shipping to our users will work the way it's intended. 

Additional resources: [Slides](http://kcd.im/confident-react), [react-testing-library](https://github.com/kentcdodds/react-testing-library), [Jest](https://facebook.github.io/jest/), [jsdom](https://github.com/jsdom/jsdom), [jest-dom](https://github.com/gnapse/jest-dom)

Confidently Ship Production React Apps

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

**NOTE:** React Suspense for data fetching is VERY ALPHA and this API is undocumented, unsupported, and will likely change.

Our `Counter` component has grown in complexity and we need to figure out how to get it tested. In this lesson, we'll learn how to test the effects that are generated with `useEffect`.
 
**We'll cover:**
- How React schedules callbacks after the component renders
- Keeping our tests isolated with `afterEach`



Test Effects Generated from React the useEffect Hook

Re-submitting the form before the previous submit action has finished can lead to all sorts of bugs.

In this lesson we are going to see how we can ensure that users won't be able to resubmit the form before the first submit action has resolved by using `submitting` property from React Final Form render prop.

Avoid Submitting a Form Twice with React Final Form 'submitting' property

React allows us to create web, native and... VR applications with [React 360](https://facebook.github.io/react-360/)

In this lesson we are going to learn how to start a Virtual Reality project with React 360 (previously known as React VR) and start making first changes to a "hello world" VR React application.

Start a Virtual Reality project with React 360

Class components can bail out from rendering when their input props are the same using `PureComponent` or `shouldComponentUpdate`. Since React 16.6 you can do the same with function components by wrapping them in [React.memo](https://reactjs.org/docs/react-api.html#reactmemo).

Use React.memo to avoid unnecessary re-renders in React functional components

Most React developers knows the pain of refactoring a functional component only because we would like to add a state to it.

In this lesson we are going to learn a new way of handling that - React 16.7 alpha introduces a concept of hooks, which allow us to well... hook into existing React features (such as state) from inside of a functional component. By using a `useState` hook we introduce state to a `Counter` component without introducing a class.

Add state to functional React component with useState hook without introducing a class

In this lesson we are going to learn how to use `useEffect` hook from React 16.7 to be able to create a custom hook which allows us to see how often the component mounts and unmounts. 

Later, we can reuse it in other components and improve app performance by diving deep into how many times our components are mounted and/or unmounted. 

Use React useEffect hook to see how many times component mounts and unmounts

Forms in React are not easy. They are verbose and several lines of code. However, forms with Formik are much simpler. Formik maintains the state of inputs and simplifies the form so you can work quicker!

Simplify and Convert a Traditional React Form to Formik

TypeScript and React go very well together, but it does require a little bit of configure on the TypeScript side due to the nature of JSX. The compiler option for JSX just needs to be set to "react" in the tsconfig.json and you're on your way.

Configure TypeScript for React and JSX

As an alternate to useState, you could also use the useReducer hook that provides state and a dispatch method for triggering actions. In this lesson, we’ll centralize logic that is spread across a web application and centralize it using the useReducer hook.


Use the useReducer Hook and Dispatch Actions to Update State 

React changed their Context API in version 16.3 to include Provider and Consumer components. Inside of a Function Component you can leverage the useContext hook to wire-up a consumer instead of using the Render Props Consumer component.


Use the useContext Hook to Wire-up the React Context API 

Historically, only Class Components could extend PureComponent or implement their own shouldComponentUpdate method to control when it's render was actually invoked. However, now you can use React.memo HOC to provide this same type of control with Function Components. This isn't specific to Hooks, but was released in React 16.6 and complements the hooks API.


Simulate PureComponent with a React Function Component

Certain calculations or operations can take a long time. React provides a useMemo hook that will return cached results from previous calculations, which can dramatically speed up render time.

Leverage the React useMemo Hook for Expensive Operations

Render Props is a popular pattern in React, but sometimes the nesting of Components can get quite deep. Thankfully, React Hooks can help provide an alternate way to structure your code for reuse. In this lesson, we will take an existing Render Props Component and convert it to use a hooks instead.

Convert a Render Props Component using a Custom React Hook

In this course we start by getting your environment setup for hooks and then we’ll introduce the idea of adding state to a function component and unpacking several ways to interact with that state.

There are a few rules that you need to follow when you start using hooks, but thankfully there's a custom ESLint plugin that’ll help enforce these rules. I’ll show how to setup the hooks plugin and talk about some of the rules that should be followed.

Things get more interesting and involved once we introduce side-effects to our function component with the useEffect hook. We’ll uncover numerous things to consider while using this particular hook.

One of the cool features of hooks is that it’s easy to abstract out code for reuse with custom hooks. The React community has already created lots of custom hooks that you can start playing with today.

Once I've introduced the main concepts of useState and useEffect, I'll start to unpack other hooks such as useRef, useReducer, useContext, useMemo, and useCallback.

Topics

Instructors

Content Type