Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Beginning React

React continues to be extremely popular in the front-end world. Whether you’re in the job market or are curious to explore React's massive ecosystem, learning it will help you become a better developer. In this series, we'll review the basics of using React. We’ll learn about JSX, state, events, hooks, extracting components, props, and more.

Updated Series Available

You are viewing an archived course. We instead recommend that you watch React from Scratch.

View Updated Series

Progress

Series Info

Episodes
19
Run Time
5h 27m
Difficulty
Intermediate
Last Updated
Jul 19, 2021
Version
React 17.0.2
Play Series

Series Episodes

  1. Introduction (2)

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

    2. A Better Development Experience

      Next, we'll install some tools to improve our development experience a bit when working with React.
  2. The Obligatory Todo App (10)

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

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

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

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

    5. More Todo Features

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

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

    7. Custom Hooks

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

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

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

    10. 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.
  3. Fetching Data (3)

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

    2. Fetching Data with Custom Hooks

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

    3. 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.
  4. GitHub Issues Project (2)

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

    2. 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.
  5. Wrapping Up (2)

    1. React With Laravel

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

    2. Conclusion

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

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes