Browse all React lessons.

showing All 334 lessons...

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

Build an SVG icon component in React

P

Writing Platform-Specific Components for iOS and Android in React Native

P

Installing and Linking Modules with Native Code in React Native

P

Inspect Component Events with React Storybook

P

Load React Storybook Stories Dynamically

P

Write the First React Storybook Story

P

Add React Storybook to a Project

P

Load Data From a Server with fetch

P

Delete Data on the Server with fetch

P

Update data on the Server with fetch

P

Show Temporary Messages in a React Application

P

Save Data to the Server with fetch

P

Build a Link Component to Navigate to Routes in React

P

Keep Application State in Sync with Browser History

P

Use React Context to Manage Application State Through Routes

P

Update React Application State from Form Input

P

Filter Data on Property Values

P

Create a Pipe Function to Enable Function Composition

P

Pass Data To Event Handlers with Partial Function Application

P

Prevent Empty Form Values with Conditional Submit Handlers

P

Update Data in a List without Mutations

P

Synchronize React UI and State with Controlled Components

P

Remove Items from a List without Mutations

P

Use ES2016 Property Initializer Syntax in ES6 classes

P

Refactor React Components to be Stateless Functional Components

P

Add Data to a List without Mutations

P

Validate Component Input with Prop Types in React

P

Create a Stateless Functional Component for an Input Form

P

Render a React UI Based on Initial State

Render a React UI with JSX

Bootstrap a React Application through the CLI with Create React App

Add Redux State Management to a React on Rails Project

P

Render Basic SVG Components in React

P

Inline Edit Todo Items in a React Native ListView

P

Create the Basic React Native Todo Application Layout

P

Filter Items in the React Native List View

P

Add the Total Remaining Item Count to the Footer with React Native Text

P

Add a Toggle All Complete Button with React Native TouchableOpacity

P

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

P

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

P

Persist Items with React Native AsyncStorage

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

react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react PRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

react tutorial about Writing Platform-Specific Components for iOS and Android in React Native

Writing Platform-Specific Components for iOS and Android in React Native

5:28 react PRO

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

react tutorial about Installing and Linking Modules with Native Code in React Native

Installing and Linking Modules with Native Code in React Native

4:57 react PRO

Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video component using npm install, and then link it with the react-native link command so that our Video component works properly on both iOS and Android.

react tutorial about Inspect Component Events with React Storybook

Inspect Component Events with React Storybook

1:45 react PRO

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

react tutorial about Load React Storybook Stories Dynamically

Load React Storybook Stories Dynamically

3:10 react PRO

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

react tutorial about Write the First React Storybook Story

Write the First React Storybook Story

4:34 react PRO

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

react tutorial about Add React Storybook to a Project

Add React Storybook to a Project

3:35 react PRO

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

react tutorial about Load Data From a Server with fetch

Load Data From a Server with fetch

4:19 react PRO

We’ll fire up json-server so we can run our application against a server. We’ll take advantage of the fetch polyfill provided by create-react-app and leverage the componentDidMount lifecycle event to load our initial todo list. We’ll also add an error message to our UI in the case that the server is unavailable.

react tutorial about Delete Data on the Server with fetch

Delete Data on the Server with fetch

1:35 react PRO

We’ll use fetch to delete items on the server when the client triggers a removal, and update the UI with a success message once the delete operation on the server has succeeded.

react tutorial about Update data on the Server with fetch

Update data on the Server with fetch

3:09 react PRO

We’ll use fetch and refactor our client-side task completion logic to send an update to the server, and update the UI with a success message once the save has completed successfully.

react tutorial about Show Temporary Messages in a React Application

Show Temporary Messages in a React Application

2:41 react PRO

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

react tutorial about Save Data to the Server with fetch

Save Data to the Server with fetch

2:30 react PRO

We’ll cover posting new data to the server using fetch and the POST http method. We’ll also update the UI with a success message once the save has completed successfully.

react tutorial about Build a Link Component to Navigate to Routes in React

Build a Link Component to Navigate to Routes in React

6:32 react PRO

In this lesson, we’ll create a Link component that manipulates the browser’s address bar using the history API’s pushState method.

react tutorial about Keep Application State in Sync with Browser History

Keep Application State in Sync with Browser History

1:43 react PRO

Using pushState and passing route data via context allows our application to respond to route changes made from Link components, but using the back and forward buttons in the browser doesn’t update the application state as we would expect. In this lesson, we’ll add event handling to our Router component to handle history popState events so routing behavior is maintained for the back and forward buttons.

react tutorial about Use React Context to Manage Application State Through Routes

Use React Context to Manage Application State Through Routes

7:51 react PRO

We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.

react tutorial about Update React Application State from Form Input

Update React Application State from Form Input

4:07 react PRO

We’ll add a handler to the form so we can take new input and use it to update the application state. We’ll append new items to the list with the AddTodo function and replace the todos list in state. We’ll also clear out our form so it can accept new todos.

react tutorial about Filter Data on Property Values

Filter Data on Property Values

3:28 react PRO

We want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.

react tutorial about Create a Pipe Function to Enable Function Composition

Create a Pipe Function to Enable Function Composition

7:13 react PRO

In this lesson, we’ll refactor a series of function calls into a functional pipeline, making the code more declarative and removing the need for intermediate variables. Rather than reaching for a utility library, we’ll start by building our own pipe function to gain a clear understanding of how left-to-right function composition is accomplished in JavaScript.

react tutorial about Pass Data To Event Handlers with Partial Function Application

Pass Data To Event Handlers with Partial Function Application

8:39 react PRO

In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to reflect our change. We’ll also create a helper function that allows us to use partial function application to clean up the event handler code and make it more “functional”

react tutorial about Prevent Empty Form Values with Conditional Submit Handlers

Prevent Empty Form Values with Conditional Submit Handlers

5:37 react PRO

We’ll take advantage of the controlled nature of the todo input and the first class nature of javascript functions to dynamically assign the form submission handler. An empty todo will trigger a submission handler that is only concerned with handling an error state, and when the input is valid, the form will use the standard submit handler.

react tutorial about Update Data in a List without Mutations

Update Data in a List without Mutations

7:10 react PRO

We’ll build small, focused functions to select an object from a list, apply updates to an object and replace an item in a list, avoid mutations to those objects along the way by returning new items that reflect our changes. We’ll verify this behavior by following a test driven approach using Jest.

react tutorial about Synchronize React UI and State with Controlled Components

Synchronize React UI and State with Controlled Components

3:41 react PRO

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

react tutorial about Remove Items from a List without Mutations

Remove Items from a List without Mutations

5:31 react PRO

In this lesson, we’ll add the ability to remove items from our list. We’ll add some css to show a delete link while hovered over an item and handle a click event from the component to remove the corresponding item from the list by its id.

react tutorial about Use ES2016 Property Initializer Syntax in ES6 classes

Use ES2016 Property Initializer Syntax in ES6 classes

2:26 react PRO

Create react app provides support for es2016 property initializer syntax out of the box. In this lesson, we’ll refactor the App component to use property initializers and look at the advantages of this syntax.

react tutorial about Refactor React Components to be Stateless Functional Components

Refactor React Components to be Stateless Functional Components

6:42 react PRO

We’ll continue the refactoring effort and break the remaining pieces of the application into their own stateless functional components and see how components can be used within other components.

react tutorial about Add Data to a List without Mutations

Add Data to a List without Mutations

5:17 react PRO

In this lesson, we’ll create a utility function to add items to a list, avoiding mutation by returning a new array. We’ll verify this behavior by creating unit tests with Jest.

react tutorial about Validate Component Input with Prop Types in React

Validate Component Input with Prop Types in React

5:11 react PRO

React gives us a mechanism called PropTypes to ensure that the property values passed into components are of the correct type. By ensuring the correct data is passed to our components, we can avoid potential bugs and more confidently share components with a team or as open source libraries.

react tutorial about Create a Stateless Functional Component for an Input Form

Create a Stateless Functional Component for an Input Form

3:37 react PRO

We’ll refactor our existing code, making the todo form a separate component. We’ll pass values from the App container into the new component via props. We’ll look at the differences between state and props in React and see how state can be passed down to other components as props.

react tutorial about Render a React UI Based on Initial State

Render a React UI Based on Initial State

5:15 react

We’ll define a simple state object in the constructor of the App Component class. Once the state has been defined, we’ll replace the static elements in our rendered output with values from the component’s state. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

react tutorial about Render a React UI with JSX

Render a React UI with JSX

2:48 react

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.

react tutorial about Bootstrap a React Application through the CLI with Create React App

Bootstrap a React Application through the CLI with Create React App

4:19 react

We’ll go from an empty directory to a solid foundation for an application by running a single command. The create-react-app tool handles all of the complicated setup for us so we can focus on building our application.

react tutorial about Add Redux State Management to a React on Rails Project

Add Redux State Management to a React on Rails Project

7:27 react PRO

Learn how to add a simple Redux-backed React component to a new Rails 5 app using React on Rails.

react tutorial about Render Basic SVG Components in React

Render Basic SVG Components in React

1:35 react PRO

React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS.

Creating SVG components with React allows you to inline SVG. Inline SVG has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

An additional advantage is of-course that you can use component props to customize the contents of the SVG.

react tutorial about Inline Edit Todo Items in a React Native ListView

Inline Edit Todo Items in a React Native ListView

6:18 react PRO

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders

react tutorial about Create the Basic React Native Todo Application Layout

Create the Basic React Native Todo Application Layout

2:35 react PRO

In this lesson we'll create the basic application layout with a header, content section, and footer. We'll learn to use StyleSheet to create styles to apply to React Native components.

react tutorial about Filter Items in the React Native List View

Filter Items in the React Native List View

6:44 react PRO

We'll setup 3 buttons (All, Active, Complete) to filter the displayed items based on their completion status. We'll also show how to use flexbox flexDirection row lays out items differently than column.

react tutorial about Add the Total Remaining Item Count to the Footer with React Native Text

Add the Total Remaining Item Count to the Footer with React Native Text

0:40 react PRO

In this lesson we'll add a footer text item to show the total count of what is in the current filtered view. We'll show the technique of deriving computed values in render functions.

react tutorial about Add a Toggle All Complete Button with React Native TouchableOpacity

Add a Toggle All Complete Button with React Native TouchableOpacity

3:43 react PRO

In this lesson we'll add a Toggle All Complete Button next to the Text Input. We'll show off how components without flex layout affect siblings with flex layout properties.

react tutorial about Add a Loading Indicator While Loading Items with React Native ActivityIndicator

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

1:49 react PRO

We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with alignItems and justifyContent set to center.

react tutorial about Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

1:42 react PRO

In this lesson we'll add a button to the footer that will clear all completed items. We'll use TouchableOpacity and we'll examine how flex space-around property works.

react tutorial about Persist Items with React Native AsyncStorage

Persist Items with React Native AsyncStorage

1:06 react PRO

In this lesson we'll use AsyncStorage to save our items so they persist with each reload of the application. We'll show how to use the promise base interface to handle success as well as handle errors.

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