Create a simple CRUD with Laravel, Inertia, and React.

In the world of web development, building an application that allows for basic CRUD (Create, Read, Update, Delete) operations is fundamental to understanding how different technologies interact. In this article, we will show you how to implement a CRUD using Laravel, Inertia.js, and React—a combination that enhances user experience and improves the performance of your applications.

Introduction to the Technologies

Laravel is a PHP framework that simplifies the development of web applications following the MVC (Model-View-Controller) pattern. Meanwhile, Inertia.js acts as a bridge between the backend and frontend, allowing applications to be more dynamic without the need for a complete RESTful API. Finally, React is a JavaScript library for building interactive user interfaces.

Setting Up the Environment

Before starting development, it is crucial to have the environment ready. Make sure you have PHP, Composer, Node.js, and npm installed. Once you have everything set up, you can start a new Laravel project by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel project-name

Next, install Inertia.js and React by running:

cd project-name
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom

These dependencies are necessary for interaction between Laravel and React.

Creating Model and Migrations

Before implementing the CRUD, you need to define which entity you will be handling. For example, if you decide to create a simple task management system, you should first create the model and the corresponding migration:

php artisan make:model Task -m

This will generate the Task model and the associated migration. Edit the migration file in database/migrations to define the structure of the table:

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

Then, run the migration with:

php artisan migrate

Creating Routes and Controller

Define the routes in the routes/web.php file to point to the actions in the controller that will handle the CRUD operations. Create the controller:

php artisan make:controller TaskController

Within the controller, add methods to handle the basic operations: create, read, update, and delete. Make sure to return the Inertia views appropriately.

public function index()
{
    $tasks = Task::all();
    return Inertia::render('Tasks/Index', compact('tasks'));
}

Frontend Development

Create pages using React in the resources/js/Pages/Tasks folder. A basic Index.jsx file could look like this:

import React from 'react';
import { Inertia } from '@inertiajs/inertia';

const Index = ({ tasks }) => {
    return (
        <div>
            <h1>Tasks</h1>
            <ul>
                {tasks.map(task => (
                    <li key={task.id}>{task.name}</li>
                ))}
            </ul>
        </div>
    );
};

export default Index;

Remember to add forms that allow users to add new tasks and make edits, using Inertia methods to handle internal requests.

Deploying the Application

Once you have set up the backend and frontend, make sure to compile your assets with:

npm run dev

Then, run your Laravel server with:

php artisan serve

Access your application at http://localhost:8000 and check that the CRUD operations work correctly.

Conclusion

Creating a basic CRUD with Laravel, Inertia, and React is not just an educational exercise; it also provides a solid foundation for any larger project. This combination of technologies enhances the user experience and facilitates development.

If you want to read more news about web development and similar tutorials, I invite you to explore more articles on my blog. Don't miss it!