Laravel 11 with Inertia.js and React | A Practical Guide

Laravel 11 with Inertia.js and React | A Practical Guide, available at $54.99, has an average rating of 4.75, with 74 lectures, based on 17 reviews, and has 129 subscribers.

You will learn about Learn how to Build Single Page Applications using Laravel 11, Inertia and React Learn how to Implement Roles and Permissions on an Inertia based App (Without using any external package) Learn how to Build dependent dropdowns in Laravel and React Learn how to Build Data-tables using Laravel, Inertia and React Learn how to Implement Translations in an Inertia based app. Learn how to implement Infinite Scrolling in Inertia Based Applications Learn how to Customize Error Pages in Inertia This course is ideal for individuals who are Students who want to Build Monolith(SPA) Applications using Laravel, InertiaJS and React It is particularly useful for Students who want to Build Monolith(SPA) Applications using Laravel, InertiaJS and React.

Enroll now: Laravel 11 with Inertia.js and React | A Practical Guide

Summary

Title: Laravel 11 with Inertia.js and React | A Practical Guide

Price: $54.99

Average Rating: 4.75

Number of Lectures: 74

Number of Published Lectures: 74

Number of Curriculum Items: 74

Number of Published Curriculum Objects: 74

Original Price: $34.99

Quality Status: approved

Status: Live

What You Will Learn

Learn how to Build Single Page Applications using Laravel 11, Inertia and React
Learn how to Implement Roles and Permissions on an Inertia based App (Without using any external package)
Learn how to Build dependent dropdowns in Laravel and React
Learn how to Build Data-tables using Laravel, Inertia and React
Learn how to Implement Translations in an Inertia based app.
Learn how to implement Infinite Scrolling in Inertia Based Applications
Learn how to Customize Error Pages in Inertia

Who Should Attend

Students who want to Build Monolith(SPA) Applications using Laravel, InertiaJS and React

Target Audiences

Students who want to Build Monolith(SPA) Applications using Laravel, InertiaJS and React

In this course, we will be Learning Inertia.js(A tool to build single-page apps, without creating any APIs) along with React.js in a practical way by building multiple practical projects along the way.

Inertia serves as the solution, seamlessly connecting Laravel as a backend with a frontend Framework (React/Vue/Svelte), enabling us to build everything in one application (a monolith) while achieving the same outcome. The best part? We don’t have to create an API.

Projects Roadmap and Status:

[Uploaded] Learn Inertia

[Uploaded] Flexible Flash Notifications with Inertia

[Uploaded] Customizing Error Pages in Inertia

[Uploaded] Building a Simple Student’s Management System

[Uploaded] Implementing Roles/Permissions in Inertia-Based Applications.

[Uploaded] Infinite Scrolling with Inertia

[Uploaded] Translations with Laravel and Inertia

Project Description:

[Uploaded] Learn Inertia

In this section, we’ll look into the basics of Inertia and some of the fundamental features of Inertia.js.

Some of the topics we’ll cover in this section include:

Learn how to set up Laravel with Inertia and React Stack.
Learn how to Format the data with API Resources.
Learn about how to work with forms, and display validation errors
Learn how to preserve the scroll behavior, and preserve the state of the page
Learn how to implement Manual Visits and Partial Reloads in Inertia.
Learn how to Implement Authorization checks (on both frontend and backend)
Learn how to Customize the default Error pages and render Custom Inertia Pages (403, 404, 419 pages)
Learn how to display Flash Notifications in Inertia/React
Learn how to Set up page titles and meta tags.

[Uploaded] Flexible Flash Notifications with Inertia

In this Section, we’ll learn how to build a flexible flash notifications feature in Inertia.

By the end of the section, we’ll have the ability to flash any type of notification, anywhere in our application, without repeating any code.

[Uploaded] Customizing Error Pages in Inertia

Learn how to Customize the default error pages in Inertia.

We’ll learn the following in this Section:

Learn how to customize the default error pages in Laravel
Learn how to return an Inertia Response whenever any error is encountered in our app.
Learn how to render different types of errors by re-using the same React component.
Learn how to define a config to enable/disable the rendering of custom error pages

[Uploaded] Building a Simple Student’s Management System

In this section, we’ll build a simple CRUD app and dive into the fundamentals of building CRUD applications with Laravel, Inertia, and the React Stack, and we will learn the following topics along the way:

Learn how to Build dependent dropdowns in Inertia/React
Learn how to work with Factories and Seeders in Laravel, and seed the necessary data for all of our Models
Learn how to use a Re-usable React Component to display validation messages.
Learn how to Implement Server Side Pagination from scratch.
Learn how to Implement Search Functionality in an Inertia/React Data-table.
Learn how to Implement filters in an Inertia/React Data-table.

[Uploaded] Implementing Roles/Permissions in Inertia-Based Applications.

We’ll continue from where we left off in the previous section and implement the Roles and Permissions functionality without using any external plugins.

Some of the features that we’ll cover in this section are listed below:

Implement Roles CRUD.
Implement Authorization/Gate Checks throughout the project (on both frontend and backend)

[Uploaded] Translations with Laravel and Inertia

Localization is a breeze in Laravel applications, but what happens when you need to bring this to the client side? Turns out in Inertia, it’s pretty simple.

In this section, we’ll build a language switcher, share translations with the client, and build a simple translation helper to use directly in React components. We’ll also cover caching translations to keep things running smoothly.

[Uploaded] Infinite Scrolling with Inertia

In this section, we’ll seed our database with a bunch of data and start building the solution, we’ll start by using Inertia’s router to load additional data, and later we’ll optimize the infinite scrolling flow by replacing the Router with Axios.

Course Curriculum

Chapter 1: Learn Inertia.js

Lecture 1: Introduction

Lecture 2: Install and Setup Laravel/Inertia.js with React

Lecture 3: Overview of the Project

Lecture 4: Creating Pages

Lecture 5: Title and Meta Tags

Lecture 6: Passing Data to Pages

Lecture 7: Swapping to API Resources

Lecture 8: Form Basics

Lecture 9: Submitting Forms

Lecture 10: Resetting Forms

Lecture 11: Clearing Validation Errors

Lecture 12: Accessing Form Processing State

Lecture 13: Manual Visits and Partial Reloads

Lecture 14: Partial Visits (and more) with Links

Lecture 15: Shared Data

Lecture 16: Making Use of Ziggy

Lecture 17: Hooking into Forms for Flash Messages

Lecture 18: Revisiting Shared Data for Better Flash Messages

Lecture 19: Shorthand Routes

Lecture 20: Remembering Form States

Lecture 21: Preserving States

Lecture 22: Basic Authorization

Chapter 2: Flexible Flash Notifications in Inertia

Lecture 1: Reusing the Flash Notifications code for multiple pages

Lecture 2: Improving the Flash Notifications flow

Lecture 3: Fix Flash Notification Issues

Chapter 3: Customizing Error Pages in Inertia

Lecture 1: Customizing the default Error page

Lecture 2: Returning an Inertia Response

Lecture 3: Handling Multiple Error Types with a Single Component

Lecture 4: Define a Config to Show/Hide Custom Error Pages

Chapter 4: Let's Build a Students Management System

Lecture 1: Introduction to Students Management System

Lecture 2: Install and Setup Laravel with Inertia and React

Lecture 3: Define the Models/Migrations/Factories/Seeders/Relationships

Lecture 4: Displaying the Students Data

Lecture 5: Let's Implement Pagination

Lecture 6: Let's work on the Record Creation Flow

Lecture 7: Continue working on Record Create Flow

Lecture 8: Implementing Dependent Dropdowns

Lecture 9: Display Validation Errors and Finalize Record Creation Flow

Lecture 10: Let's Work on Record Update Flow

Lecture 11: Deleting Individual Records

Lecture 12: Implementing Search Functionality

Lecture 13: Fixing Pagination Related Issues

Lecture 14: Let's Implement Filter By Class Functionality

Lecture 15: Debounce Search Input and Fix remaining Issues

Chapter 5: Implementing Roles and Permissions in Inertia Based Applications

Lecture 1: Introduction to Implementing Roles/Permissions in Inertia based Applications

Lecture 2: Database Structure Overview

Lecture 3: Define the Models/Migrations/Pivot Tables/Seeders for Roles/Permissions

Lecture 4: Displaying and Deleting Roles

Lecture 5: Storing Roles

Lecture 6: Editing Roles

Lecture 7: Implement Permissions Selection on Role Create Page

Lecture 8: Implement Permissions Selection on Role Edit Page

Lecture 9: Defining the Auth Gates with a Middleware

Lecture 10: Implementing Checks on the Backend

Lecture 11: Implementing Checks on the Frontend

Chapter 6: Learn how to Implement Infinite Scrolling in Inertia Based Applications

Lecture 1: Introduction to Implementing Infinite Scrolling in Inertia Based Applications

Lecture 2: Install and Configure a new Laravel Project

Lecture 3: Setup Model/Migration/Factory/Seeder

Lecture 4: Displaying the Posts Data

Lecture 5: Let's Implement useIntersectionOnserver

Lecture 6: Let's Start Implementing Infinite Scrolling Behaviour

Lecture 7: Use Axios instead of Inertia's router

Lecture 8: Finalizing the Infinite Scrolling Feature

Lecture 9: Fix Remaining Issues

Chapter 7: Learn how to Implement Translations in Laravel and Inertia

Lecture 1: Introduction to Implementing Translations in Laravel and Inertia

Lecture 2: Install and Setup a Fresh Laravel Project

Lecture 3: Storing available languages with an Enum

Lecture 4: Sharing available languages globally

Lecture 5: Building the Language Selector

Lecture 6: Storing the chosen Language in a Session

Lecture 7: Setting the locale through a Middleware

Lecture 8: Sharing all translations with Inertia

Lecture 9: Building a Translation helper in Javascript

Lecture 10: Caching Translations

Instructors

Tapan Sharma
Software Engineer

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 0 votes
4 stars: 5 votes
5 stars: 13 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu