Browse all React lessons.

showing All 349 lessons...

Render Content Based on a Number using react-intl FormattedMessage

P

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

P

Format Date and Time Using react-intl FormattedDate and FormattedTime

P

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

P

Format a Date Relative to the Current Date Using react-intl FormattedRelative

P

Render Content with Markup Using react-intl FormattedHTMLMessage

P

Render Content with Placeholders using react-intl FormattedMessage

P

Convert a Hard Coded String using react-intl FormattedMessage

Install and Configure the Entry Point of react-intl

Create Animated Map Markers Linked to Scrolling Content in React Native

P

Create a Reusable Scroll View Component with Animated scrollTo in React

P

Create a Responsive Animated Progress Bar in React Native

P

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

P

Handle Simple Routing with preact-router

Use Redux Dev-Tools with Preact

Integrate react-router with Preact

Integrate Redux with Preact

Configure Webpack 2 and Babel for use with Preact

Define Stateful Components in Preact

Use Link State to Automatically Handle State Changes

Reduce the Size of a React App in Two Lines with preact-compat:

Install Development Tools for Preact

Use State and Props in the Component Render Function

Create a Hello World App with Preact

Define Functional Components in Preact

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
react tutorial about Render Content Based on a Number using react-intl FormattedMessage

Render Content Based on a Number using react-intl FormattedMessage

3:36 react PRO

Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop.

You’ll also learn the syntax necessary to render strings using a plural string matcher.

react tutorial about Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

3:10 react PRO

Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationalization API, which react-intl depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack require.ensure.
This ensures only browsers that need the polyfill incur the extra load.

react tutorial about Format Date and Time Using react-intl FormattedDate and FormattedTime

Format Date and Time Using react-intl FormattedDate and FormattedTime

2:21 react PRO

Using the react-intl FormattedDate and FormattedTime components, we’ll render a JavaScript Date into both a date string and a time string in different language formats.

react tutorial about Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber

2:28 react PRO

Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in order to render the correct separator and currency symbols for different languages.

react tutorial about Format a Date Relative to the Current Date Using react-intl FormattedRelative

Format a Date Relative to the Current Date Using react-intl FormattedRelative

2:11 react PRO

Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human readable format, such as “2 days ago”, in various languages.

We'll also see how to set the frequency of this component's rendering to make our app update the text in real-time.

react tutorial about Render Content with Markup Using react-intl FormattedHTMLMessage

Render Content with Markup Using react-intl FormattedHTMLMessage

1:20 react PRO

In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.

Note: FormattedHTMLMessage should be used sparingly because react-intl cannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use a FormattedMessage component instead, and wrap that component with HTML markup.

react tutorial about Render Content with Placeholders using react-intl FormattedMessage

Render Content with Placeholders using react-intl FormattedMessage

3:35 react PRO

Learn how to use react-intl to set dynamic values into your language messages.
We’ll also learn how to pass in those values by using a values prop in the react-intl FormattedMessage component.

We'll also take a look at how to pass values with markup and still get all the benefits of translation.

react tutorial about Convert a Hard Coded String using react-intl FormattedMessage

Convert a Hard Coded String using react-intl FormattedMessage

4:11 react

In this lesson, we’ll replace hard coded strings with text from the user’s locale data, using the react-intl FormattedMessage component.

We'll also discuss the structure of the messages file, as well as use this utility from the react-intl documentation in order to keep our messages structured nicely.

react tutorial about Install and Configure the Entry Point of react-intl

Install and Configure the Entry Point of react-intl

4:21 react

We’ll install react-intl, then add it to the mounting point of our React app.

Then, we’ll use react-intl helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.

We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

react tutorial about Create Animated Map Markers Linked to Scrolling Content in React Native

Create Animated Map Markers Linked to Scrolling Content in React Native

12:15 react PRO

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 an item is scrolled to the map will automatically animate and center the map at the markers coordinates.

This will be built with a single Animated.Value and heavy use of interpolate along with extrapolate: "clamp" to lock our outputRange values.

react tutorial about Create a Reusable Scroll View Component with Animated scrollTo in React

Create a Reusable Scroll View Component with Animated scrollTo in React

8:44 react PRO

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 scrollTo function our ScrollView that allows for applications to animate a scroll to hidden list items.

react tutorial about Create a Responsive Animated Progress Bar in React Native

Create a Responsive Animated Progress Bar in React Native

9:24 react PRO

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 showing how to add animation to make the progress indicator smoothly transition.

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

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

3:01 react PRO

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 dynamically sized rows.

react tutorial about Handle Simple Routing with preact-router

Handle Simple Routing with preact-router

6:35 react

Some applications only need a very minimal routing solution. This lesson will cover a practical example showing the router in use. We’ll build a simple search feature that accepts user input and then calls the github API. We’ll see how to access route parameters, how to manually & automatically navigate around, and finally how to handle un-matched path. https://github.com/developit/preact-router

react tutorial about Use Redux Dev-Tools with Preact

Use Redux Dev-Tools with Preact

1:41 react

Preact and Redux is a great combination, made even more so by the amazing dev tools extension that can be installed into both Chrome and Firefox. In this lesson we’ll see how to enable it and how it works seamlessly with Preact.
https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

react tutorial about Integrate react-router with Preact

Integrate react-router with Preact

6:43 react

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

react tutorial about Integrate Redux with Preact

Integrate Redux with Preact

6:23 react

Redux is one of the most popular state-management libraries and although not specific to React, it is widely used with it. This is why the author of Preact has released a package called preact-redux, which is a simple wrapper around the main react-redux package that enables it to be used in a Preact application without any other changes to your codebase. In this lesson we refactor a stateful component to use Redux + Redux-thunk. https://github.com/developit/preact-redux

react tutorial about Configure Webpack 2 and Babel for use with Preact

Configure Webpack 2 and Babel for use with Preact

5:44 react

In this lesson we will create a ‘webpack.config.js’ file from scratch. Along the way we’ll learn about the entry point, how to specify output, how to configure loaders, the Preact-specific parts of the Babel configuration, and finally how to use the ‘webpack-dev-server’ via a script in the ‘package.json’ file

react tutorial about Define Stateful Components in Preact

Define Stateful Components in Preact

6:13 react

When dealing with Components, there’s often the need to either have some local state controlled by the component (such as form input fields) or to tap into the lifecycle events of the component. In this lesson we’ll give some practical examples of both.

react tutorial about Use Link State to Automatically Handle State Changes

Use Link State to Automatically Handle State Changes

5:25 react

Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’

react tutorial about  Reduce the Size of a React App in Two Lines with preact-compat:

Reduce the Size of a React App in Two Lines with preact-compat:

4:03 react

Not every app is greenfield, and it would be a shame if existing React apps could not benefit from the micro-size of Preact. In this lesson we’ll discuss what preact-compat is, how to use it, and some examples of the file-size savings available. https://github.com/developit/preact-compat

react tutorial about Install Development Tools for Preact

Install Development Tools for Preact

3:24 react

Although technically you can run Preact without any tools or pre-compiling, we’ll get a much better development experience by using modern versions of Javascript along with JSX. To achieve this, we'll be installing babel-core along with babel-preset-env. This combination will provide us with a set of plugins suitable for transpiling our code for use in modern browsers. It doesn't include support for JSX however, so we'll add the babel-plugin-transform-react-jsx plugin to handle that part. Along with creating a Javascript file that can be executed in the browser, we also want to preview our work each time we change a file - so we install Webpack and the Webpack Dev Server to handle both of those tasks. The final dependency we install is babel-loader which will allow the source files being accessed by Webpack to first be processed by Babel and the plugins we specified.

react tutorial about Use State and Props in the Component Render Function

Use State and Props in the Component Render Function

2:00 react

Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

react tutorial about Create a Hello World App with Preact

Create a Hello World App with Preact

4:57 react

By creating a simple ‘hello world’ example application first in vanilla Javascript, and then in Preact without any tools, we’ll learn what type of problems Preact is solving for us and how is works at a low level. Then we’ll switch to a Webpack + Babel setup we’ll cover some fundamental concepts such as, which imports we need, how to create a component, how to use JSX and finally how to render our component into a target element in a web page.

react tutorial about Define Functional Components in Preact

Define Functional Components in Preact

4:31 react

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 tutorial about Disable and Ignore Yellow Box Warnings in React Native

Disable and Ignore Yellow Box Warnings in React Native

2:04 react 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.

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