Create a CRUD Application in Laravel 11 with React Inertia

Developing complete web applications may seem like a complicated task, but with the right tools, it becomes much more accessible. In this article, I will show you how to create a CRUD (Create, Read, Update, and Delete) application using Laravel 11 along with React Inertia. This approach allows you to build modern and fast user interfaces without sacrificing the simplicity of backend development. Below are the essential steps you need to follow to carry out this project.

What is Laravel 11 and React Inertia?

Laravel is a PHP framework that makes web application development easier due to its elegant design and clear syntax. On the other hand, React Inertia is a library that allows you to build applications simply by combining Laravel on the server and React on the client, facilitating the creation of interactive and reactive interfaces.

Installing Laravel 11

To get started with your application, you first need to install Laravel 11. Open your terminal and run the following command:

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

This will download and install the latest version of Laravel in the directory you specify.

Setting Up Inertia

Once you have Laravel installed, the next step is to integrate Inertia. You need to install some necessary packages. Run the following commands in your terminal:

composer require inertiajs/inertia-laravel

Then, install the JavaScript client:

npm install @inertiajs/inertia @inertiajs/inertia-react

Make sure your app.js file is set up to use Inertia. Include the following:

import { createInertiaApp } from '@inertiajs/inertia-react';

Creating Routes and Controllers

To build the CRUD functionality, you need to define your routes in the web.php file. For example:

Route::resource('products', ProductController::class);

Next, create the corresponding controller that will handle CRUD operations. Use the command:

php artisan make:controller ProductController --resource

This will generate methods for each CRUD operation that you can customize according to your needs.

Creating the Model and Migration

The next step is to create the model that will represent your entity. In this case, a "Product." Use the following command:

php artisan make:model Product -m

This will also generate a migration to set up the structure of your table in the database. Open the migration file in database/migrations and define the columns you need.

To apply the migration and create the corresponding table in the database, run:

php artisan migrate

Frontend: Creating React Components

With the backend ready, now convert your views into React components. Create a component to display the list of products and another for the create and edit form. Use Inertia to handle navigation between these components.

For example, to display a list of products, you could implement something similar to the following:

const ProductList = ({ products }) => {
  return (
    <div>
      <h1>Product List</h1>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
};

Modal Functionality

To allow the user to effectively create and edit products, implement a modal system. Use a library like React Modal to make the task easier. This way, you can open a form inside a modal when pressing a button.

Conclusion

By following these steps, you can create a basic CRUD application using Laravel 11 along with React Inertia. This approach provides you with an interactive and efficient user experience, while also greatly simplifying development.

If you are interested in reading more news related to web development and useful tutorials, I invite you to explore more content on my blog. Until next time!