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 21

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

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

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

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

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

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

FEATURED REACT PLAYLISTS

Browse all React lessons.

showing All 374 lessons...

Install glamorous to start styling React components

Use JSX with React

Create Custom Controls for React Native Video

P

Create Controls that Hide/Show When Video Is Interacted With in React Native

P

Create a Looping Background Video with React Native Video

P

Create a Video that Auto Plays when Scrolled into View in React Native

P

Show an Animated Buffering Icon When Remote Videos are Loading in React Native

P

Setup React Native Video for iOS and Android

Show An Error Message When A Video Fails to Load in React Native

P

Use Local Files or Remote Video Files with React Native Video

Use tests to verify updates to the Redux store

P

Handle network errors gracefully

P

Filter a stream to exclude empty values

P

Debounce user input to avoid repeated Ajax requests

P

Use actions to modify the state of the Redux store

Create a queue of Ajax requests with redux-observable and group the results.

P

Use redux-observable for simple Ajax requests

P

Debug redux-observable with redux dev-tools

P

Add redux-observable to an existing Redux project

P

Add Redux to a React application

Call setState with null to Avoid Triggering an Update in React 16

P

Define DOM Attributes in React 16

P

Render Text Only Components in React 16

P

Render Elements Outside the Current React Tree using Portals in React 16

P

Render Multiple Elements without a Wrapping Element in a Component in React 16

Process Images in React with react-imgpro

P

Compose Redux Higher Order Reducers

P

Understand Redux Higher Order Reducers

P

Render Markdown using React with React-Remarkable

P

Remove React PropTypes by using Flow Annotations (in CRA)

P

Compose Multiple 3D Objects into one Component in React VR

P

Render Custom 3D Objects Using the Model Component in React VR

P

Capture User Interaction with React VR

P

Add Lighting Using Light Components in React VR

P

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

P

Structure 2D Content like Images and Text Using the View Component in React VR

P

Add Shapes Using 3D Primitives in React VR

P

Build 3D Panorama Scenes Using the Pano Component in React VR

Write Text Using the Text Component in React VR

P

Start a Virtual Reality Project Using the React VR CLI

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

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

Filter State Data in Redux with a Selector Function and React Router

P

Configure a React & Redux Application For Production Deployment and Deploy to Now

P

Delete Existing Records on The Server with Redux Thunk and Fetch

P

Dispatch Asynchronous Actions with Redux Thunk Middleware

P

Add React Router to a Redux Application

P

Update Existing Records on The Server with Redux Thunk and Fetch

P

Respond to a Single Redux Action in Multiple Reducers

P

Use Multiple Reducers in Redux with combineReducers

P
react tutorial about Install glamorous to start styling React components

Install glamorous to start styling React components

1:43 react

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

react tutorial about Use JSX with React

Use JSX with React

5:48 react

In this lesson we'll learn the basics of using JSX with React. In addition to the noted className difference, there are a number of other differences with attributes in JSX than those in React.

react tutorial about Create Custom Controls for React Native Video

Create Custom Controls for React Native Video

9:28 react PRO

In this lesson we'll use react-native-vector-icons to add play/paused buttons, a seek bar, and the duration of the video. We'll use the onLoad, onProgress, and onEnd callbacks to track the video progress. We'll use the react-native-progress to create an animated progress bar for us. Finally with TouchableWithoutFeedback we will add a tap to seek interaction to jump to specific times in the video.

react tutorial about Create Controls that Hide/Show When Video Is Interacted With in React Native

Create Controls that Hide/Show When Video Is Interacted With in React Native

7:48 react PRO

In this lesson we'll create controls that animate into view when the video is interacted with. The controls will animate in when the video starts to play, or when the video is tapped. When a 1500-ms timeout is reached the controls will automatically animate to a hidden state.

react tutorial about Create a Looping Background Video with React Native Video

Create a Looping Background Video with React Native Video

2:51 react PRO

In this lesson we'll show you how to use React Native Video to cover the entire background with a continuously looping video! We'll be using the repeat property as well as the StyleSheet.absoluteFill property so we don't have to replicate any styles.

We'll then show you how to overlay content over your looping video.

react tutorial about Create a Video that Auto Plays when Scrolled into View in React Native

Create a Video that Auto Plays when Scrolled into View in React Native

7:37 react PRO

In this lesson we'll setup a react-native-video player that is paused when it is not visible but when scrolled into view starts playing the video. We'll also show how to add a small ending threshold so once the video is only partially out of view it will pause.

react tutorial about Show an Animated Buffering Icon When Remote Videos are Loading in React Native

Show an Animated Buffering Icon When Remote Videos are Loading in React Native

5:33 react PRO

In this lesson we'll be using a buffering icon from react-native-vector-icons to
display a buffering state over the center of the video.

We'll learn how to setup up an Animated.loop to rotate the buffering icon and
how to use the video's meta to only run the loop during buffering.

react tutorial about Setup React Native Video for iOS and Android

Setup React Native Video for iOS and Android

0:54 react

In this lesson we'll install react-native-video with NPM. We'll use the react- native link command to setup all necessary native code.
Then we'll import Video from react-native-video and use the <Video/> component in our code!

react tutorial about Show An Error Message When A Video Fails to Load in React Native

Show An Error Message When A Video Fails to Load in React Native

3:24 react PRO

In this lesson we'll show to use the onError callback from react-native-video. We'll show how to use a separate <View/> that'll cover the video and render an error icon from react-native-vector-icons only if there is an error present.

Finally we'll learn how to setup a handleError function that'll take the error and error code off the video meta. This'll let us check against various error codes and give back a custom error message!

react tutorial about Use Local Files or Remote Video Files with React Native Video

Use Local Files or Remote Video Files with React Native Video

2:04 react

In this lesson we'll show the different methods that react-native-video allows to play video including remote video files as well as local files imported as asset files by React Native.

We'll also show you a couple properties you can use on your <Video/> component to resize and add some styles!

react tutorial about Use tests to verify updates to the Redux store

Use tests to verify updates to the Redux store

7:20 react PRO

In certain situations, you care more about the final state of the redux store than you do about the particular stream of events coming out of an epic. In this lesson we explore a technique for dispatching actions direction into the store, having the epic execute as they would normally in production, and then assert on the updated store’s state.

react tutorial about Handle network errors gracefully

Handle network errors gracefully

7:38 react PRO

Any application that uses external services such as APIs should be able to handle errors gracefully. Often this requires no more that displaying a message to the user and ensuring the application continues to function. In this lesson we’ll look at how we can convert an error from the network into an action that is dispatched into the Redux store, allowing us to show an error message to the user and prevent the application from crashing.

react tutorial about Filter a stream to exclude empty values

Filter a stream to exclude empty values

6:48 react PRO

Although ‘epics’ in RxJS are often described as ‘actions in, actions out’, there may be times when you need to ‘bail out’ of an action, or to just ignore the current one given some condition. By learning about RxJS’s filter Operator, we’ll see how easy it is to do ‘nothing’ when you need to. We’ll also see how the composition techniques available in RXJS allow us to control the UI in a declarative manner.

react tutorial about Debounce user input to avoid repeated Ajax requests

Debounce user input to avoid repeated Ajax requests

8:03 react PRO

When accepting user input and converting it into a request that talks to the outside world, we can often end up in a situation where responses are no longer relevant. This is a common case in type-ahead style input fields - we would only want to call an external search API after the user has stopped typing for a short amount of time. In this lesson we’ll see how we can begin to combine RxJS operators to solve such problems.

react tutorial about Use actions to modify the state of the Redux store

Use actions to modify the state of the Redux store

5:37 react

Actions are the backbone of the Redux store. Instead of having state mutations scattered throughout our application, in Redux we define all of our state updates in the form of simple objects that follow the shape, { type: string, payload: any } - in this lesson we’ll see how we propagate actions from within a component and use that action to decide how to modify the state within the store.

react tutorial about Create a queue of Ajax requests with redux-observable and group the results.

Create a queue of Ajax requests with redux-observable and group the results.

7:20 react PRO

With redux-observable, we have the power of RxJS at our disposal - this means tasks that would otherwise be complicated and imperative, become simple and declarative. In this lesson we’ll respond to an action by queuing up 2 separate Ajax requests that will execute sequentially. Then we’ll group the results from both into an array and produce a single action from our epic that will save the data into the redux store

react tutorial about Use redux-observable for simple Ajax requests

Use redux-observable for simple Ajax requests

6:37 react PRO

In this lesson we’ll learn how to perform an Ajax request to an external API in response to an action in the redux store. We’ll see how, within the epic, we get access to actions after any reducers have been executed and how we can convert that incoming action into a resulting one that will save the data received into the redux store.

react tutorial about Debug redux-observable with redux dev-tools

Debug redux-observable with redux dev-tools

1:37 react PRO

Being just another redux-middleware, we can take advantage of existing tools created by the large redux community. Arguably the most valuable & popular amongst these is the rev-tools extension that allows visibility into the lifecycle of the redux store.
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

react tutorial about Add redux-observable to an existing Redux project

Add redux-observable to an existing Redux project

6:49 react PRO

In this lesson we’ll learn exactly what’s needed to incorporate redux-observable into an existing React/Redux application. We’ll learn what ‘Epics’ are, and how they receive a stream of actions and return a stream of actions. In-between is where we get to apply side-effects, call out to external services etc etc. In this lesson we’ll demonstrate the ‘async’ nature of epics by responding to an action with another, delay action.

react tutorial about Add Redux to a React application

Add Redux to a React application

4:20 react

Using the popular create-react-app, we’ll look at each and every step necessary to add state management via Redux. We’ll create an App from scratch, then install redux along with the dependencies needed to make it work with React.

react tutorial about Call setState with null to Avoid Triggering an Update in React 16

Call setState with null to Avoid Triggering an Update in React 16

1:18 react PRO

Sometimes it’s desired to decide within an updater function if an update to re-render should be triggered. Calling .setState with null no longer triggers an update in React 16. This means we can decided if the state gets updated within our .setState method itself!

In this lesson we'll explore how this works by refactoring a city map app that updates even if you choose the same map twice.

react tutorial about Define DOM Attributes in React 16

Define DOM Attributes in React 16

2:30 react PRO

React 16 came with a couple changes to attributes of DOM components e.g. <div>.

In this lesson we are going to walk through when DOM attributes are filtered out and when they are rendered. We'll also go over what you can validly pass into your custom attributes.

react tutorial about Render Text Only Components in React 16

Render Text Only Components in React 16

1:00 react PRO

In this session we create a comment component to explore how to create components that only render text.

In previous versions of we had to wrap our text in needless <span> or <div>, we will see how React 16 removes the unneeded structure.

react tutorial about Render Elements Outside the Current React Tree using Portals in React 16

Render Elements Outside the Current React Tree using Portals in React 16

3:33 react PRO

By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI elements like overlays or loading bars this can be limiting. React 16 therefor ships with the new portal feature allowing you to attach parts of the Component tree inside a different root element.

This lesson explores the new functionality by building an <Overlay/> component that renders out its children and creates a closeable overlay outside its DOM node.

Render Multiple Elements without a Wrapping Element in a Component in React 16

3:14 react

Until React 16 it was required that a render method returns a single React element. With React 16 it is possible now to return an Array of elements.

In addition creating self-eradicating component only rendering the children allow for a comfortable syntax. All in all this opens up new opportunities in component design and how they are nested which is demonstrated in this lesson.

Process Images in React with react-imgpro

3:41 react PRO

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

Include it as a module :

import ProcessImage from 'react-imgpro'

The documentation and the source files can be found here:

https://github.com/nitin42/react-imgpro

react tutorial about Compose Redux Higher Order Reducers

Compose Redux Higher Order Reducers

4:34 react PRO

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

In this lesson I show you different techniques to compose higher order reducers.

react tutorial about Understand Redux Higher Order Reducers

Understand Redux Higher Order Reducers

3:44 react PRO

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 reducing the reducer logic.

In this lesson, we'll see how to reduce duplicated code by refactoring two different reducers into a higher order reducer.

Render Markdown using React with React-Remarkable

1:31 react PRO

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

Importing Guide

import Markdown from 'react-remarkable'

react tutorial about Remove React PropTypes by using Flow Annotations (in CRA)

Remove React PropTypes by using Flow Annotations (in CRA)

2:37 react PRO

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 flow type annotations in our create-react-app project!

react tutorial about Compose Multiple 3D Objects into one Component in React VR

Compose Multiple 3D Objects into one Component in React VR

2:05 react PRO

One of React's core concepts is component composition. React VR is no different in that regard. You can take an existing component and wrap it into a new React component.

We'll do so by creating a <Tree/> component out of simple shapes, a <Cylinder/> trunk and a <Sphere/> tree crown. When making our <Tree/> we'll also see how the position of shapes is relative to the <View/> and learn how we can leverage this superpower!

react tutorial about Render Custom 3D Objects Using the Model Component in React VR

Render Custom 3D Objects Using the Model Component in React VR

1:56 react PRO

React VR isn't limited to simple 3D primitives. By using the <Model/> Component we can place a complex 3D models into our scene.

In this lesson we'll import a custom polygon mesh of an astronaut by loading in a Wavefront .obj file. We'll play with our astronaut and learn about various options that will define the surface area of the model.

react tutorial about Capture User Interaction with React VR

Capture User Interaction with React VR

4:56 react PRO

Letting the user interact inside a VR scene is a crucial element for an immersive VR experience.

In this lesson we'll walk through the various interaction handlers that come with almost every React VR component and show why the component <VrButton/> is useful and how to use it.

react tutorial about Add Lighting Using Light Components in React VR

Add Lighting Using Light Components in React VR

3:28 react PRO

In order to illuminate a scene containing 3D objects a lighting setup is required. In this lesson we'll walk through the available lighting components and create a common outdoor lighting setup.

This includes the components: <AmbientLight/>, which affects all objects in the scene equally and from all directions; <DirectionalLight/>, which illuminates all objects equally from a given direction; <PointLight/>, which spreads outward in all directions from one point; and finally <SpotLight/>, which spreads outwards in the form of a cone.

A handy demo for <SpotLight/> can be found here.

react tutorial about Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

8:09 react PRO

Motion is an important aspect of a complete immersive experience, therefor we are going to look into the animation API Animated.

Animated allows us to express a wide variety of animation patterns to animate text, images, and views.

In addition we'll leverage the higher order component, <CreateAnimatedComponent/>, to create a rotating box!

react tutorial about Structure 2D Content like Images and Text Using the View Component in React VR

Structure 2D Content like Images and Text Using the View Component in React VR

2:37 react PRO

Same as a <div> in HTML or a <View/> in ReactNative, React VR comes with a <Container/> component that supports flexbox layouting.

In this lesson we'll explore what a <View/> means in a three dimensional context and how to structure two dimensional content like text and images.

react tutorial about Add Shapes Using 3D Primitives in React VR

Add Shapes Using 3D Primitives in React VR

4:38 react PRO

React VR ships with a handful of 3D primitives. We'll import primitives like <Sphere/>, <Box/>, <Cylinder/>, and <Plane/> and explore how they can positioned in a three dimensional space.

We'll also check out some of their properties that let us change their size and polygon counts. However we are not limited to simply changing their geometry! We'll see how we can change material and texture options as well.

react tutorial about Build 3D Panorama Scenes Using the Pano Component in React VR

Build 3D Panorama Scenes Using the Pano Component in React VR

3:48 react

A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes.

We'll learn how to load in panoramas which are equirectangular images, and we'll also learn how to cubemap multiple images. We'll also learn about passing event and style properties to <Pano/>.

react tutorial about Write Text Using the Text Component in React VR

Write Text Using the Text Component in React VR

2:50 react PRO

To annotate or describe elements in a VR scene we can leverage the built-in <Text/> component. In this lesson we'll place multiple <Text/> entries in a scene.

We'll also explore its various style options, such as changing its color and position in your scene.

react tutorial about Start a Virtual Reality Project Using the React VR CLI

Start a Virtual Reality Project Using the React VR CLI

1:53 react

We will learn how to set up a React VR project, run the development mode with hot reloading, and take a small dive into the generated code and make a small change.

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

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

1:09 react

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

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

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

1:15 react

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

react tutorial about Filter State Data in Redux with a Selector Function and React Router

Filter State Data in Redux with a Selector Function and React Router

4:22 react PRO

In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the ownProps parameter of mapStateToProps.

react tutorial about Configure a React & Redux Application For Production Deployment and Deploy to Now

Configure a React & Redux Application For Production Deployment and Deploy to Now

6:27 react PRO

In this lesson, we’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the now service. Once properly configured, we’ll use the now CLI and publish our application to a production server.

react tutorial about Delete Existing Records on The Server with Redux Thunk and Fetch

Delete Existing Records on The Server with Redux Thunk and Fetch

6:14 react PRO

We’ll use fetch and an async action creator to send a DELETE request to the server and update the UI by removing the deleted item and displaying a success message once the save has completed successfully.

react tutorial about Dispatch Asynchronous Actions with Redux Thunk Middleware

Dispatch Asynchronous Actions with Redux Thunk Middleware

8:29 react PRO

In this lesson, we’ll be retrieving data from the server as well as posting new data to the server using fetch. We’ll make this work with Redux using the Thunk Middleware which will allow us to dispatch asynchronous actions.

react tutorial about Add React Router to a Redux Application

Add React Router to a Redux Application

2:50 react PRO

In this lesson, we’ll install React Router as a project dependency and add links that will update the url via pushState to avoid reloading our page on changes.

react tutorial about Update Existing Records on The Server with Redux Thunk and Fetch

Update Existing Records on The Server with Redux Thunk and Fetch

7:44 react PRO

We’ll use fetch and an async action creator to save updated data to the server and update the UI with the result of the update and a success message once the save has completed successfully.

react tutorial about Respond to a Single Redux Action in Multiple Reducers

Respond to a Single Redux Action in Multiple Reducers

3:09 react PRO

Every dispatched action in Redux is sent to all reducers. This means a single action can be handled in different ways by different reducers. In this lesson we’ll look at how this can be used to handle updates in multiple parts of our state tree in response to a single action.

react tutorial about Use Multiple Reducers in Redux with combineReducers

Use Multiple Reducers in Redux with combineReducers

6:21 react PRO

In this lesson we’ll add a new reducer to our application and combine it with the existing reducer. We’ll use the new reducer to display messages in our application. Because we are essentially creating namespaces within our state with multiple reducers we will need to combine them to create our Redux store. To do this we will need to refactor our existing components connections to the store to get back to a working state.

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