Browse all React lessons.

showing All 425 lessons...

Use Multiple Reducers in Redux with combineReducers

P

Configure and Use Redux Dev Tools

P

Create a React Component to Display Status Messages

P

Save New Records on The Server with Redux Thunk and Fetch

P

Use mapDispatchToProps Shorthand Syntax in Redux

P

Setup a Mock API Server with the json-server npm module

P

Create Redux Dispatch Functions From Action Creators with bindActionCreators

P

Connect Redux to Individual React Components For More Efficient Rendering

P

Handle Actions in Redux with mapDispatchToProps

P

Keep UI and State Synchronized Using Controlled Components in React with Redux

P

Create a Redux Store

P

Connect Redux to a React Application with react-redux

P

Make Dispatching Redux Actions More Reliable With Action Creators

P

Render React UI Based on State Changes with Subscribe in Redux

P

Refactor JSX in React to Stateless Functional Components

P

Create a Redux-Style Reducer Function

P

Render in React Based on a Global State Object

P

Render a React UI with JSX

Bootstrap a React Application with Yarn & Create React App

Error Handling using Error Boundaries in React 16

Theme your application with styled-components and "ThemeProvider"

Update React Component State Based on External DOM Events

P

Style the body element with styled-components and "injectGlobal"

Style a React component with styled-components

P

Use a react-intl Higher Order Component to format messages and get current locale

P

Write tests for react-intl output using enzyme and Jest

P

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

P

Use Redux Dev-Tools with Preact

P

Integrate react-router with Preact

P

Integrate Redux with Preact

P

Configure Webpack 2 and Babel for use with Preact

Define Stateful Components in Preact

P

Use Link State to Automatically Handle State Changes

P

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

P

Install Development Tools for Preact

Use State and Props in the Component Render Function

P

Create a Hello World App with Preact

P
redux tutorial about Use Multiple Reducers in Redux with combineReducers

Use Multiple Reducers in Redux with combineReducers

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

redux tutorial about Configure and Use Redux Dev Tools

Configure and Use Redux Dev Tools

4:13 redux PRO

One way data flow, pure reducers for updates and a global state object make unit testing and think about code much easier than the alternatives. With the tooling this makes possible, debugging can be a pleasant experience too. In this lesson, we’ll configure Redux Dev Tools for Chrome and take a tour of some of the features it offers to make debugging state in Redux a pleasure, such as Time Travel Debugging and the ability to export your state history or import state history from another session.

react tutorial about Create a React Component to Display Status Messages

Create a React Component to Display Status Messages

2:35 react PRO

In this lesson we’ll add a new stateless functional component to our application, update our CSS and verify that our message component is rendered only when there is a message to display.

redux tutorial about Save New Records on The Server with Redux Thunk and Fetch

Save New Records on The Server with Redux Thunk and Fetch

6:38 redux 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 once the save has completed successfully.

redux tutorial about Use mapDispatchToProps Shorthand Syntax in Redux

Use mapDispatchToProps Shorthand Syntax in Redux

1:42 redux PRO

In this lesson we’ll take a mapDispatchToProps function and refactor it to use the available shorthand syntax to tidy our code up a bit.

redux tutorial about Setup a Mock API Server with the json-server npm module

Setup a Mock API Server with the json-server npm module

1:35 redux PRO

In this lesson we’ll install json-server as a dependency of our project so we can explore making API calls in a Redux-friendly way. We’ll update the scripts in package.json to allow us to run the server and verify it is responding by issuing a curl command.

redux tutorial about Create Redux Dispatch Functions From Action Creators with bindActionCreators

Create Redux Dispatch Functions From Action Creators with bindActionCreators

2:10 redux PRO

In this lesson we’ll look at the bindActionCreators helper method provided by Redux to eliminate some boilerplate code in our React application. Currently we have a function that takes in a value and calls an action creator. This pattern is extremely common in Redux and we will see how bindActionCreators can help us cut down on some bloat.

redux tutorial about Connect Redux to Individual React Components For More Efficient Rendering

Connect Redux to Individual React Components For More Efficient Rendering

6:59 redux PRO

A connected component will re-render whenever there is a state change. While we want state changes to update our UI, we don’t necessarily want every state change to render every UI component. In this lesson, we’ll use the connect function to connect components to their own specific pieces of the state tree to make our rendering more efficient.

redux tutorial about Handle Actions in Redux with mapDispatchToProps

Handle Actions in Redux with mapDispatchToProps

2:37 redux PRO

We need to get our dispatch functions into our components in order to respond to events in Redux. Connect’s second argument is a function called mapDispatchToProps and it does exactly what the name implies. In this lesson, we’ll use this function to get our dispatch functions into our components via props and refactor to use these functions accordingly.

redux tutorial about Keep UI and State Synchronized Using Controlled Components in React with Redux

Keep UI and State Synchronized Using Controlled Components in React with Redux

6:45 redux PRO

We’ll make the input field a “controlled component” by reacting to each change of the input and dispatching an action to the Redux store. Following this model gives us assurance that the UI is always a representation of the current application state.

redux tutorial about Create a Redux Store

Create a Redux Store

2:23 redux PRO

The redux store is the glue that holds this state management structure together. In this lesson we’ll use the redux library to create a store with the createStore function and then refactor our existing code to pass state into the app using the store’s getStore method.

redux tutorial about Connect Redux to a React Application with react-redux

Connect Redux to a React Application with react-redux

4:08 redux PRO

In this lesson, we’ll see how we can eliminate some of our plumbing code and take advantage of the react-redux library to connect our Redux store to our React application and let it handle subscribing to state changes in the store.

redux tutorial about Make Dispatching Redux Actions More Reliable With Action Creators

Make Dispatching Redux Actions More Reliable With Action Creators

3:16 redux PRO

Dispatching actions is how our application sends information to Redux in order to update state. While we could build our action objects inline and use strings for action names, this can be tedious and error prone. In this lesson, we’ll see how the use of constants and action creator functions will make dispatching actions easier and more reliable.

redux tutorial about Render React UI Based on State Changes with Subscribe in Redux

Render React UI Based on State Changes with Subscribe in Redux

2:07 redux PRO

The Redux store exposes a subscription mechanism, allowing us to detect state updates. In this lesson, we’ll take advantage of this by rendering our UI in response to state changes. We’ll also get our first look at the dispatch method that will be used to trigger those updates.

redux tutorial about Refactor JSX in React to Stateless Functional Components

Refactor JSX in React to Stateless Functional Components

5:18 redux PRO

We’ll refactor our existing code and break the pieces of the application into their own stateless functional components. We’ll use these components to build up our UI. We’ll also see how we can use ES6 destructuring syntax to accept just the keys we need from props to keep our JSX clean.

redux tutorial about Create a Redux-Style Reducer Function

Create a Redux-Style Reducer Function

5:23 redux PRO

The reducer is at the center of how Redux manages state. In this lesson we’ll create a reducer function and see how Redux takes in state and actions and returns updated state. We’ll write and run unit tests using Jest to verify that our reducer function is working as expected.

redux tutorial about Render in React Based on a Global State Object

Render in React Based on a Global State Object

3:02 redux PRO

We’ll define a simple state object in the entry point of our application. Once the state has been defined, we’ll pass it into our root component as props and replace the static elements in our rendered output with values from the component’s props. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

redux tutorial about Render a React UI with JSX

Render a React UI with JSX

2:25 redux

Often times when starting an application, it can be beneficial to render out a static layout to get an idea of what we will be building. Doing this allows us to see exactly how we are going to split our application into individual components. We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.

redux tutorial about Bootstrap a React Application with Yarn & Create React App

Bootstrap a React Application with Yarn & Create React App

2:18 redux

In this lesson we’ll bootstrap and React application using Yarn and Create React App through the yarn create command.

react tutorial about Error Handling using Error Boundaries in React 16

Error Handling using Error Boundaries in React 16

6:01 react

A JavaScript error in the UI shouldn’t break the whole application. To solve this problem React 16 introduced the new concept of an error boundary.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree.

In this lesson we'll create an error boundary. We can use the new lifecycle hook componentDidCatch to handle any errors that the components we wrap throw at us, without unmounting our entire app!

react tutorial about Theme your application with styled-components and "ThemeProvider"

Theme your application with styled-components and "ThemeProvider"

1:17 react

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

react tutorial about Update React Component State Based on External DOM Events

Update React Component State Based on External DOM Events

5:09 react PRO

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, this isn't enough. In this lesson, we'll rely on lifecycle hooks and good old fashioned DOM events to update state in a React component in response to an event that occurs outside of the component tree.

react tutorial about Style the body element with styled-components and "injectGlobal"

Style the body element with styled-components and "injectGlobal"

0:52 react

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

react tutorial about Style a React component with styled-components

Style a React component with styled-components

3:04 react PRO

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 power of JavaScript.

react tutorial about Use a react-intl Higher Order Component to format messages and get current locale

Use a react-intl Higher Order Component to format messages and get current locale

3:32 react PRO

In some cases, you might need to pass a string from your intl messages.js file as a prop to a component. Instead of using react-intl components (which generate markup), we’ll use the injectIntl higher order component provided by react-intl. This will provide just the string we’re looking for, make the prop simpler, and avoid creating unnecessary DOM elements.

We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.

react tutorial about Write tests for react-intl output using enzyme and Jest

Write tests for react-intl output using enzyme and Jest

7:30 react PRO

In this lesson, we’ll look at writing test assertions for react-intl output. We'll add the necessary dependencies, then we’ll use Jest snapshots to get assertions written quickly. Then, we’ll use enzyme API methods to traverse the DOM and write assertions about specific pieces of react-intl data.

Note: This lesson uses a modified version of an "intl-enzyme" helper utility from the react-intl documentation. You can find the modified file here.

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-native 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-native 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-native tutorial about Create a Responsive Animated Progress Bar in React Native

Create a Responsive Animated Progress Bar in React Native

9:24 react-native 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 PRO

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

redux tutorial about Use Redux Dev-Tools with Preact

Use Redux Dev-Tools with Preact

1:41 redux PRO

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 PRO

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

redux tutorial about Integrate Redux with Preact

Integrate Redux with Preact

6:23 redux PRO

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 PRO

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 PRO

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 PRO

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 PRO

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 PRO

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.

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