Building a Website with Laravel, React.js, and Inertia

1h 17mIntermediate2024-03-26

Authors

Zuzana Kunckova

UK-based web developer with a background in psychology

Course details

Laravel is the most popular PHP framework, which should come as no surprise. It boasts an active user community and impressive ecosystem, making it the choice of many developers around the world. React, on the other hand, is a widely used front-end framework that’s maintained by Meta and a community of developers and companies. In this course, instructor Zuzana Kunckova shows you how to start leveraging these two technologies in tandem with Inertia to get better results and boost your career.

Learn how to build a blog by creating an API in Laravel, then building out a front end with React, before connecting the two frameworks to enable the flow of data between the front end and the back end. Zuzana demonstrates how to send data with Inertia, which offers many different server-side patterns and removes some of the complexity that comes with calling an API from React. Along the way, be sure to test out your new skills in the exercise challenges at the end of each section.

Skills covered

LaravelJavaScript FrameworksBack-End Web DevelopmentWeb Development ToolsFull-Stack Web DevelopmentFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off

Concepts

0. Introduction

01 - Building a website with Laravel, React, and Inertia
02 - What you should know to build your website

1. Building the API in Laravel

03 - Getting started - Creating a new Laravel project
04 - Creating a Post resource
05 - Creating a seeder and a factory
06 - Creating Post API resource
07 - Creating PostController index and store methods
08 - Creating PostController show, update, and destroy methods
09 - Challenge - Testing API Endpoints with PHPUnit
10 - Solution - Testing API Endpoints with PHPUnit

2. Using React with Laravel API

11 - React and Laravel setup
12 - Creating the Home and About pages
13 - Creating website navigation
14 - Displaying posts on a website
15 - Refactoring to components
16 - Fetching posts from Laravel API
17 - Creating a new post
18 - Updating a post
19 - Deleting a post
20 - Challenge - Show individual post page
21 - Solution - Show individual post page

3. Using Inertia.js

22 - Introduction to Inertia.js
23 - Getting started with a new Inertia project
24 - Creating a Post resource
25 - Creating the Home and About pages
26 - Creating an Inertia navigation
27 - Changing the website title
28 - Displaying posts
29 - Creating posts
30 - Displaying a single post
31 - Updating posts
32 - Deleting posts
33 - Challenge - Show a flash message
34 - Solution - Show a flash message

Conclusion

35 - Building your website