Browse all React lessons.

showing All 440 lessons...

Make HTTP Requests with React

Make Dynamic Forms with React

Stop Memory Leaks with componentWillUnmount Lifecycle Method in React

Style React Components

Manipulate the DOM with React refs

Use the key prop when Rendering a List with React

Make Basic Forms with React

Use Component State with React

Use Event Handlers with React

Validate Custom React Component Props with PropTypes

Conditionally Render A React Component

Create Custom React Components

Write Hello World with raw React APIs

Write CSS in JS with glamorous

P

Why use TypeScript with React

Use glamorous with existing CSS

P

Install glamorous to start styling React components

P

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
react tutorial about Make HTTP Requests with React

Make HTTP Requests with React

3:29 react

Often to get user data you'll make an AJAX request using axios or the fetch API. In this lesson we'll get a GitHub user's company using GitHub's GraphQL API using React's componentDidMount lifecycle method.

react tutorial about Make Dynamic Forms with React

Make Dynamic Forms with React

3:42 react

Let's talk about how to use the onChange prop on an input to do dynamic and custom validation of a form as the user makes changes to the input.

react tutorial about Stop Memory Leaks with componentWillUnmount Lifecycle Method in React

Stop Memory Leaks with componentWillUnmount Lifecycle Method in React

1:14 react

In this lesson we'll take a stopwatch component we built in another lesson and identify and fix a memory leak.

react tutorial about Style React Components

Style React Components

5:36 react

In this lesson we'll learn about how you can style react components using the style prop and className prop. We'll create a component that composes these props together nicely and talk about some of the shortcomings of these as well.

react tutorial about Manipulate the DOM with React refs

Manipulate the DOM with React refs

2:23 react

Often you'll find there's a jQuery plugin or JavaScript library which needs access to DOM nodes to work in your application. Other times you need access to the DOM node directly to get the value of form fields or for other reasons. In this lesson we'll learn how to do this using React's ref prop.

react tutorial about Use the key prop when Rendering a List with React

Use the key prop when Rendering a List with React

4:29 react

In this lesson we're reminded that JSX is simply JavaScript and to render a list you can use the array method .map to map an array to React elements. However, if you don't use the key prop correctly, it can lead to unexpected results, so we explore what can happen and how to use the key prop correctly.

react tutorial about Make Basic Forms with React

Make Basic Forms with React

3:35 react

In this lesson we'll take a look at how to make a basic form with React. We'll see how to use the onSubmit event to prevent the default submit behavior of forms with React and then how to use that event to get the values from the form. We'll also see how you can use the React ref prop to get the value of form elements as well.

react tutorial about Use Component State with React

Use Component State with React

7:09 react

In this lesson we'll build a stopwatch component that maintains its own state. We'll start by creating the static UI, then take the dynamic parts and accept them as props. After that we'll refactor that to state and add event handlers to update the state.

react tutorial about Use Event Handlers with React

Use Event Handlers with React

3:42 react

In this lesson we'll learn about React's synthetic event system which allows React to use the same event system regardless of the platform (whether you're using react-native or react-dom for example). We'll see how you attach events directly to elements and React takes care of event delegation and optimization for you.

react tutorial about Validate Custom React Component Props with PropTypes

Validate Custom React Component Props with PropTypes

3:30 react

In this lesson we'll learn about how you can use the prop-types module to validate a custom React component's props.

react tutorial about Conditionally Render A React Component

Conditionally Render A React Component

2:43 react

In this lesson we explore JSX a little further and solidify in our minds that JSX is simply syntax sugar on top of a fairly simple React API: React.createElement

react tutorial about Create Custom React Components

Create Custom React Components

5:15 react

Just like in regular JavaScript, when you want to reuse code, you create a function. With React, you create components. In this lesson we'll walk through the process of creating custom React components and you'll walk away with a deep understanding of how to create and use basic components to compose a larger component you render.

react tutorial about Write Hello World with raw React APIs

Write Hello World with raw React APIs

3:24 react

In this lesson we'll learn how to use raw React APIs to create the most basic Hello World example. React defines it’s own createElement function that we will see works similar to document.createElement. And in place of appendChild we will use ReactDOM's render function.

We'll also learn a little bit about React props and the children prop.

glamorous tutorial about Write CSS in JS with glamorous

Write CSS in JS with glamorous

8:16 glamorous PRO

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

react tutorial about Why use TypeScript with React

Why use TypeScript with React

2:53 react

You get excellent developer experience when using TypeScript with React. This is better when compared to many other frameworks that work off of simple template strings because JSX is embedded within TypeScript.

In this lesson we give a demonstration of the some of the powerful refactorings and type checks enabled by using TypeScript with React.

egghead tutorial about Use glamorous with existing CSS

Use glamorous with existing CSS

5:09 egghead PRO

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

egghead tutorial about Install glamorous to start styling React components

Install glamorous to start styling React components

1:43 egghead PRO

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-native tutorial about Create Custom Controls for React Native Video

Create Custom Controls for React Native Video

9:28 react-native 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-native 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-native 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-native tutorial about Create a Looping Background Video with React Native Video

Create a Looping Background Video with React Native Video

2:51 react-native 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-native 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-native 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-native 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-native 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-native tutorial about Setup React Native Video for iOS and Android

Setup React Native Video for iOS and Android

0:54 react-native

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

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!

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

Use tests to verify updates to the Redux store

7:20 redux 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.

redux tutorial about Handle network errors gracefully

Handle network errors gracefully

7:38 redux 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.

redux tutorial about Filter a stream to exclude empty values

Filter a stream to exclude empty values

6:48 redux 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.

redux tutorial about Debounce user input to avoid repeated Ajax requests

Debounce user input to avoid repeated Ajax requests

8:03 redux 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.

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

Use actions to modify the state of the Redux store

5:37 redux

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.

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

redux tutorial about Use redux-observable for simple Ajax requests

Use redux-observable for simple Ajax requests

6:37 redux 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.

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

Debug redux-observable with redux dev-tools

1:37 redux 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

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

Add redux-observable to an existing Redux project

6:49 redux 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.

redux tutorial about Add Redux to a React application

Add Redux to a React application

4:20 redux

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.

react tutorial about Render Multiple Elements without a Wrapping Element in a Component in React 16

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.

react tutorial about Process Images in React with react-imgpro

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

redux tutorial about Compose Redux Higher Order Reducers

Compose Redux Higher Order Reducers

4:34 redux 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.

redux tutorial about Understand Redux Higher Order Reducers

Understand Redux Higher Order Reducers

3:44 redux 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.

react tutorial about Render Markdown using React with React-Remarkable

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.

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