Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Laravel 12 & React: Build a Social Media App with Inertia

Laravel 12 & React: Xây dựng ứng dụng mạng xã hội với Inertia

Laravel 12 & React: Xây dựng ứng dụng mạng xã hội với Inertia

Học Laravel 12, React 19 & Inertia.js bằng cách xây dựng một ứng dụng mạng xã hội thực tế có xác thực và cập nhật theo thời gian thực

4.3
(39 đánh giá)
261 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 399.000đ -87%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
9.0 giờ video
98 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 31/05/2026

Bạn sẽ học được gì

Xây dựng ứng dụng mạng xã hội kiểu Twitter/X hoàn chỉnh bằng Laravel 12, React 19 và Inertia.js v2
Kết nối Laravel và React mượt mà mà không cần viết API
Triển khai xác thực (đăng ký, đăng nhập, đăng xuất) và phân quyền với Laravel policies
Tạo bài viết, bình luận và lượt thích với đầy đủ thao tác CRUD và kiểm tra dữ liệu
Xây dựng quan hệ giữa các model bằng Eloquent ORM và ngăn chặn truy vấn N+1
Triển khai phân trang vô hạn (infinite scroll) với cursor-based pagination
Thêm cơ chế truy vấn định kỳ (polling) để cập nhật nội dung mới
Tạo cập nhật UI lạc quan (optimistic UI) để phản hồi tức thì cho người dùng
Thiết kế giao diện chuyên nghiệp với Tailwind CSS v4 và components shadcn/ui
Sử dụng TypeScript để đảm bảo an toàn kiểu dữ liệu cho component React
Tạo routes an toàn về kiểu dữ liệu với Laravel Wayfinder
Gỡ lỗi ứng dụng bằng Laravel Telescope
Sử dụng deferred props và các tính năng nâng cao của Inertia để tối ưu hiệu suất

Yêu cầu

Kiến thức PHP cơ bản (biến, hàm, lớp)
Quen thuộc với HTML và CSS
Hiểu biết cơ bản về React (components, props) – chúng tôi sẽ giải thích trong quá trình học

Đối tượng phù hợp

Lập trình viên PHP muốn học Laravel và xây dựng ứng dụng single-page hiện đại
Lập trình viên Laravel muốn tích hợp React mà không cần phức tạp hóa API
Lập trình viên full-stack đã chán xây dựng REST API cho mọi dự án
Lập trình viên React muốn tìm hiểu về framework phía server
Bất kỳ ai muốn xây dựng ứng dụng mạng xã hội hoặc ứng dụng web tương tác một cách hiệu quả
Freelancer cần bàn giao dự án cho khách hàng nhanh hơn

Nội dung khóa học

12 phần • 98 bài giảng
1 Chào mừng bạn đến với khóa học!
2 Tại sao chọn stack này và cách nó hoạt động
3 Bạn sẽ xây dựng gì: Demo dự án
4 Thiết lập môi trường: PHP, Node, Composer, Laravel
5 Tạo và chạy ứng dụng Laravel
6 Thiết lập Inertia.js
7 Code Editor và mẹo lập trình với AI
8 Tài nguyên khóa học
1 Tài nguyên phần này
2 Tạo Inertia pages và hiển thị từ Controllers
3 Điều hướng phía client với Link Component
4 Quy ước đặt tên URL – Tại sao dùng kebab-case?
5 Tạo Layout tái sử dụng với React Children
6 React Props và Children Prop
1 Tài nguyên phần này
2 Tạo Models và Migrations với Artisan
3 Controllers, Route Parameters và truyền dữ liệu sang React
4 Cài đặt Laravel Telescope để gỡ lỗi
5 Xây dựng Social Feed – Lấy tất cả bài viết
6 Định dạng Social Feed với Tailwind CSS
7 Xây dựng Header Navigation với Components
8 Tạo bài viết với Inertia Forms
9 Hiển thị lỗi kiểm tra dữ liệu và tiện ích cn
1 Tài nguyên phần này
2 Định nghĩa quan hệ One-to-Many
3 Factories và Seeders để tạo dữ liệu thử
4 Eager Loading người dùng với bài viết
5 Sửa lỗi thiếu user_id trong bài viết hiện có
1 Tài nguyên phần này
2 shadcn/ui là gì và tại sao nên dùng?
3 Cài đặt shadcn/ui trong Laravel
4 Hiểu về app.css – Biến CSS và Themes
5 Cài đặt Button và Card Components
6 Tái cấu trúc giao diện với Components shadcn
7 Components Form – Input, Textarea, Label
1 Tài nguyên phần này
2 Giới thiệu phần – Xây dựng hệ thống bình luận
3 Tạo Comment Model với Artisan
4 Quan hệ Comment và Schema Migration
5 Comment Factory và Seeding dữ liệu
6 Comment Controller – Lưu bình luận
7 Thêm kiểu dữ liệu TypeScript cho Comment
8 Xây dựng lại Post Page với shadcn/ui
9 Xây dựng Components CommentForm và CommentCard
10 Eager Loading bình luận kèm tác giả
11 Kết nối Comment Form với backend
1 Tài nguyên phần này
2 Deferred Props để tối ưu hiệu suất
3 Đặt lại Form khi thành công với Render Props
4 Sự kiện Form – Cuộn đến bình luận
5 Thông báo Toast với Sonner
6 Tải lại toàn bộ dữ liệu khi có lỗi kiểm tra
1 Tài nguyên phần này
2 Thiết lập Polling cho bình luận mới
3 Tách CommentList thành Component riêng
4 Phát hiện và thông báo về bình luận mới
5 Sử dụng useRef để theo dõi bình luận mà không render lại
6 Chỉ báo tải (Loading Indicators) cho trạng thái Polling
1 Tài nguyên phần này
2 Giới thiệu phần – Tổng quan về tính năng thích
3 Like Model, Migration và Quan hệ
4 Cài đặt Laravel Wayfinder cho Routes an toàn kiểu dữ liệu
5 Đếm lượt thích bài viết với withCount
6 Kiểm tra người dùng đã thích chưa – Kiểm tra tồn tại quan hệ
7 Tạo giao diện LikeButton Component
8 Single Action Controller để bật/tắt thích
9 Truyền dữ liệu Like dưới dạng Deferred Props
10 Bật/tắt thích với Optimistic UI Updates
1 Tài nguyên phần này
2 Giới thiệu phần – Tổng quan về xác thực
3 Xây dựng Form đăng ký và đăng nhập
4 Registration Controller – Tạo người dùng
5 Login Controller – Xác thực người dùng
6 Chia sẻ dữ liệu người dùng hiện tại với Inertia
7 Truy cập dữ liệu được chia sẻ (usePage) – Người dùng đã đăng nhập
8 Hiển thị có điều kiện dựa trên trạng thái xác thực
9 Menu thả xuống người dùng và Đăng xuất
10 Tuần tự hóa dữ liệu người dùng với API Resources
11 Gán người dùng hiện tại cho bài viết và bình luận
1 Tài nguyên phần này
2 Làm cho lượt thích riêng theo người dùng với Unique Constraint
3 Giải thích Infinite Scroll trong Inertia
4 Sửa lỗi gán User ID trong Form
5 Cursor Pagination với Infinite Scroll
6 Ngẫu nhiên hóa created_at để kiểm tra phân trang tốt hơn
7 Infinite Scroll cho bình luận với Polling được tối ưu
1 Tài nguyên phần này
2 Giới thiệu phần – Phân quyền so với Xác thực
3 Bảo vệ Routes với Auth Middleware
4 Cách thức Phân quyền hoạt động trong Laravel
5 Tạo Post Policy
6 Phân quyền tạo và xóa
7 Truyền khả năng phân quyền cho React
8 Xây dựng tính năng chỉnh sửa bài viết
9 Triển khai xóa bài viết với phân quyền
10 Xây dựng Menu thả xuống cho thao tác bài viết
11 Xác nhận xóa với AlertDialog
12 Flash Messages – Thông báo thành công và lỗi

Giới thiệu khóa học

Build modern, full-stack web applications using Laravel 12, React 19, and Inertia.js v2 without the complexity of building APIs. This comprehensive course teaches you how to create a complete Twitter/X-style social media platform from scratch, combining Laravel's backend power with React's dynamic frontend.

What Makes This Course Different:

Unlike traditional Laravel + React courses that require building REST APIs, you'll use Inertia.js to seamlessly connect Laravel and React. Write server-side code in Laravel and client-side code in React, communicating effortlessly without API boilerplate.

What You'll Build:

A fully-functional social media application featuring user authentication, post creation with infinite scroll pagination, a Twitter-like reply system, heart/like functionality with optimistic UI updates, real-time polling for new content, and authorization so users can only edit their own posts.

Technologies You'll Master:

  • Laravel 12 (latest features and streamlined structure)

  • React 19 with TypeScript for type safety

  • Inertia.js v2 (deferred props, infinite scroll, polling)

  • Tailwind CSS v4 with modern CSS variables

  • shadcn/ui component library for professional UI

  • Laravel Wayfinder for type-safe routing

  • Laravel Telescope for debugging

Perfect For:

Developers who know PHP basics and have React exposure, Laravel developers wanting to build modern SPAs, and anyone tired of API complexity who wants a better way to build full-stack applications.

Course Structure:

12 sections taking you from Laravel installation to a ready social platform. Every lecture includes Git commits so you can compare your code and never get stuck.

Start building modern web applications the smart way - without API overhead.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Full Stack
Hiển thị tất cả khoá học Laravel
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊