Browse all React lessons.

showing All 425 lessons...

Define Functional Components in Preact

P

Create an Auto Resizing Virtualized List with react-virtualized

P

Use React.cloneElement to Modify and Add Additional Properties to React Children

P

Convert Imperative Code to a Declarative React Component

P

Disable and Ignore Yellow Box Warnings in React Native

P

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

P

React Playground Styled for Component Docs

P

Optimize Component Rendering using Recompose

P

Learn How Recompose Optimizes Higher Order Components

P

Optimize Expensive Computations in Recompose

P

Show Error Messages based on Non-Optimal States with Recompose

P

Set the HTML Tag of a Component via a Prop using Recompose

P

Render Components Based on Predicates in Recompose

P

Show a Spinner While a Component is Loading using Recompose

P

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

P

Flatten a Prop using Recompose

P

Lock Props by using the Recompose withProps Higher Order Component

P

Transform Props by using the Recompose mapProps Higher Order Component

P

Compose Multiple Higher Order Components Together using Recompose

P

Add Local State to a Functional Stateless Component using Recompose

P

Add Local State with Redux-like Reducers using Recompose

P

Write a Higher Order Component from Scratch

P

Bootstrap a Zero Configuration React App with Neutrino

P

Build a Collapsible React Native Header Bar

P

Create an Expanding Notify Input with Success Message in React Native

P

Use React Native to Animate a Swipe Away Comment Modal

P

Toggle Hidden Details on a React Native Event Card

P

Animate a React Native Information Callout View

P

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

P

Create a Tap to Show Love React Native Animation

P

Create An Exploding Heart Button in React Native

P

Create a Horizontal Parallax ScrollView in React Native

P

Bounce a Heart Shaped Button in React Native on Press

P

Update State in React with Ramda's Evolve

P

Update Component State in React With Ramda Lenses

P

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

P

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

P

Understand the Difference Between the React Router v4 Router Types

P

Redirect to Another Page with React Router v4

P

Intercept Route Changes with React Router v4 Prompt Component

P

Render Nested Routes with React Router v4

P

Render Multiple Components for the Same Route in React Router v4

P

Conditionally Render a React Router v4 Route with the Switch Component

P

Create Basic Routes with the React Router v4 BrowserRouter

Use URL Parameters with React Router v4

P

Use Regular Expressions with Routes with React Router v4

P

Parse Query Parameters in React Router v4

P

Use the React Router v4 Link Component for Navigation Between Routes

P

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

P

Run the React Router v4 Examples with Create React App

react tutorial about Define Functional Components in Preact

Define Functional Components in Preact

4:31 react PRO

Many components within an application can be rendered using only data that is ‘passed’ to them by a parent. We call these “Functional Components” as they do not contain any internal state. In this lesson we look at how to define these types of components and how to pass data to them.

react tutorial about Create an Auto Resizing Virtualized List with react-virtualized

Create an Auto Resizing Virtualized List with react-virtualized

4:35 react PRO

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 of data as a virtualized list into the DOM using windowing.

react tutorial about Use React.cloneElement to Modify and Add Additional Properties to React Children

Use React.cloneElement to Modify and Add Additional Properties to React Children

2:58 react PRO

In this lesson we'll show how to use React.cloneElement to add additional properties to the children of a React element. We'll also show that you can add additional properties not declared on the element.

react tutorial about Convert Imperative Code to a Declarative React Component

Convert Imperative Code to a Declarative React Component

4:45 react PRO

In this lesson we'll show how to take a beforeUnload call and convert it to a declarative React Component. It will handle subscribing to events, and automatically unsubscribing to prevent memory leaks.

react-native tutorial about Disable and Ignore Yellow Box Warnings in React Native

Disable and Ignore Yellow Box Warnings in React Native

2:04 react-native PRO

Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disable the yellow box entirely. We'll also use console.ignoredYellowBox to selectively disabled warnings.

react tutorial about Cleanly Map Over A Stateless Functional Component with a Higher Order Component

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

4:46 react PRO

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the key prop on the component for us based on the property name that we specify.

react tutorial about React Playground Styled for Component Docs

React Playground Styled for Component Docs

6:27 react PRO

React Playground Styled is a responsive playground that can be configured with styled-components. It is built for documenting React components in the minimum space possible. You will normally wrap it in your own component to provide sensible defaults that make it blend with the look and feel your style guide.

react tutorial about Optimize Component Rendering using Recompose

Optimize Component Rendering using Recompose

6:14 react PRO

Learn how and when to use the ‘pure’, ‘onlyUpdateForKeys’,
‘onlyUpdateForPropTypes’, and ‘shouldUpdate’ higher order components.
Each one provides a certain granularity of control over prevent
unnecessary renders. Learn how they build upon each other to provide
different options.

react tutorial about Learn How Recompose Optimizes Higher Order Components

Learn How Recompose Optimizes Higher Order Components

3:36 react PRO

Learn about optimizations (like component squashing) that Recompose uses behind the scenes. More reading on Performance.

react tutorial about Optimize Expensive Computations in Recompose

Optimize Expensive Computations in Recompose

1:33 react PRO

Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props.

react tutorial about Show Error Messages based on Non-Optimal States with Recompose

Show Error Messages based on Non-Optimal States with Recompose

4:34 react PRO

Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

react tutorial about Set the HTML Tag of a Component via a Prop using Recompose

Set the HTML Tag of a Component via a Prop using Recompose

2:33 react PRO

Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output. An example is swapping an for a or even a react router depending on circumstance.

react tutorial about Render Components Based on Predicates in Recompose

Render Components Based on Predicates in Recompose

1:43 react PRO

Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.

react tutorial about Show a Spinner While a Component is Loading using Recompose

Show a Spinner While a Component is Loading using Recompose

2:48 react PRO

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

react tutorial about Add Lifecycle Hooks to a Functional Stateless Component using Recompose

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

2:56 react PRO

Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component.

react tutorial about Flatten a Prop using Recompose

Flatten a Prop using Recompose

1:10 react PRO

Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.

react tutorial about Lock Props by using the Recompose withProps Higher Order Component

Lock Props by using the Recompose withProps Higher Order Component

2:32 react PRO

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

react tutorial about Transform Props by using the Recompose mapProps Higher Order Component

Transform Props by using the Recompose mapProps Higher Order Component

2:49 react PRO

Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.

react tutorial about Compose Multiple Higher Order Components Together using Recompose

Compose Multiple Higher Order Components Together using Recompose

3:46 react PRO

Learn how to use the 'compose' function to mix together HOCs, even ones from other libraries like 'connect' from redux.

react tutorial about Add Local State to a Functional Stateless Component using Recompose

Add Local State to a Functional Stateless Component using Recompose

6:21 react PRO

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes!

react tutorial about Add Local State with Redux-like Reducers using Recompose

Add Local State with Redux-like Reducers using Recompose

2:36 react PRO

Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state.

react tutorial about Write a Higher Order Component from Scratch

Write a Higher Order Component from Scratch

3:15 react PRO

Learn the proper patterns for writing a higher order component from scratch.

react tutorial about Bootstrap a Zero Configuration React App with Neutrino

Bootstrap a Zero Configuration React App with Neutrino

1:05 react PRO

Setting up tooling for a basic React app is typically very hard to do and requires a lot of configuration. In this lesson, we will setup a new React project with Neutrino with zero configuration. Neutrino uses Webpack and Babel behind the scenes, so you still get great build technology, but without all the heavy lifting of needing to configure it.

react tutorial about Build a Collapsible React Native Header Bar

Build a Collapsible React Native Header Bar

4:27 react PRO

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

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

Create an Expanding Notify Input with Success Message in React Native

7:07 react PRO

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

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

Use React Native to Animate a Swipe Away Comment Modal

8:33 react PRO

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

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

Toggle Hidden Details on a React Native Event Card

4:14 react PRO

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

react-native tutorial about Animate a React Native Information Callout View

Animate a React Native Information Callout View

6:38 react-native PRO

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

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

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

7:43 react PRO

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

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

Create a Tap to Show Love React Native Animation

7:14 react PRO

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

react tutorial about Create An Exploding Heart Button in React Native

Create An Exploding Heart Button in React Native

6:18 react PRO

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

react tutorial about Create a Horizontal Parallax ScrollView in React Native

Create a Horizontal Parallax ScrollView in React Native

9:57 react PRO

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

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

Bounce a Heart Shaped Button in React Native on Press

4:25 react PRO

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

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

Update State in React with Ramda's Evolve

4:29 react PRO

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

react tutorial about Update Component State in React With Ramda Lenses

Update Component State in React With Ramda Lenses

4:37 react PRO

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

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

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

0:55 react-native PRO

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

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

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

Download the Expo Client from App Store or Google Play

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

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

1:24 react PRO

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

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

Understand the Difference Between the React Router v4 Router Types

6:25 react PRO

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

react tutorial about Redirect to Another Page with React Router v4

Redirect to Another Page with React Router v4

3:50 react PRO

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

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

Intercept Route Changes with React Router v4 Prompt Component

2:18 react PRO

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

react tutorial about Render Nested Routes with React Router v4

Render Nested Routes with React Router v4

2:17 react PRO

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

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

Render Multiple Components for the Same Route in React Router v4

2:43 react PRO

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

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

Conditionally Render a React Router v4 Route with the Switch Component

1:15 react PRO

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

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

Create Basic Routes with the React Router v4 BrowserRouter

6:08 react

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

react tutorial about Use URL Parameters with React Router v4

Use URL Parameters with React Router v4

2:36 react PRO

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

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

Use Regular Expressions with Routes with React Router v4

1:52 react PRO

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

react tutorial about Parse Query Parameters in React Router v4

Parse Query Parameters in React Router v4

3:08 react PRO

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

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

Use the React Router v4 Link Component for Navigation Between Routes

2:01 react PRO

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

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

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

3:50 react PRO

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

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

Run the React Router v4 Examples with Create React App

2:15 react

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

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