See discussions, stats, and author profiles for this publication at: https://www.researchgate.net/publication/384292526
Build a CRUD Application with Login Using ReactJS, Inertia.js, and Laravel 11
Presentation · September 2024
CITATIONS
READS
0
229
1 author:
Youcef Benabderrezak
University of Boumerdes
132 PUBLICATIONS 15 CITATIONS
SEE PROFILE
All content following this page was uploaded by Youcef Benabderrezak on 24 September 2024.
The user has requested enhancement of the downloaded file.
Building a CRUD Application with Login
Using ReactJS, Inertia.js, and Laravel 11 - Dr
Benabderrezak
In this document, we will guide you through the process of building a CRUD (Create, Read,
Update, Delete) application with user authentication using ReactJS, Inertia.js, and Laravel 11.
This combination of technologies allows for a seamless single-page application experience
while leveraging the powerful backend capabilities of Laravel. By the end of this guide, you
will have a fully functional application that includes user login and basic CRUD operations.
Prerequisites
Before we begin, ensure you have the following installed:
• PHP (version 8.0 or higher)
• Composer
• Node.js and npm
• Laravel 11
• A database (MySQL, SQLite, etc.)
Step 1: Setting Up Laravel
First, create a new Laravel project:
composer create-project --prefer-dist laravel/laravel laravel-crud-app
cd laravel-crud-app
Next, set up your .env file for database configuration:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password
Run the following command to create the necessary tables:
php artisan migrate
Step 2: Install Inertia.js and React
Install Inertia.js and React in your Laravel project:
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom
Next, set up Inertia.js in your app/Http/Controllers/Controller.php:
use Inertia\Inertia;
class Controller extends BaseController
{
// Your methods here
}
Step 3: Create Authentication
You can use Laravel Breeze for authentication scaffolding:
composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev
php artisan migrate
This will set up the authentication routes and views.
Step 4: Create a CRUD Resource
Now, let’s create a simple resource, for example, a Post model.
Generate the model, migration, and controller:
php artisan make:model Post -mcr
In the migration file, define the schema for the posts table:
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
Run the migration:
php artisan migrate
Next, implement the CRUD methods in the PostController:
use App\Models\Post;
use Inertia\Inertia;
class PostController extends Controller
{
public function index()
{
$posts = Post::all();
return Inertia::render('Posts/Index', ['posts' => $posts]);
}
public function create()
{
return Inertia::render('Posts/Create');
}
public function store(Request $request)
{
$request->validate(['title' => 'required', 'content' => 'required']);
Post::create($request->all());
return redirect()->route('posts.index');
}
public function edit(Post $post)
{
return Inertia::render('Posts/Edit', ['post' => $post]);
}
public function update(Request $request, Post $post)
{
$request->validate(['title' => 'required', 'content' => 'required']);
$post->update($request->all());
return redirect()->route('posts.index');
}
public function destroy(Post $post)
{
$post->delete();
return redirect()->route('posts.index');
}
}
Step 5: Set Up Routes
Define the routes for your CRUD operations in routes/web.php:
use App\Http\Controllers\PostController;
Route::middleware(['auth'])->group(function () {
Route::resource('posts', PostController::class);
});
Step 6: Create React Components
Create the necessary React components for displaying, creating, and editing posts. For
example, in resources/js/Pages/Posts/Index.jsx:
import React from 'react';
import { Inertia } from '@inertiajs/inertia';
const Index = ({ posts }) => {
return (
<div>
<h1>Posts</h1>
<a href="/posts/create">Create Post</a>
<ul>
{posts.map(post => (
<li key={post.id}>
{post.title}
<a href={`/posts/${post.id}/edit`}>Edit</a>
</li>
))}
</ul>
</div>
);
};
export default Index;
Repeat this process for the Create and Edit components.
Step 7: Run Your Application
Now that everything is set up, run your Laravel application:
php artisan serve
And in another terminal, run your React application:
npm run dev
Visit http://localhost:8000 in your browser, and you should see your CRUD application with
login functionality.
Conclusion
You have successfully built a CRUD application with user authentication using ReactJS,
Inertia.js, and Laravel 11. This setup provides a solid foundation for further development and
customization. You can expand this application by adding features like user roles, validation,
and more complex data relationships. Happy coding!
View publication stats