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 17

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

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

Create component variations in React with styled-components and "extend"

In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types ...

Simon Vrachliotis
1:09

Animate your user interface in React with styled-components and "keyframes"

In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.

Simon Vrachliotis
1:15

Error Handling using Error Boundaries in React 16

A JavaScript error in the UI shouldn’t break the whole application. To solve this problem for React 16 introduced a new concept of an “error boundary”. Such error boundaries are React components th...

Nik Graf
6:01

Theme your application with styled-components and "ThemeProvider"

In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .

Simon Vrachliotis
1:17

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 the body element with styled-components and "injectGlobal"

In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrappe...

Simon Vrachliotis
0:52

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

Create a Reusable Scroll View Component with Animated scrollTo in React

In this lesson we'll show how to build a ScrollView and ScrollElement component that do not add additional markup. We'll use context and findDOMNode to register nested items and then expose a scrol...

Jason Brown
8:44

Create a Responsive Animated Progress Bar in React Native

In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by show...

Jason Brown
9:24

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dyn...

Jason Brown
3:01

Create an Auto Resizing Virtualized List with react-virtualized

In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically measure the width/height of our content area. We'll then use theList component to render our set...

Jason Brown
4:35

FEATURED REACT PLAYLISTS

Browse all React lessons.

showing All 334 lessons...

Write a "Hello World" React Component

Display Output in React with a Component's render Method

Set Properties on React Components

Manage React Component State with setState

Use React Components as Children for Other Components

Use React ref to Get a Reference to Specific Components

Access Nested Data with Reacts props.children

Understand the React Component Lifecycle Methods

Manage React Component State with Lifecycle Methods

Control React Component Updates When New Props Are Received

React Mixins

P

Write More Reusable React Components with Composable APIs

Use map to Create React Components from Arrays of Data

Build a JSX Live Compiler as a React Component

Understand JSX at a Deeper Level

React with-addons - ReactLink

P

React Fundamentals: Integrating Components with D3 and AngularJS

P

Debug React Components with Developer Tools in Chrome

React Flux: Development Environment Setup

React Flux: Overview and Dispatchers

React Flux: Actions

P

React Flux: Stores

P

React Flux: Components/Views

P

React Flux: Project Organization

P

React Flux: Routing with react-router-component

P

React Flux: Remove Duplicate Code with Mixins

P

React Flux: Wrapping Up

P

Simulate React Events with TestUtils

P

Using React's dangerouslySetInnerHTML

P

React in 7 Minutes

P

What's new and different in React v0.12.0

P

Using TweenMax with React

P

Applying conditional styles in React with classSet add-on

P

React and Firebase with ReactFire

P

React Animation with CSSTransitionGroup

P

Use React the cloneWithProps method to interact with child components

P

Setting up a React Playground Dev Environment

P

Connecting to a Reflux Store in React

P

Reflux - Loading data with Superagent

P

Static Methods in React

P

Add Custom propType Validation to React Components

Reflux - Creating Your First Action in React

P

Reflux - Manually Triggering Actions

P

Using React Contexts for Nested Components

P

Reflux - Using Any Library for Model Changes

P

Reflux - Aggregate Stores

P

Introduction to Server-Side React

P

React CSS in JavaScript with Radium

P

Introduction to Isomorphic React

P

Start Building a React Native Application

react tutorial about Write a "Hello World" React Component

Write a "Hello World" React Component

2:45 react

This lessons goes over what it takes to get React to output simple text to the browser such as Hello Eggheads. This lesson will also introduce stateless functional components. React uses JSX which is a "JavaScript syntax extension that looks similar to XML." While this is not required to use with React, it is highly recommended.

react tutorial about Display Output in React with a Component's render Method

Display Output in React with a Component's render Method

1:20 react

The render method is where the magic happens in your React components to display output to the screen. This lesson explains how to structure your JSX in a React component.

react tutorial about Set Properties on React Components

Set Properties on React Components

2:29 react

This lesson will teach you the basics of setting properties (props) in your React components. As stated in Thinking in React, props are how we pass data around in React. We will take a look at what propTypes and defaultProps do for us in React.

react tutorial about Manage React Component State with setState

Manage React Component State with setState

2:28 react

State is used for properties on a component that will change, versus static properties that are passed in. This lesson introduces you to updating state through a simple text input and displaying that in the browser.

react tutorial about Use React Components as Children for Other Components

Use React Components as Children for Other Components

1:33 react

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship. This lesson demonstrates how composable React can be when using stateless functions to display data.

react tutorial about Use React ref to Get a Reference to Specific Components

Use React ref to Get a Reference to Specific Components

4:49 react

When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref. This lesson will introduce us to some of the nuances when using ref.

react tutorial about Access Nested Data with Reacts props.children

Access Nested Data with Reacts props.children

1:33 react

When you're building your React components, you'll probably want to access child properties of the markup. this.props.children accesses the innerHTML or nested components of another component.

react tutorial about Understand the React Component Lifecycle Methods

Understand the React Component Lifecycle Methods

4:19 react

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson gives an overview of the entire component lifecycle and demonstrates mounting and unmounting of your React components.

react tutorial about Manage React Component State with Lifecycle Methods

Manage React Component State with Lifecycle Methods

1:58 react

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks and how we can interact with state.

react tutorial about Control React Component Updates When New Props Are Received

Control React Component Updates When New Props Are Received

3:30 react

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that. componentWillReceiveProps gives us an opportunity to update state by reacting to a prop transition before the render() call is made. shouldComponentUpdate allows us to set conditions on when we should update a component so that we are not rendering constantly. componentDidUpdate lets us react to a component updating.

react tutorial about React Mixins

React Mixins

3:24 react PRO

Mixins will allow you to apply behaviors to multiple React components.

react tutorial about Write More Reusable React Components with Composable APIs

Write More Reusable React Components with Composable APIs

4:41 react

To make more composable React components, you can define common APIs for similar component types.

react tutorial about Use map to Create React Components from Arrays of Data

Use map to Create React Components from Arrays of Data

4:18 react

React components can be dynamically generated based on a dataset. This lesson will show you how to do just that by mapping over the state.data object.

react tutorial about Build a JSX Live Compiler as a React Component

Build a JSX Live Compiler as a React Component

5:09 react

As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.

react tutorial about Understand JSX at a Deeper Level

Understand JSX at a Deeper Level

4:28 react

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.

react tutorial about React with-addons - ReactLink

React with-addons - ReactLink

2:58 react PRO

It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.

react tutorial about React Fundamentals: Integrating Components with D3 and AngularJS

React Fundamentals: Integrating Components with D3 and AngularJS

9:31 react PRO

Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.

react tutorial about Debug React Components with Developer Tools in Chrome

Debug React Components with Developer Tools in Chrome

4:14 react

React Development Tools is a Chrome plugin that provides handy ways to inspect and debug your React components.

react tutorial about React Flux: Development Environment Setup

React Flux: Development Environment Setup

7:47 react

Our build process during this series will utilize both gulp and browserify. In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application. We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.

react tutorial about React Flux: Overview and Dispatchers

React Flux: Overview and Dispatchers

4:24 react

Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact less like a typical MVC and more like an Event Bus. In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received. We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.

react tutorial about React Flux: Actions

React Flux: Actions

4:37 react PRO

Actions contain no functionality, but rather describe an event in our application. In this lesson we will describe our Actions as they relate to our application. These Actions will then be available for triggering in our Views and for execution in our Store.

react tutorial about React Flux: Stores

React Flux: Stores

6:03 react PRO

Stores are where the real work in our application is done. Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views. In this lesson we will establish our first Store and register the Actions we wish to respond to.

react tutorial about React Flux: Components/Views

React Flux: Components/Views

9:39 react PRO

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development. In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores. In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

react tutorial about React Flux: Project Organization

React Flux: Project Organization

5:15 react PRO

Organizing modules and components is a critical aspect of the development of any single-page web application (SPA). In this lesson we will look at refactoring the Flux React store into a more module structure.

react tutorial about React Flux: Routing with react-router-component

React Flux: Routing with react-router-component

5:10 react PRO

By default, React doesn't have built in routing. We will add routing to our application with the react-routing-component.

react tutorial about React Flux: Remove Duplicate Code with Mixins

React Flux: Remove Duplicate Code with Mixins

3:29 react PRO

As your React Flux application grows, it is inevitable that you start to see functionality and code repeated. With React, you can easily keep things DRY by using mixins.

react tutorial about React Flux: Wrapping Up

React Flux: Wrapping Up

9:13 react PRO

With this lesson, we will bring it all together, using what we've learned in the series to fisnish out the React Flux architecture example.

The completed code for this series can be found here on Github.

react tutorial about Simulate React Events with TestUtils

Simulate React Events with TestUtils

4:07 react PRO

You can use React's TestUtils addon to simulate events for your components.

react tutorial about Using React's dangerouslySetInnerHTML

Using React's dangerouslySetInnerHTML

2:23 react PRO

Sure, it's a bad idea to store raw HTML in a database and feed that into dynamic views in your web application, but if you absolutely insist on doing it, React provides dangerouslySetInnerHTML to get the job done.

react tutorial about React in 7 Minutes

React in 7 Minutes

7:43 react PRO

Want a whirlwind tour of facebook's React framework? John starts from scratch and builds an app in React in under 7 minutes. You'll learn about building custom components, using React this.state vs. this.props, and React hooking up events.

react tutorial about What's new and different in React v0.12.0

What's new and different in React v0.12.0

3:42 react PRO

React has changed a bit in version 0.12.0. Let's take a look at what is different. You may need to update some code!

react tutorial about Using TweenMax with React

Using TweenMax with React

3:15 react PRO

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in animation libraries like TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

react tutorial about Applying conditional styles in React with classSet add-on

Applying conditional styles in React with classSet add-on

2:17 react PRO

Applying conditional classes can be a real chore in any framework. Luckily for us, React makes it easy with the classSet add-on.

react tutorial about React and Firebase with ReactFire

React and Firebase with ReactFire

6:32 react PRO

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

react tutorial about React Animation with CSSTransitionGroup

React Animation with CSSTransitionGroup

3:07 react PRO

React.addons provides CSSTransitionGroup for easily implementing basic CSS animations and transitions.

react tutorial about Use React the cloneWithProps method to interact with child components

Use React the cloneWithProps method to interact with child components

3:02 react PRO

this.props.children allows child components to pass through, but in order to interact with or add new functionality to them React.addons provides cloneWithProps.

react tutorial about Setting up a React Playground Dev Environment

Setting up a React Playground Dev Environment

6:07 react PRO

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

react tutorial about Connecting to a Reflux Store in React

Connecting to a Reflux Store in React

3:37 react PRO

Reflux makes connecting to a store extremely simple. Let's refactor a React component so that the data now comes from a Reflux store and allows the data store to trigger future updates.

react tutorial about Reflux - Loading data with Superagent

Reflux - Loading data with Superagent

5:05 react PRO

Neither React nor Reflux come with a built-in library for loading data. Many people use jQuery, but this jQuery is heavy for the task. In this lesson, John shows you how to easily load in some data using Superagent and walks you through the process of displaying and formatting the data in your component.

react tutorial about Static Methods in React

Static Methods in React

2:11 react PRO

The statics object of our React view components is meant to contain values or functions that can be accessed at any time without needing an instance of that component created.

react tutorial about Add Custom propType Validation to React Components

Add Custom propType Validation to React Components

2:12 react

In addition to the types built into React.propTypes we can also define our own custom propType validator

react tutorial about Reflux - Creating Your First Action in React

Reflux - Creating Your First Action in React

2:44 react PRO

Reflux uses Actions to tell the Stores when to update. We will wire Actions and Stores together to create a simple updatable age field React component.

react tutorial about Reflux - Manually Triggering Actions

Reflux - Manually Triggering Actions

4:18 react PRO

Reflux actions don't need to be used within React components, you can trigger them from anywhere. John demonstrates this concept by extracting the actions away and then invoking them through jquery.

react tutorial about Using React Contexts for Nested Components

Using React Contexts for Nested Components

2:02 react PRO

Contexts are currently undocumented in React v0.12.2, so use at your own risk. However they provide a particularly nice solution to passing data down through nested components.

react tutorial about Reflux - Using Any Library for Model Changes

Reflux - Using Any Library for Model Changes

2:30 react PRO

Reflux actions and stores can be used with any library. In this video, John shows how to listen to store changes without using React.

react tutorial about Reflux - Aggregate Stores

Reflux - Aggregate Stores

4:26 react PRO

Reflux allows stores to listen for other stores to update. This helps you build more complex data models. In this video, John walks you through building a store which can watch for data updates in two other stores.

react tutorial about Introduction to Server-Side React

Introduction to Server-Side React

3:22 react PRO

Rendering React components from the server allows you to pre-render the initial state of your components and speed up initial page loads by not requiring the browser to wait for any JavaScript to load before presenting the component.

react tutorial about React CSS in JavaScript with Radium

React CSS in JavaScript with Radium

3:33 react PRO

Radium is a set of mixins for managing styles in React components, allowing you to use CSS features that aren’t possible with inline styles.

react tutorial about Introduction to Isomorphic React

Introduction to Isomorphic React

5:47 react PRO

React enables us to write isomorphic applications that pre-render on the server and then respond to user interaction on the client side.

react tutorial about Start Building a React Native Application

Start Building a React Native Application

9:58 react

We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

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