Beginning React

Introduction and Demo

To begin, let’s take a look at the structure of a “Create React App” and build the obligatory counter example to get our feet wet.

A Better Development Experience

Next, we’ll install some tools to improve our development experience a bit when working with React.

Make Use of State

Let’s have a look at leveraging state in React using hooks. We’ll also briefly review how it’s done using class-based components.

Event Listeners

Next, we’ll learn how to leverage events and event listeners in React. In the process, we’ll implement the adding and removing functionality for our todo app.

Editing Todos

In this episode, we continue to build out our todo app and work on completing and editing todos. We’ll continue to make use of new events, as well as conditional rendering in JSX.

Extracting Components

In this lesson, we extract multiple components and learn how to pass state between them using props. We also take a look at the prop-types library to validate our props.

More Todo Features

Let’s continue adding more todo features as new components in our application.

Other Built-in React Hooks

Let’s have a look at some more React hooks that are available to you, including useRef, useEffect, and useMemo.

Custom Hooks

Let’s now review a few examples that make use of custom hooks to extract and clean up repeated logic.

Context for State Management

Next, we’ll use the Context API to provide global state to our application. This removes the need to pass props between components to manage state and can significantly clean up our code.

CSS Transitions with React Transition Group

A few subtle transitions in your app can go a long way. Let’s take a look at how to accomplish this using React Transition Group.

React Router

Let’s take a look at basic routing with React Router. In this video, we’ll add a few pages to our application and learn how to create routes and link between them.

Fetching Data

Fetching data from an external server is something you’re going to have to do when building web apps. In this video, we’ll take a look at doing it the traditional way with basic state and the useEffect hook.

Fetching Data with Custom Hooks

Let’s expand upon the code we wrote in the previous video and clean it up using custom hooks.

Fetching Data with React Query

Let’s review the extremely popular React Query library to fetch our data. We’ll discuss caching, error retrying, and background fetching.

GitHub Issues Project: Part 1

Let’s reach for all the React knowledge we’ve learned so far to build a slimmed-down version of GitHub Issues that makes use of the GitHub REST API to fetch data.

GitHub Issues Project: Part 2

Let’s finish up this mini-project and work on the details page to grab details about the issue as well as all of its comments.

React With Laravel

Let’s finish up this series by taking a look at a few ways to use React within a Laravel project.

Conclusion

Let’s wrap up by exploring some other interesting and useful topics in React’s massive ecosystem. Thanks so much for joining me!