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 11

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

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

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

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

Create a Button Shake Animation in React Native

In this lesson we'll use Animated.timing and TouchableWithoutFeedback to create an animatable button. We'll learn how to use interpolate to create a non-linear animation. When our button is pressed...

Jason Brown
2:38

Creating a component with React on Rails

Learn how to add a simple React component to a brand new Rails app with React on Rails installed. You will see how to add your React component to a Rails view, including the passing of values from ...

Justin Gordon
6:33

Create A Login Screen in React Native

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

Jason Brown
6:21

Make a Button in React Native with TouchableHighlight

Learn how to make a button in React Native by using the TouchableHighlight component. We'll create and style a component that responds to user interactions and invokes a callback when you touch it.

Bonnie Eisenman
6:43

Get the Dimensions of a React Native Phone Screen

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.

Jason Brown
1:10

Installing Third-Party Libraries from npm with React Native

Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll al...

Bonnie Eisenman
3:05

Create a Custom Map Marker with React Native Maps

In this lesson we'll create a MapView with react-native-maps. We'll use the onPress function to add Markers to the map and then we'll use the custom map marker feature to style them.

Jason Brown
2:52

Measure and Get the Position of a React Native Element

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function...

Jason Brown
2:14

Create & Deploy a Universal React App using Zeit Next

In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you w...

Andrew Van Slaars
6:11

FEATURED REACT PLAYLISTS

Browse all React lessons.

showing All 211 lessons...

Add Redux State Management to a React on Rails Project

Render Basic SVG Components in React

Inline Edit Todo Items in a React Native ListView

P

Create the Basic React Native Todo Application Layout

P

Filter Items in the React Native List View

P

Add the Total Remaining Item Count to the Footer with React Native Text

P

Add a Toggle All Complete Button with React Native TouchableOpacity

P

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

P

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

P

Persist Items with React Native AsyncStorage

P

Add a Remove Item Button to Each Row with React Native TouchableOpacity

P

Create a List of Items with a React Native ListView

P

Setup React Native for iOS and Android

Create a React Native TextInput

P

Add a Complete Toggle with React Native Switch

P

Break up components into smaller pieces using Functional Components

Create a Button Shake Animation in React Native

Creating a component with React on Rails

Create A Login Screen in React Native

Make a Button in React Native with TouchableHighlight

Get the Dimensions of a React Native Phone Screen

Use React.cloneElement to Extend Functionality of Children Components

Understand React.Children Utilities

Installing Third-Party Libraries from npm with React Native

Create a Custom Map Marker with React Native Maps

Measure and Get the Position of a React Native Element

Animate Colors with React Native Interpolate

P

Animate a Sequence of React Native Animations with Animated.sequence

P

Animate Multiple Animations at the Same Time with Animated.parallel

P

Stagger React Native Animations with Animated.stagger

P

Create a Flip Card Animation with React Native

P

Animate Rotation with React Native Interpolate

P

Create a Draggable Card with React Native Pan Responder, and Animated.decay

P

Create & Deploy a Universal React App using Zeit Next

Using the Chrome Debugger to Set Breakpoints in React Native

Animate the Scale of a React Native Button using Animated.spring

P

Animate Styles of a React Native View with Animated.timing

Use Flex to Scale React Native Background Image

Jest Snapshot Testing with React Storybook

Getting Started with React Storybook

Recompose: ButtonGroup - When nesting affects Style

Recompose: Theme React Components Live with Context

Recompose: Override Styles & Elements Types in React

Styling React Components With Aphrodite

Set up React apps with zero configuration in two minutes

Handle user input and asynchronous actions with MobX

Write custom MobX reactions with when and autorun

Derive computed values and manage side effects with MobX reactions

Connect MobX observer components to the store with the React Provider

Use MobX actions to change and guard state

react tutorial about Add Redux State Management to a React on Rails Project

Add Redux State Management to a React on Rails Project

7:27 react

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

react tutorial about Render Basic SVG Components in React

Render Basic SVG Components in React

1:35 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 has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

An additional advantage is of-course that you can use component props to customize the contents of the SVG.

react tutorial about Inline Edit Todo Items in a React Native ListView

Inline Edit Todo Items in a React Native ListView

6:18 react PRO

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders

react tutorial about Create the Basic React Native Todo Application Layout

Create the Basic React Native Todo Application Layout

2:35 react PRO

In this lesson we'll create the basic application layout with a header, content section, and footer. We'll learn to use StyleSheet to create styles to apply to React Native components.

react tutorial about Filter Items in the React Native List View

Filter Items in the React Native List View

6:44 react PRO

We'll setup 3 buttons (All, Active, Complete) to filter the displayed items based on their completion status. We'll also show how to use flexbox flexDirection row lays out items differently than column.

react tutorial about Add the Total Remaining Item Count to the Footer with React Native Text

Add the Total Remaining Item Count to the Footer with React Native Text

0:40 react PRO

In this lesson we'll add a footer text item to show the total count of what is in the current filtered view. We'll show the technique of deriving computed values in render functions.

react tutorial about Add a Toggle All Complete Button with React Native TouchableOpacity

Add a Toggle All Complete Button with React Native TouchableOpacity

3:43 react PRO

In this lesson we'll add a Toggle All Complete Button next to the Text Input. We'll show off how components without flex layout affect siblings with flex layout properties.

react tutorial about Add a Loading Indicator While Loading Items with React Native ActivityIndicator

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

1:49 react PRO

We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with alignItems and justifyContent set to center.

react tutorial about Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

1:42 react PRO

In this lesson we'll add a button to the footer that will clear all completed items. We'll use TouchableOpacity and we'll examine how flex space-around property works.

react tutorial about Persist Items with React Native AsyncStorage

Persist Items with React Native AsyncStorage

1:06 react PRO

In this lesson we'll use AsyncStorage to save our items so they persist with each reload of the application. We'll show how to use the promise base interface to handle success as well as handle errors.

react tutorial about Add a Remove Item Button to Each Row with React Native TouchableOpacity

Add a Remove Item Button to Each Row with React Native TouchableOpacity

1:48 react PRO

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

react tutorial about Create a List of Items with a React Native ListView

Create a List of Items with a React Native ListView

5:57 react PRO

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

react tutorial about Setup React Native for iOS and Android

Setup React Native for iOS and Android

4:48 react

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

react tutorial about Create a React Native TextInput

Create a React Native TextInput

4:29 react PRO

In this lesson we'll use TextInput to receive input from the user and save off separate items into state. We'll store the value on state, show how to setup specific keyboards to display and how to handle actions from the keyboard.

react tutorial about Add a Complete Toggle with React Native Switch

Add a Complete Toggle with React Native Switch

3:19 react PRO

We'll add a cross platform Switch component to toggle the completeness of each todo item. We'll show how to pass down functions from the parent application to the child row of a ListView.

react tutorial about Break up components into smaller pieces using Functional Components

Break up components into smaller pieces using Functional Components

2:21 react

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.

react tutorial about Create a Button Shake Animation in React Native

Create a Button Shake Animation in React Native

2:38 react

In this lesson we'll use Animated.timing and TouchableWithoutFeedback to create an animatable button. We'll learn how to use interpolate to create a non-linear animation. When our button is pressed it will shake from side to side.

react tutorial about Creating a component with React on Rails

Creating a component with React on Rails

6:33 react

Learn how to add a simple React component to a brand new Rails app with React on Rails installed. You will see how to add your React component to a Rails view, including the passing of values from the controller to your React component.

react tutorial about Create A Login Screen in React Native

Create A Login Screen in React Native

6:21 react

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

react tutorial about Make a Button in React Native with TouchableHighlight

Make a Button in React Native with TouchableHighlight

6:43 react

Learn how to make a button in React Native by using the TouchableHighlight component. We'll create and style a component that responds to user interactions and invokes a callback when you touch it.

react tutorial about Get the Dimensions of a React Native Phone Screen

Get the Dimensions of a React Native Phone Screen

1:10 react

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.

react tutorial about Use React.cloneElement to Extend Functionality of Children Components

Use React.cloneElement to Extend Functionality of Children Components

2:14 react

We can utilize React.cloneElement in order to create new components with extended data or functionality.

react tutorial about Understand React.Children Utilities

Understand React.Children Utilities

2:40 react

The data contained in this.props.children is not always what you might expect. React provides React.children to allow for a more consistent development experience.

react tutorial about Installing Third-Party Libraries from npm with React Native

Installing Third-Party Libraries from npm with React Native

3:05 react

Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll also see what happens when you try to use a third-party library, such as jQuery, that attempts to access the browser window and is therefore not compatible with React Native.

react tutorial about Create a Custom Map Marker with React Native Maps

Create a Custom Map Marker with React Native Maps

2:52 react

In this lesson we'll create a MapView with react-native-maps. We'll use the onPress function to add Markers to the map and then we'll use the custom map marker feature to style them.

react tutorial about Measure and Get the Position of a React Native Element

Measure and Get the Position of a React Native Element

2:14 react

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.

react tutorial about Animate Colors with React Native Interpolate

Animate Colors with React Native Interpolate

2:11 react PRO

We'll use the interpolate function from an Animated.Value to transition the background color of an Animated.View. We'll simultaneously translate the position with the same Animated.Value.

react tutorial about Animate a Sequence of React Native Animations with Animated.sequence

Animate a Sequence of React Native Animations with Animated.sequence

1:47 react PRO

In this lesson we'll use Animated.sequence to play multiple Animated.timing, and Animated.spring animations one after another.

react tutorial about Animate Multiple Animations at the Same Time with Animated.parallel

Animate Multiple Animations at the Same Time with Animated.parallel

1:26 react PRO

In this lesson we'll use Animated.parallel to animate multiple Animated.timing and Animated.spring animations at the same time.

react tutorial about Stagger React Native Animations with Animated.stagger

Stagger React Native Animations with Animated.stagger

2:53 react PRO

In this lesson we'll use Animated.stagger to stagger Animated.timing animations that animate the height of a React Native view every 300 milliseconds.

react tutorial about Create a Flip Card Animation with React Native

Create a Flip Card Animation with React Native

4:23 react PRO

In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.

react tutorial about Animate Rotation with React Native Interpolate

Animate Rotation with React Native Interpolate

1:52 react PRO

By using the interpolate function, the Animated.View can be rotated using both degrees and radians.

react tutorial about Create a Draggable Card with React Native Pan Responder, and Animated.decay

Create a Draggable Card with React Native Pan Responder, and Animated.decay

3:57 react PRO

In this lesson we'll create a PanResponder to allow us to drag a card around the screen. We'll use Animated.event to automatically set the values of our Animated.Value and when the card is released we'll use Animated.decay to decelerate it to a stop.

react tutorial about Create & Deploy a Universal React App using Zeit Next

Create & Deploy a Universal React App using Zeit Next

6:11 react

In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capabilities included with next to create links between the components using pushState and we'll incorporate our own React component. Finally, we'll deploy the application to now with a simple command in the terminal.

react tutorial about Using the Chrome Debugger to Set Breakpoints in React Native

Using the Chrome Debugger to Set Breakpoints in React Native

2:48 react

You can use the JavaScript debugger to set breakpoints in React Native. We'll look at how to use the Chrome developer tools with React Native, and how to work with the debugger and console.log statements.

react tutorial about Animate the Scale of a React Native Button using Animated.spring

Animate the Scale of a React Native Button using Animated.spring

3:12 react PRO

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

react tutorial about Animate Styles of a React Native View with Animated.timing

Animate Styles of a React Native View with Animated.timing

3:29 react

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

react tutorial about Use Flex to Scale React Native Background Image

Use Flex to Scale React Native Background Image

1:44 react

In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

react tutorial about Jest Snapshot Testing with React Storybook

Jest Snapshot Testing with React Storybook

2:26 react

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!

react tutorial about Getting Started with React Storybook

Getting Started with React Storybook

3:41 react

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

Here I show how to get started with React Storybook.
For more information, have a look at our documentation.

react tutorial about Recompose: ButtonGroup - When nesting affects Style

Recompose: ButtonGroup - When nesting affects Style

8:23 react

In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component.

However occasionally the nesting of components affects the styles. In these rare cases we can use context to influence styles yielding a user friendly api to our components.

react tutorial about Recompose: Theme React Components Live with Context

Recompose: Theme React Components Live with Context

9:44 react

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to create the helper functions we need to do this yielding concise, functional declarative UI components. These components will respond in real time to changes in the theme.

react tutorial about Recompose: Override Styles & Elements Types in React

Recompose: Override Styles & Elements Types in React

5:54 react

When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements.

react tutorial about Styling React Components With Aphrodite

Styling React Components With Aphrodite

2:29 react

Aphrodite is a library styling React components.

You get all the benefits of inline styles (encapsulation, no build step, no CSS cascade, building up styling with JavaScript instead of a preprocessor language) with all the benefits of CSS (animations and transitions, pseudo-classes, media queries).

Learn how to use Aphrodite to style reusable React components.

react tutorial about Set up React apps with zero configuration in two minutes

Set up React apps with zero configuration in two minutes

2:02 react

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

react tutorial about Handle user input and asynchronous actions with MobX

Handle user input and asynchronous actions with MobX

4:07 react

In this lesson we will finally do something useful with our temperatures. We extend it into a small app in which users can enter a location, which is used as input for an external API to fetch weather data. In the mean time MobX keeps our UI in sync with the current state of the request.

react tutorial about Write custom MobX reactions with when and autorun

Write custom MobX reactions with when and autorun

3:27 react

So far we have been talking briefly about reactions. In this lesson you will learn how reactions can be used to observe state until some condition is met. After that you will see how autorun can be used to automatically trigger side effects. This is used internally by observer as well. We will test this by replacing React with our own handcrafted rendering which is still kept in sync with the state by MobX!

react tutorial about Derive computed values and manage side effects with MobX reactions

Derive computed values and manage side effects with MobX reactions

4:50 react

Derivations form the backbone of MobX and come in two flavors: computed values are values that can be derived from the state automatically. And reactions can be used to manage side effects, such as drawing the user interface. In this lesson you will learn how these concepts relate to each other and how they are optimized automatically by MobX.

react tutorial about Connect MobX observer components to the store with the React Provider

Connect MobX observer components to the store with the React Provider

1:33 react

Passing down stores through each layer of components can be a tedious job. This lesson demonstrates how Provider can be used to automatically connect observer based components to stores, by leveraging React's context mechanism in the background.

react tutorial about Use MobX actions to change and guard state

Use MobX actions to change and guard state

3:01 react

This lesson explains how actions can be used to control and modify the state of your application. They help you to structure your code base and integrate well with the MobX React Devtools. Actions automatically create transactions, which group changes together.

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