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 14

WATCH Joe Maddalone's COURSE

Start Using React to Build Web Applications

Start Using React to Build Web Applications

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

21 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 Dan Abramov's COURSE

Getting Started with Redux

Getting Started with Redux

I had no idea why I'd want to use Redux when I started this course. This course really made it easy to understand the how &...

30 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 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 Joe Maddalone's COURSE

Getting Started with React Router

Getting Started with React Router

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 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 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 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

Build Your First React.js App

Build Your First React.js App

Let's start from scratch and build a full React application! Building your first React application can be challenging. React i...

17 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

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 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

Update State in React with Ramda's Evolve

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater func...

Andrew Van Slaars
4:29

Update Component State in React With Ramda Lenses

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing...

Andrew Van Slaars
4:37

Use create-react-native-app to Set Up a Simple React Native App

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globa...

Bram Borggreve
0:55

Writing Platform-Specific Components for iOS and Android in React Native

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the pl...

Bonnie Eisenman
5:28

Installing and Linking Modules with Native Code in React Native

Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video co...

Bonnie Eisenman
4:57

Inspect Component Events with React Storybook

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Arunoda Susiripala
1:45

Load React Storybook Stories Dynamically

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Arunoda Susiripala
3:10

Write the First React Storybook Story

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data l...

Arunoda Susiripala
4:34

Add React Storybook to a Project

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Arunoda Susiripala
3:35

Add Redux State Management to a React on Rails Project

Learn how to add a simple Redux-backed React component to a new Rails 5 app using React on Rails.

Justin Gordon
7:27

Render Basic SVG Components in React

React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS. Creating SVG components with React allows you to inline SVG. Inline SVG h...

Basarat Ali Syed
1:35

Break up components into smaller pieces using Functional Components

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

Rory Smith
2:21

FEATURED REACT PLAYLISTS

Browse all React lessons.

showing All 269 lessons...

Build a Collapsible React Native Header Bar

Create an Expanding Notify Input with Success Message in React Native

Use React Native to Animate a Swipe Away Comment Modal

Toggle Hidden Details on a React Native Event Card

Animate a React Native Information Callout View

Build an Animated Floating Action Button in React Native with Springy Menu

Create a Tap to Show Love React Native Animation

Create An Exploding Heart Button in React Native

Create a Horizontal Parallax ScrollView in React Native

Bounce a Heart Shaped Button in React Native on Press

Update State in React with Ramda's Evolve

Update Component State in React With Ramda Lenses

Use create-react-native-app to Set Up a Simple React Native App

Render Catch-All Routes with React Router v4 using the Switch Component

P

Understand the Difference Between the React Router v4 Router Types

P

Redirect to Another Page with React Router v4

P

Intercept Route Changes with React Router v4 Prompt Component

P

Render Nested Routes with React Router v4

P

Render Multiple Components for the Same Route in React Router v4

P

Conditionally Render a React Router v4 Route with the Switch Component

P

Create Basic Routes with the React Router v4 BrowserRouter

P

Use URL Parameters with React Router v4

P

Use Regular Expressions with Routes with React Router v4

P

Parse Query Parameters in React Router v4

P

Use the React Router v4 Link Component for Navigation Between Routes

P

Style a Link that is Active with NavLink in React Router v4

P

Run the React Router v4 Examples with Create React App

P

Build an SVG icon component in React

P

Writing Platform-Specific Components for iOS and Android in React Native

Installing and Linking Modules with Native Code in React Native

Inspect Component Events with React Storybook

Load React Storybook Stories Dynamically

Write the First React Storybook Story

Add React Storybook to a Project

Load Data From a Server with fetch

P

Delete Data on the Server with fetch

P

Update data on the Server with fetch

P

Show Temporary Messages in a React Application

P

Save Data to the Server with fetch

P

Build a Link Component to Navigate to Routes in React

P

Keep Application State in Sync with Browser History

P

Use React Context to Manage Application State Through Routes

P

Update React Application State from Form Input

P

Filter Data on Property Values

P

Create a Pipe Function to Enable Function Composition

P

Pass Data To Event Handlers with Partial Function Application

P

Prevent Empty Form Values with Conditional Submit Handlers

P

Update Data in a List without Mutations

P

Synchronize React UI and State with Controlled Components

P

Remove Items from a List without Mutations

P
react tutorial about Build a Collapsible React Native Header Bar

Build a Collapsible React Native Header Bar

4:27 react

In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of ScrollView, onScroll, and the Animated.event function to update our Animated.Value every time the user scrolls. Then with a series of interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the fontSize of our title.

react tutorial about Create an Expanding Notify Input with Success Message in React Native

Create an Expanding Notify Input with Success Message in React Native

7:07 react

In this lesson we'll create a notify button that expands from the middle to show a TextInput with a send button and once sent will hide the TextInput and show a thank you message. We'll use the helper method StyleSheet.absoluteFill to position our input inside of our wrapping View. This allows us to animate our TextInput and our messages in and out without effecting layout of each other.
When pressed to show the TextInput and when we show the thank you message a combination of animating the width and justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use Animated.timing and a success boolean on state to control what is rendered, and what is animating. interpolate will be used heavily to scale in and out views when they are needed.

react tutorial about Use React Native to Animate a Swipe Away Comment Modal

Use React Native to Animate a Swipe Away Comment Modal

8:33 react

In this lesson we'll use PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the Animated.setValue function to translate our Modal up or down depending on the direction of the swipe.

react tutorial about Toggle Hidden Details on a React Native Event Card

Toggle Hidden Details on a React Native Event Card

4:14 react

In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use state and the componentDidUpdate callback to trigger our animations.
Depending our state we'll use Animated.timing to animate the information in and out. We'll use a series interpolate on our Animated.Value to rotate the arrow, and translate our information into view.

react tutorial about Animate a React Native Information Callout View

Animate a React Native Information Callout View

6:38 react

In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
We'll use Animated.timing and rely heavily on interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe ScrollView to allow for our gestures to work correctly.

react tutorial about Build an Animated Floating Action Button  in React Native with Springy Menu

Build an Animated Floating Action Button in React Native with Springy Menu

7:43 react

In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use Animated.parallel to execute our stagger menu options and execute our Animated.timing animation which will rotate our button and change our background color with interpolate. We use Animated.stagger to create a delay of our buttons sliding up. Animated.spring will give our buttons a spring effect as they shoot upwards.

react tutorial about Create a Tap to Show Love React Native Animation

Create a Tap to Show Love React Native Animation

7:14 react

In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an Animated.Value will be created. We will measure the screen dimensions with Dimensions so we can place our heart in a random location. Then we'll use Animated.timing to animate the heart upwards. Finally a series of interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.

react tutorial about Create An Exploding Heart Button in React Native

Create An Exploding Heart Button in React Native

6:18 react

In this lesson we'll create a like button that explodes with hearts. We'll use Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of Animated.timing animations and then use Animated.stagger to make the hearts appear with a 50ms stagger. We use Animated.delay to wait before we then use Animated.stagger again to hide the hearts in. Finally our Animated.sequence will cause each of those animations to happen one after the other.

react tutorial about Create a Horizontal Parallax ScrollView in React Native

Create a Horizontal Parallax ScrollView in React Native

9:57 react

In this lesson we'll create a Twitter Moments clone with a horizontal parallax image scrolling effect. We'll use Animated.event, and interpolation to make the effect work.

react tutorial about Bounce a Heart Shaped Button in React Native on Press

Bounce a Heart Shaped Button in React Native on Press

4:25 react

In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.

react tutorial about Update State in React with Ramda's Evolve

Update State in React with Ramda's Evolve

4:29 react

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater function a reusable utility that isn't tied to the React API.

react tutorial about Update Component State in React With Ramda Lenses

Update Component State in React With Ramda Lenses

4:37 react

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

Use create-react-native-app to Set Up a Simple React Native App

0:55 react

React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globally and create a new project.

After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called Expo Client on our mobile phone and use it to scan the QR code.

This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use console.log the messages will be printed in our terminal.

Download the Expo Client from App Store or Google Play

react tutorial about Render Catch-All Routes with React Router v4 using the Switch Component

Render Catch-All Routes with React Router v4 using the Switch Component

1:24 react PRO

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.

react tutorial about Understand the Difference Between the React Router v4 Router Types

Understand the Difference Between the React Router v4 Router Types

6:25 react PRO

React Router introduces several different router types that are useful for various environments where routing is typically needed. The BrowserRouter, NativeRouter, StaticRouter, HashRouter, and MemoryRouter are all available to suit your needs and requirements. Understanding when and why to use the variety of routers is an important part of understanding React Router v4.

react tutorial about Redirect to Another Page with React Router v4

Redirect to Another Page with React Router v4

3:50 react PRO

Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.

react tutorial about Intercept Route Changes with React Router v4 Prompt Component

Intercept Route Changes with React Router v4 Prompt Component

2:18 react PRO

If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a Prompt component to interrupt the Route transition and ask the user a question.

react tutorial about Render Nested Routes with React Router v4

Render Nested Routes with React Router v4

2:17 react PRO

With React Router v4 the entire library is built as a series of React components. That means that creating nested Routes is as simple as creating any other nested element in your application.

react tutorial about Render Multiple Components for the Same Route in React Router v4

Render Multiple Components for the Same Route in React Router v4

2:43 react PRO

React Router v4 allows us to render Routes as components wherever we like in our components. This can provide some interesting use cases for creating dynamic routes on our applications.

react tutorial about Conditionally Render a React Router v4 Route with the Switch Component

Conditionally Render a React Router v4 Route with the Switch Component

1:15 react PRO

We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.

react tutorial about Create Basic Routes with the React Router v4 BrowserRouter

Create Basic Routes with the React Router v4 BrowserRouter

6:08 react PRO

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

react tutorial about Use URL Parameters with React Router v4

Use URL Parameters with React Router v4

2:36 react PRO

URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.

react tutorial about Use Regular Expressions with Routes with React Router v4

Use Regular Expressions with Routes with React Router v4

1:52 react PRO

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

react tutorial about Parse Query Parameters in React Router v4

Parse Query Parameters in React Router v4

3:08 react PRO

React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so that you can use that additional information as required. There are several strategies for doing this that we will look at.

react tutorial about Use the React Router v4 Link Component for Navigation Between Routes

Use the React Router v4 Link Component for Navigation Between Routes

2:01 react PRO

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

react tutorial about Style a Link that is Active with NavLink in React Router v4

Style a Link that is Active with NavLink in React Router v4

3:50 react PRO

We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the NavLink component. In this lesson, we will step through three ways to accomplish styling links through the use of an active class with the NavLink component.

react tutorial about Run the React Router v4 Examples with Create React App

Run the React Router v4 Examples with Create React App

2:15 react PRO

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react PRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

react tutorial about Writing Platform-Specific Components for iOS and Android in React Native

Writing Platform-Specific Components for iOS and Android in React Native

5:28 react

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

react tutorial about Installing and Linking Modules with Native Code in React Native

Installing and Linking Modules with Native Code in React Native

4:57 react

Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video component using npm install, and then link it with the react-native link command so that our Video component works properly on both iOS and Android.

react tutorial about Inspect Component Events with React Storybook

Inspect Component Events with React Storybook

1:45 react

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

react tutorial about Load React Storybook Stories Dynamically

Load React Storybook Stories Dynamically

3:10 react

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

react tutorial about Write the First React Storybook Story

Write the First React Storybook Story

4:34 react

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

react tutorial about Add React Storybook to a Project

Add React Storybook to a Project

3:35 react

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

react tutorial about Load Data From a Server with fetch

Load Data From a Server with fetch

4:19 react PRO

We’ll fire up json-server so we can run our application against a server. We’ll take advantage of the fetch polyfill provided by create-react-app and leverage the componentDidMount lifecycle event to load our initial todo list. We’ll also add an error message to our UI in the case that the server is unavailable.

react tutorial about Delete Data on the Server with fetch

Delete Data on the Server with fetch

1:35 react PRO

We’ll use fetch to delete items on the server when the client triggers a removal, and update the UI with a success message once the delete operation on the server has succeeded.

react tutorial about Update data on the Server with fetch

Update data on the Server with fetch

3:09 react PRO

We’ll use fetch and refactor our client-side task completion logic to send an update to the server, and update the UI with a success message once the save has completed successfully.

react tutorial about Show Temporary Messages in a React Application

Show Temporary Messages in a React Application

2:41 react PRO

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

react tutorial about Save Data to the Server with fetch

Save Data to the Server with fetch

2:30 react PRO

We’ll cover posting new data to the server using fetch and the POST http method. We’ll also update the UI with a success message once the save has completed successfully.

react tutorial about Build a Link Component to Navigate to Routes in React

Build a Link Component to Navigate to Routes in React

6:32 react PRO

In this lesson, we’ll create a Link component that manipulates the browser’s address bar using the history API’s pushState method.

react tutorial about Keep Application State in Sync with Browser History

Keep Application State in Sync with Browser History

1:43 react PRO

Using pushState and passing route data via context allows our application to respond to route changes made from Link components, but using the back and forward buttons in the browser doesn’t update the application state as we would expect. In this lesson, we’ll add event handling to our Router component to handle history popState events so routing behavior is maintained for the back and forward buttons.

react tutorial about Use React Context to Manage Application State Through Routes

Use React Context to Manage Application State Through Routes

7:51 react PRO

We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.

react tutorial about Update React Application State from Form Input

Update React Application State from Form Input

4:07 react PRO

We’ll add a handler to the form so we can take new input and use it to update the application state. We’ll append new items to the list with the AddTodo function and replace the todos list in state. We’ll also clear out our form so it can accept new todos.

react tutorial about Filter Data on Property Values

Filter Data on Property Values

3:28 react PRO

We want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.

react tutorial about Create a Pipe Function to Enable Function Composition

Create a Pipe Function to Enable Function Composition

7:13 react PRO

In this lesson, we’ll refactor a series of function calls into a functional pipeline, making the code more declarative and removing the need for intermediate variables. Rather than reaching for a utility library, we’ll start by building our own pipe function to gain a clear understanding of how left-to-right function composition is accomplished in JavaScript.

react tutorial about Pass Data To Event Handlers with Partial Function Application

Pass Data To Event Handlers with Partial Function Application

8:39 react PRO

In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to reflect our change. We’ll also create a helper function that allows us to use partial function application to clean up the event handler code and make it more “functional”

react tutorial about Prevent Empty Form Values with Conditional Submit Handlers

Prevent Empty Form Values with Conditional Submit Handlers

5:37 react PRO

We’ll take advantage of the controlled nature of the todo input and the first class nature of javascript functions to dynamically assign the form submission handler. An empty todo will trigger a submission handler that is only concerned with handling an error state, and when the input is valid, the form will use the standard submit handler.

react tutorial about Update Data in a List without Mutations

Update Data in a List without Mutations

7:10 react PRO

We’ll build small, focused functions to select an object from a list, apply updates to an object and replace an item in a list, avoid mutations to those objects along the way by returning new items that reflect our changes. We’ll verify this behavior by following a test driven approach using Jest.

react tutorial about Synchronize React UI and State with Controlled Components

Synchronize React UI and State with Controlled Components

3:41 react PRO

We’ll make the input field a “controlled component” by reacting to each change of the input and capturing it in the component state. Following this model gives us assurance that the UI is always a representation of the current application state.

react tutorial about Remove Items from a List without Mutations

Remove Items from a List without Mutations

5:31 react PRO

In this lesson, we’ll add the ability to remove items from our list. We’ll add some css to show a delete link while hovered over an item and handle a click event from the component to remove the corresponding item from the list by its id.

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