React.js + Laravel: SPA CRUD with Auth

Post Create Form and Handle Methods

Lesson 16/36 · 5:56 min

Autoplay

Commit for this lesson: https://github.com/LaravelDaily/Laravel-React-Course/commit/f27690f335e7416bcbb70e5e7798d4ab99ec676c

Previous: Routing: Active Links and Apply Different CSS Classes to Them

Ebenezer Oyenuga

2 years ago

I am getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" which is making my page to be blank when I run it. FInd below the github repo: https://github.com/EbenezerOyenuga/larvitereact

Kindly help check on what I might be possibly doing wrong

React.js + Laravel: SPA CRUD with Auth

Post Create Form and Handle Methods

What's Inside The Course

Install Laravel + React: Load First Static Text from React

npm run watch and Tailwind Classes

Use createRoot: Latest React 18 Syntax

JSX vs HTML and className vs class

Laravel API: List of Posts

React: Render Table with Axios API Call

Eloquent API Resources to Transform Data

Pagination from API and React Sides

Category API Endpoint and Show Category in Posts Table

Filtering Posts By Category Dropdown

Ordering By Columns with Font-Awesome Icons

Routing: Layout, Navigation Links and Post Create Page

One Routing "Fix" for SPAs: External URLs Should Still Work

Routing: Active Links and Apply Different CSS Classes to Them

Post Create Form and Handle Methods

Categories Dropdown and Refactoring into Service

Store Post and Navigate Back

Store Post Validation

Loading Indicator to Prevent Double-Submit

File Upload in React

Edit Form with Parameter Data

Update Post API Endpoint

User Notification Messages with Sweet Alert

Delete Post with Sweet Alert Confirmation

Table Filters: Input for Each Column

Table Global Filter

Debounce to Optimize Server Requests

Configure Laravel Sanctum and Prepare Login/Logout API Endpoints

Guest Layout and Routes for Future Login Form

Login Form: Successful Submit

Logout and Login Validation Errors

Protection of URLs: Front-end and Back-end

Registration Form with API

Roles/Permissions: API Back-end

Roles/Permissions: Front-end with CASL