React

Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

COURSES 28

WATCH Kent C. Dodds's COURSE

The Beginner's Guide to ReactJS

The Beginner's Guide to ReactJS

This course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React f...

19 lessons

WATCH Thomas Greco's COURSE

Build a Server-rendered ReactJS Application with Next.js

Build a Server-rendered ReactJS Application with Next.js

In this course we we’ll see just how quickly next.js makes the process of building server-rendered ReactJS applications by crea...

10 lessons

WATCH Dan Abramov's COURSE

Getting Started with Redux

Getting Started with Redux

In this comprehensive tutorial, Dan Abramov - the creator of Redux - will teach you how to manage state in your React applicati...

30 lessons

WATCH Kent C. Dodds's COURSE

Advanced React Component Patterns

Advanced React Component Patterns

The goal of this course is to give you the knowledge of advanced patterns you can use to make React components that are more fl...

19 lessons

WATCH Tyler Clark's COURSE

Async React with Redux Saga

Async React with Redux Saga

In this course we are going to take an empty React and Redux application and add Redux Saga side effects. We’ll begin by instal...

7 lessons

WATCH Nik Graf's COURSE

Leverage New Features of React 16

Leverage New Features of React 16

React 16 comes with some powerful new features, in this course we'll be exploring each of them. Each lesson is going to go over...

6 lessons

WATCH Michel Weststrate's COURSE

Manage Application State with Mobx-state-tree

Manage Application State with Mobx-state-tree

In this course, Michel Westrate - Creator of Mobx - will teach us how to model application state after your problem domain with...

17 lessons

WATCH Joe Maddalone's COURSE

Add routing to React apps using React Router v4

Add routing to React apps using React Router v4

React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the c...

14 lessons

WATCH John Lindquist's COURSE

Build React Components from Streams with RxJS and Recompose

Build React Components from Streams with RxJS and Recompose

Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your a...

11 lessons

WATCH Andrew Van Slaars's COURSE

Build A React App With Redux

Build A React App With Redux

Managing state in modern web applications is hard. As applications grows in complexity, keeping track of state changes and mapp...

26 lessons

WATCH Tim Kindberg's COURSE

Build a Server Rendered + Code Split App in React with React Universal Component

Build a Server Rendered + Code Split App in React with React Universal Component

In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement—we need ...

13 lessons

WATCH Shane Osbourne's COURSE

Up and Running with redux-observable

Up and Running with redux-observable

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’...

13 lessons

WATCH Jason Brown's COURSE

Fundamentals of React Native Video

Fundamentals of React Native Video

React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also wor...

8 lessons

WATCH Dan Abramov's COURSE

Building React Applications with Idiomatic Redux

Building React Applications with Idiomatic Redux

This course will pick up where we left off with the Redux Fundamentals course. If you haven't watched that yet, you are highly ...

27 lessons

WATCH Damon Bauer's COURSE

Add Internationalization (i18n) to a React app using React Intl

Add Internationalization (i18n) to a React app using React Intl

In this course, we will incorporate react-intl into a project created with create-react-app and react-router. The react-intl li...

11 lessons

WATCH Tim Kindberg's COURSE

Higher Order Components with Functional Patterns Using Recompose

Higher Order Components with Functional Patterns Using Recompose

In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by codi...

15 lessons

WATCH Nik Graf's COURSE

Build Virtual Reality Experiences Using React VR

Build Virtual Reality Experiences Using React VR

In this course we will explore the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific con...

10 lessons

WATCH Shane Osbourne's COURSE

Up and running with Preact

Up and running with Preact

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’...

12 lessons

WATCH Jason Brown's COURSE

Real World React Native Animations

Real World React Native Animations

In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. W...

10 lessons

WATCH Andrew Van Slaars's COURSE

Build Your First Production Quality React App

Build Your First Production Quality React App

With the variety of choice we have in building modern web applications using JavaScript, it can make it difficult to understand...

24 lessons

WATCH Michel Weststrate's COURSE

Manage Complex State in React Apps with MobX

Manage Complex State in React Apps with MobX

MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner. Usin...

9 lessons

WATCH Jason Brown's COURSE

Build a React Native Todo Application

Build a React Native Todo Application

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about u...

13 lessons

WATCH Jason Brown's COURSE

Animate React Native UI Elements

Animate React Native UI Elements

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like...

9 lessons

WATCH Joe Maddalone's COURSE

Getting Started with React Router v3

Getting Started with React Router v3

React Router is the defacto router for any React application and it allows us to extract the state of our application from the ...

11 lessons

WATCH Trevor Miller's COURSE

React Testing Cookbook

React Testing Cookbook

The definition of "legacy code" can be described simply as "code that doesn't have tests." Code you just wrote, 5 minutes ago? ...

13 lessons

WATCH Joe Maddalone's COURSE

React: Flux Architecture (ES6)

React: Flux Architecture (ES6)

As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage ...

10 lessons

WATCH Tyler McGinnis's COURSE

React Native Fundamentals

React Native Fundamentals

If you're a web developer who has been itching to get into native development, now is your chance. In this series we'll be talk...

17 lessons

WATCH Joe Maddalone's COURSE

Start Learning React

Start Learning React

React is a "javascript library for building user interfaces" from the fine folks at Facebook & Instagram. It strictly focus...

21 lessons

Understand the Touchables in React Native

In this lesson, we will learn how to create our own buttons using the 3 Touchable components that are available on the iOS and Android platforms. We will build a button with each component and lear...

Dana White
4:26

Write CSS in JS with glamorous

There are a few things you may be used to doing in CSS that you’ll need to learn how to accomplish using CSS in JS (in particular with glamor and glamorous). In this lesson we’ll go through a few e...

Kent C. Dodds
8:16

Use glamorous with existing CSS

Glamorous works great with whatever CSS framework you’re currently using. In this lesson we’ll see how to make glamorous integrate with your existing CSS solution so you can migrate overtime.

Kent C. Dodds
5:09

Install glamorous to start styling React components

In this lesson we’ll learn about the things you need installed and setup to start writing React components with glamorous.

Kent C. Dodds
1:43

Process Images in React with react-imgpro

In this lesson, we will cover a popular image processing component in the react eco-system for image processing. The Library is react-imgpro. Installation: npm install --save react-imgpro Inc...

Akash Gutha
3:41

Compose Redux Higher Order Reducers

In Understand Redux Higher Order Reducers, I've explained to you how higher order reducers can reduce the amount of reducer logic by reusing it. You can even use multiple higher order reducers, but...

Alex Jover Morales
4:34

Understand Redux Higher Order Reducers

Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps...

Alex Jover Morales
3:44

Render Markdown using React with React-Remarkable

We will use the React-Remarkable library to render markdown onto our React DOM. This library uses the Remarkable library to render markdown. Installation Guide npm install --save react-remarkable...

Akash Gutha
1:31

Remove React PropTypes by using Flow Annotations (in CRA)

Starting from v15.5 if we wanted to use React's PropTypes we had to change our code to use a separate node module, now we can go one step further and get rid of that extra dependency just by using ...

Flavio Corpa
2:37

Update React Component State Based on External DOM Events

Most of the time, your components respond to events that occur within the component tree by defining their own handler or by accepting a handler defined by a parent component via props. Sometimes, ...

Andrew Van Slaars
5:09

Style a React component with styled-components

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full p...

Simon Vrachliotis
3:04

Create Animated Map Markers Linked to Scrolling Content in React Native

We'll construct a map using react-native-maps and custom animated map makers. We'll build a scroll view that when scrolled horizontally it will animate the marker that it is associated with. Once a...

Jason Brown
12:15

FEATURED REACT PLAYLISTS

Browse all React lessons.

showing All 440 lessons...

Implement Synchronous Side Effects with Blocking Saga Effects

P

Run Sagas Concurrently with Saga Helpers

P

Implement Asynchronous Side Effects with Non-Blocking Saga Effects

P

Handle Side Effects with Redux Saga Generator Functions

Control when Saga Generators are Called with TakeLatest

Remove Model Instances from the Tree

Stream a React Component from an Ajax Request with RxJS

P

Stream Props to Multiple Children with React's Children.map and RxJS

P

Merge RxJS Button Event Streams to Build a React Counter Component

P

Create Stream Behaviors to Push Props in React Components with mapPropsStream

P

Make Reusable React Props Streams with Lenses

P

Stream Props to React Children with RxJS

P

Handle React Events as Streams with RxJS and Recompose

P

Pass a React Prop to a Stream in RxJS

Configure Recompose to Build React Components from RxJS Streams

Load a Universal React Named Exported Component with the Key Option

P

Add Redux with Server-to-Client State Hydration to a React Universal Project

P

Configure a Custom Universal React Loading Component

P

Publish a React component with TypeScript

P

Create stateful React Components using TypeScript

P

Bootstrap a TypeScript + React project

Create stateless React components using TypeScript

P

Understand the Touchables in React Native

P

Include Links to Next and Previous Gatsby Blog Posts

P

Add a Tags Page and Display All Tags in a Gatsby.js Blog

P

Dynamically Generate Gatsby Blog Posts by Path

P

Create a Blog Post Template for Gatsby

P

Use GraphQL in Gatbsy to Create an Index of all Posts

P

Use Redux with Render Props

P

Rerender Descendants Through shouldComponentUpdate

P

Implement a Higher Order Component with Render Props

P

Implement a React Context Provider

P

Make Controlled React Components with Control Props

P

Use Component State Initializers

P

Use Prop Collections with Render Props

P

Improve Unit Testability of Higher Order Components

P

Handle prop namespace clashes with Higher Order Components

P

Use Prop Getters with Render Props

P

Improve debuggability of Higher Order Components

P

Use Render Props with React

P

Handle static properties properly with Higher Order Components

P

Handle ref props with Higher Order Components

P

Build a Toggle Component

Make Enhanced React Components with Higher Order Components

P

Make Compound React Components Flexible

P

Write Compound Components

P

Rerender a React Application

Controlling Form Values with React

Use Class Components with React

Build and deploy a React Application

redux tutorial about Implement Synchronous Side Effects with Blocking Saga Effects

Implement Synchronous Side Effects with Blocking Saga Effects

4:39 redux PRO

When some side effects depend on the return of other side effects, we need to stop or block the iteration through our sagas until these resolve. We control this stop and go pattern with blocking effects, such as call and take.

redux tutorial about Run Sagas Concurrently with Saga Helpers

Run Sagas Concurrently with Saga Helpers

3:20 redux PRO

Most applications require multiple side effects. So in this lesson, we’ll modify our TakeLatest to accept more than one saga, as well as add another saga helper called TakeEvery.

redux tutorial about Implement Asynchronous Side Effects with Non-Blocking Saga Effects

Implement Asynchronous Side Effects with Non-Blocking Saga Effects

3:27 redux PRO

When we need to run side effects and do not care about a return value, we should use non-blocking effects. This way we can iterate through our sagas as efficiently as possible. Some popular non-blocking effects are put and fork.

redux tutorial about Handle Side Effects with Redux Saga Generator Functions

Handle Side Effects with Redux Saga Generator Functions

3:17 redux

In this lesson we’ll fetch the star wars api and display the response to our UI. Saga effects and generators allow us to synchronously run asynchronous tasks.

redux tutorial about Control when Saga Generators are Called with TakeLatest

Control when Saga Generators are Called with TakeLatest

2:50 redux

We’ll dive into takeLatest, a saga helper that gives us the ability to control when our saga generator functions are called. We’ll then wire up takeLatest with our saga middleware and add it to the store.

react tutorial about Remove Model Instances from the Tree

Remove Model Instances from the Tree

2:27 react

In this lesson we will dive a bit more into the tree semantics of MST.

In this lesson you will learn:
* Actions can only modify their own subtree
* The use of getParent to find the parent of a model instance
* Using destroy to remove an instance entirely from the tree

react tutorial about Stream a React Component from an Ajax Request with RxJS

Stream a React Component from an Ajax Request with RxJS

2:27 react PRO

Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax response and pass it along the stream to use as props in a React Component.

react tutorial about Stream Props to Multiple Children with React's Children.map  and RxJS

Stream Props to Multiple Children with React's Children.map and RxJS

1:06 react PRO

Mapping the props to multiple children involves the use of React’s Children.map so that you can map over each child Component provided to the Parent Component stream. Inside the mapping function, you use the cloneElement and pass the props manually as you would with a single child component.

react tutorial about Merge RxJS Button Event Streams to Build a React Counter Component

Merge RxJS Button Event Streams to Build a React Counter Component

1:40 react PRO

Combining input streams then using scan to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component.

react tutorial about Create Stream Behaviors to Push Props in React Components with mapPropsStream

Create Stream Behaviors to Push Props in React Components with mapPropsStream

1:11 react PRO

Rather than using Components to push streams into other Components, mapPropsStream allows you to create functions that can wrap components to create shareable behaviors across components.

react tutorial about Make Reusable React Props Streams with Lenses

Make Reusable React Props Streams with Lenses

2:47 react PRO

If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that stream with any other components. Configuring your props stream with lenses will allow you to reuse your stream with any React component.

react tutorial about Stream Props to React Children with RxJS

Stream Props to React Children with RxJS

0:53 react PRO

You can decouple the parent stream Component from the mapped React Component by using props.children instead. This process involves mapping the stream to React’s cloneElement with the children then passing the props in manually.

react tutorial about Handle React Events as Streams with RxJS and Recompose

Handle React Events as Streams with RxJS and Recompose

2:25 react PRO

Events are the beginning of most every stream. Recompose provides a createEventHandler function to help your create handler and stream pairs. Once the handler/stream pairs are created, it’s simply a matter of passing the handlers down the stream as props and combining the streams any way you want.

react tutorial about Pass a React Prop to a Stream in RxJS

Pass a React Prop to a Stream in RxJS

2:46 react

When you declare your Component and Props in JSX, you can pass those props along to your 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.

react tutorial about Configure Recompose to Build React Components from RxJS Streams

Configure Recompose to Build React Components from RxJS Streams

1:32 react

Recompose provides helper functions to stream props using an Observable library of your choice into React. This lesson shows you how to configure Recompose to use RxJS then create a Streaming Component with Recompose’s componentFromStream helper function.

react tutorial about Load a Universal React Named Exported Component with the Key Option

Load a Universal React Named Exported Component with the Key Option

1:38 react PRO

It’s not uncommon to export a component as a named export as opposed to a default export. The key option in the universal higher-order component allows you to select which named export in the module that you’d like to load.

react tutorial about Add Redux with Server-to-Client State Hydration to a React Universal Project

Add Redux with Server-to-Client State Hydration to a React Universal Project

6:08 react PRO

We will add redux to our project and get redux working on the client and server. The redux state will be passed along with our server-side rendered page in a global window variable; from there, we’ll hydrate the state on the client.

react tutorial about Configure a Custom Universal React Loading Component

Configure a Custom Universal React Loading Component

2:37 react PRO

We’ll go through the options related to loading. You have the ability to specify a custom loading component instead of the default Loading… component that react-universal-component will show for you. You can also set a minimum delay if you’d like the loading component to always show for some time—sometimes a quickly blinking loading component can appear unpolished.

react tutorial about Publish a React component with TypeScript

Publish a React component with TypeScript

3:30 react PRO

In this lesson we look at how to create a React Component package using TypeScript.

Creating a React Package is very similar to creating any other TypeScript Node package and we demonstrate that here.

react tutorial about Create stateful React Components using TypeScript

Create stateful React Components using TypeScript

2:48 react PRO

You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State.

This lessons shows these generic parameters and React.Component in action.

react tutorial about Bootstrap a TypeScript + React project

Bootstrap a TypeScript + React project

4:26 react

Learn how to setup a TypeScript + React project from scratch. Understand the reason behind every line involved in the configuration allowing you to customize it at will in the future.

react tutorial about Create stateless React components using TypeScript

Create stateless React components using TypeScript

1:37 react PRO

You can create a stateless React component in TypeScript as easily as creating a function.

But if you want to create high quality idiomatic React + TypeScript components we cover some improved patterns in this lesson.

react-native tutorial about Understand the Touchables in React Native

Understand the Touchables in React Native

4:26 react-native PRO

In this lesson, we will learn how to create our own buttons using the 3 Touchable components that are available on the iOS and Android platforms. We will build a button with each component and learn which component is best based on the feedback that we need to provide to the user.

gatsby tutorial about Include Links to Next and Previous Gatsby Blog Posts

Include Links to Next and Previous Gatsby Blog Posts

1:22 gatsby PRO

Gatsby’s createPage action allows for additional data to be passed in via context. In this lesson, we will add a processing step to include links between posts, and update our templates to conditionally display them as appropriate.

gatsby tutorial about Add a Tags Page and Display All Tags in a Gatsby.js Blog

Add a Tags Page and Display All Tags in a Gatsby.js Blog

2:50 gatsby PRO

In this lesson, we’ll use GraphQL to query for tags on each of our posts then dynamically create page URLs that display links to all the posts that match each tag. The tags index page and tag pages will be dynamically created in a function we will define using the page templates we have built and Gatsby's createPage API.

gatsby tutorial about Dynamically Generate Gatsby Blog Posts by Path

Dynamically Generate Gatsby Blog Posts by Path

1:19 gatsby PRO

Gatsby includes several Node APIs for building sites. In this lesson, we’ll use the createPages API to dynamically build a page for each of our posts, using the URL path in the frontmatter of each Markdown doc.

gatsby tutorial about Create a Blog Post Template for Gatsby

Create a Blog Post Template for Gatsby

1:26 gatsby PRO

In order to display the generated HTML from a Markdown post, we will build a GraphQL query and pass its data into a Template component that makes use of React’s dangerouslySetInnerHTML DOM element.

gatsby tutorial about Use GraphQL in Gatbsy to Create an Index of all Posts

Use GraphQL in Gatbsy to Create an Index of all Posts

1:36 gatsby PRO

In this lesson, we’ll use GraphQL to query for transformed Markdown blog posts and display links to each on your blog’s homepage.

react tutorial about Use Redux with Render Props

Use Redux with Render Props

6:49 react PRO

Now that we have everything wired up to share and update the state of the toggled boolean across our application, let's see how easy it would be to change from the state of a single boolean to state in a redux store! We’ll call it rendex (render props + redux). 😍

react tutorial about Rerender Descendants Through shouldComponentUpdate

Rerender Descendants Through shouldComponentUpdate

3:19 react PRO

One problem with using context is that any component in the hierarchy could return true from shouldComponentUpdate without knowing that state in context has changed. In this lesson, we’ll look at how the react-broadcast library can be used to avoid that problem.

react tutorial about Implement a Higher Order Component with Render Props

Implement a Higher Order Component with Render Props

1:52 react PRO

When making a reusable component, you'll find that people often like to have the API they're most familiar with, so in this lesson we'll recreate the withToggle Higher Order Component using our new ConnectedToggle render prop component.

react tutorial about Implement a React Context Provider

Implement a React Context Provider

6:47 react PRO

If you have state that needs to exist throughout your application, then you may find yourself passing props all over the application and even "drilling" the prop through components that don't really care about the prop at all. In this lesson, we'll see a sample of a small app that has the "prop drilling problem" and learn how to implement the "Provider pattern" to access context state anywhere in the component tree.

react tutorial about Make Controlled React Components with Control Props

Make Controlled React Components with Control Props

4:06 react PRO

Sometimes users of your component want to have more control over what the internal state is. In this lesson we'll learn how to allow users to control some of our component’s state just like the <input />'s value prop.

react tutorial about Use Component State Initializers

Use Component State Initializers

2:46 react PRO

In this lesson, we'll allow users to initialize our component's state with their own defaults and support a reset functionality to reset to the initial state.

react tutorial about Use Prop Collections with Render Props

Use Prop Collections with Render Props

2:05 react PRO

Sometimes you have common use cases that require common props to be applied to certain elements. You can collect these props into an object for users to simply apply to their elements and we'll see how to do that in this lesson.

react tutorial about Improve Unit Testability of Higher Order Components

Improve Unit Testability of Higher Order Components

2:45 react PRO

Let’s make it a little easier to test components which have been wrapped by our Higher Order Component by exposing the underlying component. Inside of our Higher Order Component, we will assign a WrappedComponent property to our Component that we passed in.

react tutorial about Handle prop namespace clashes with Higher Order Components

Handle prop namespace clashes with Higher Order Components

3:47 react PRO

One problem Higher Order Components face is they share the props namespace with the other props the user wants to pass to that component. In this lesson, we’ll take a look at how we can resolve these naming conflicts.

react tutorial about Use Prop Getters with Render Props

Use Prop Getters with Render Props

6:12 react PRO

When you're using prop collections, sometimes you can run into trouble with exposing implementation details of your prop collections. In this lesson, we'll see how we can abstract that away by simply creating a function called a prop getter that will compose the user's props with our prop collection.

react tutorial about Improve debuggability of Higher Order Components

Improve debuggability of Higher Order Components

4:43 react PRO

React DevTools and React's built-in development warnings rely on the displayName and name property of your react components to give you a good developer experience. Unfortunately, Higher Order Components make it harder for React to give that good experience. In this lesson, we’ll learn about the displayName property and how that impacts React Developer Tools. Then we'll improve the displayName for our Higher Order Component by changing where we call the withToggle Higher Order Component.

react tutorial about Use Render Props with React

Use Render Props with React

5:25 react PRO

In this lesson, we'll take a step back and reexamine the problem by doing a few tiny refactorings to arrive at a new pattern called render props. render props is just a function that you pass to a component that renders jsx. This pattern gives us the ability to use Reacts lifecycle methods where as with Higher Order Components, you could not. We'll see that it allows us to avoid using APIs like context and all of the issues we had to deal with when using Higher Order Components.

react tutorial about Handle static properties properly with Higher Order Components

Handle static properties properly with Higher Order Components

3:02 react PRO

One of the goals of reusable components is that the implementation details are unobservable. You want to make things work the way people think they should work without them having to consider the implementation. In this lesson we'll see a confusing observable behavior of using Higher Order Components and use the hoist-non-react-statics library to avoid the problem.

react tutorial about Handle ref props with Higher Order Components

Handle ref props with Higher Order Components

2:54 react PRO

When you wrap a component with a Higher Order Component, it becomes impossible to forward the ref prop down the component tree due to the special nature of the ref prop in React. In this lesson, we’ll see that problem in action with our Higher Order Component. We will pass the ref as an innerRef prop so that the Higher Order Component can re-assign the ref to the component that it is wrapping.

react tutorial about Build a Toggle Component

Build a Toggle Component

2:01 react

In this lesson, we’ll write a simple toggle component which will serve as the foundation for the rest of the course. Kent walks through how to create a simple toggle with React setState. He shows us how to extend the functionality of the toggle by safely adding an onToggle prop that gets called after state is updated. It is important to define default props when you are calling a method from props.

react tutorial about Make Enhanced React Components with Higher Order Components

Make Enhanced React Components with Higher Order Components

3:22 react PRO

The state shared between our toggle components is implicit because it lives inside context and is not easily accessible. In this lesson, we'll make a Higher Order Component (HOC) factory function which will allow the user to access that implicit state in their own components. Higher Order Components take a component and render a new component with some enhanced behaviors, in this case, the toggle context is added to the returned component. This factory component can get rid of duplicated code caused by needing to declare contextTypes on each component that needs it. Now we can wrap the component with withToggle and destructure on and toggle from the props.

react tutorial about Make Compound React Components Flexible

Make Compound React Components Flexible

4:01 react PRO

Our current compound component implementation is great, but it's limited in that users cannot render the structure they need. Let's allow the user to have more flexibility by using React context to share the implicit state to our child <Toggle/> components. We will walk through safely defining childContextTypes, providing the value with getChildContext, and, on each of the components that need that context, we define contextTypes so that React will pass the context that is being asked for.

react tutorial about Write Compound Components

Write Compound Components

4:06 react PRO

Compound component gives more rendering control to the user. The functionality of the component stays intact while how it looks and the order of the children can be changed at will. We get this functionality by using the special React.Children.map function to map over the children given to our <Toggle/> component. We map over the children to pass the on state as a prop to its children. We move the visual pieces of the component out into function components and add them as static properties to <Toggle/>.

react tutorial about Rerender a React Application

Rerender a React Application

3:17 react

In this lesson, we'll learn how we can call ReactDOM.render repeatedly with brand new React Elements and React will preserve element focus and only do the minimal required DOM operations for the re-render.

react tutorial about Controlling Form Values with React

Controlling Form Values with React

8:48 react

In this lesson we'll talk about controlling the value for inputs, textareas, and select elements. We'll see how to manage the state ourselves while still allowing the user to update the values themselves.

react tutorial about Use Class Components with React

Use Class Components with React

4:16 react

In this lesson we'll look at a few ways to deal with issues around this when writing class components with React. We'll eventually land at Public Class Fields syntax which is a stage 3 proposal in the ECMAScript standardization process.

react tutorial about Build and deploy a React Application

Build and deploy a React Application

3:02 react

In this lesson we'll see how simple it is to prototype a React application right in your browser using CodeSandbox.io, then to download that application locally and use the react-scripts which are setup automatically to develop and build the application for production. We'll wrap up by deploying the application to Netlify (using a free account) for the world to see.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?