Courses

React.js + Inertia in Laravel 11: From Scratch

Create Post Form: Component and Submit in SPA

Summary of this lesson:
- Create post creation form in React
- Implement Inertia form handling
- Add route and controller for post creation
- Use Inertia form helper for submission
- Maintain SPA navigation experience

In the last lesson, we stopped before creating the login form. But, to create the login form, we need to get familiar with forms and how they work in Inertia in general.

We will do that based on another form: we will create the "Add new post" form and apply that form to the login form in the following lessons a bit later.


Preparation: React Component, Route and Controller

First, we need to create a React component where the form will be, then the route, and then we need to submit the form.

**resources/js/Pages/Posts/Create.jsx:

import AppLayout from '../../Layouts/AppLayout.jsx';
import { Head, Link, useForm } from '@inertiajs/react';
 
export default function CreatePost() {
return (
<AppLayout>
 
<Head title="New Post" />
<div>
Form here
</div>
</AppLayout>
);
}

In the routes, we will transform the post route into a resource.

routes/web.php:

Route::get('posts', [PostController::class, 'index'])->name('posts.index');
Route::resource('posts', PostController::class);
Route::inertia('about', 'About')->name('about');
Route::inertia('login', 'Pages/Login')->name('login');

In the PostController we need to return Inertia in the create() method.

app/Http/Controllers/PostController.php:

use Inertia\Inertia;
use Inertia\Response;
 
class PostController extends Controller
{
//
 
public function create(): Response
{
return Inertia::render('Posts/Create');
}
}

After visiting the posts/create page, we see the page with the Form here text.


Add Link to the Form

Next, add a link..

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (57 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord