React

Watch User Created Playlist (18)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Write a Higher Order Component from Scratch

P

Filter State Data in Redux with a Selector Function and React Router

P

Add React Router to a Redux Application

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

Compose Multiple Higher Order Components Together using Recompose

P
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 Filter State Data in Redux with a Selector Function and React Router

Filter State Data in Redux with a Selector Function and React Router

4:22 react PRO

In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the ownProps parameter of mapStateToProps.

react-router tutorial about Add React Router to a Redux Application

Add React Router to a Redux Application

2:50 react-router PRO

In this lesson, we’ll install React Router as a project dependency and add links that will update the url via pushState to avoid reloading our page on changes.

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.

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.

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