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

Browse all series

React - Beyond the Basics

So you've learned the basics of building apps with React but want to learn more? Fortunately, React has a massive ecosystem with tools and libraries that can help make building apps with React even easier. In this series, we'll take a look at some of these tools and techniques including performance options with memoization, testing tools in React, TypeScript with React, state management, data fetching libraries, CSS in JS options, form libraries, and more.

Progress

Series Info

Episodes
13
Run Time
3h 58m
Difficulty
Intermediate
Last Updated
Apr 15, 2022
Version
Latest
Play Series

Series Episodes

  1. Additional Hooks (2)

    1. An Alternative Way to Define Your State

      Let's start off by taking a look at the `useReducer` hook. `useReducer` is an alternative way to define your state and is preferable when you have complex state logic that depends on one another. To illustrate this, we convert two simple applications to make use of the `useReducer` hook.

    2. Memoization for Performance

      React comes with a few options to memoize certain parts of your React application. `useMemo` allows you to remember values you've already calculated before, `useCallback` allows you to memoize functions and `React.memo` allows you to memoize your components.
  2. Testing in React (2)

    1. Testing in React

      We take a look at testing your React applications and the tools required to accomplish this. We explore how we can make use of Jest, Jest DOM, and React Testing Library to ensure the features of your application are working as expected.

    2. Testing a Todo App

      Now that we have a better understanding of the testing tools available in React, let's test a Todo application we built from a previous series.
  3. TypeScript with React (2)

    1. TypeScript with React

      TypeScript has grown in popularity over the last few years, especially when paired with React. We take a look at some of the basics of TypeScript, its potential benefits and how to use its features within a React application.

    2. Using TypeScript for a Todo App

      Now that we have a good understanding of how to use TypeScript in a React app, let's convert a Todo App to make use of TypeScript instead.
  4. State Management (2)

    1. Context API vs State Management Library

      The Context API is a great way to share state between components and is built right into React. However, it can cause unnecessary re-renders of components which can lead to performance issues in large applications. In this video, we take a look at replacing Context with a dedicated state management library like Zustand.

    2. Zustand for State Management

      We take another look at using zustand as a global state management library for a React Todo application. We move our state to a global store, and make use of a hook to use it anywhere in the component tree. We also take a look at other features zustand has to offer like usage with Redux devtools, and persistence to local storage.
  5. Additional React Libraries (5)

    1. CSS in React

      React provides several options when it comes to writing your CSS. You can stick to the traditional way with external CSS files and class names, or you can make use of CSS within JavaScript. In this video, we take a look at a few of these popular options.

    2. Cleaning up Form Code with Formik

      Forms are a big part of any web application and if you're not careful, your code can quickly become messy. In this video, we take a look at using Formik to keep things under control. We also check out client side validation with the Yup library.

    3. Data Fetching with SWR

      Most web applications need to fetch data from an external source. If you're not careful, this so-called "server" state can get quite messy. Data fetching libraries like SWR can help clean this code up and also provide features like caching and re-fetching capabilities.

    4. Next.js Overview

      Next.js is a framework on top of React that has the ability to pre-render your pages. This can result in better performance and SEO. Next.js also offers useful features like file-based routing, Layouts and Image optimization.

    5. Inertia.js with React and Laravel

      Inertia.js allows you create single-page apps without the complexity of most modern SPAs. Things like routing, controllers, redirects and validation still happen on the server, giving you a very familiar feel to building traditional Laravel applications. In this video, we take a look at using Inertia.js with React and build the obligatory blog application example.

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