Crea un CRUD sencillo con Laravel, Inertia y React

En el mundo del desarrollo web, construir una aplicación que permita realizar operaciones básicas de creación, lectura, actualización y eliminación (CRUD) es fundamental para entender cómo interactúan las diferentes tecnologías. En este artículo, te mostraremos cómo implementar un CRUD utilizando Laravel, Inertia.js y React, una combinación que potencia la experiencia del usuario y mejora el rendimiento de tus aplicaciones.

Introducción a las tecnologías

Laravel es un marco de trabajo para PHP que facilita el desarrollo de aplicaciones web siguiendo el patrón MVC (Modelo-Vista-Controlador). Por su parte, Inertia.js actúa como un puente entre el backend y el frontend, permitiendo que las aplicaciones sean más dinámicas sin la necesidad de una API RESTful completa. Finalmente, React es una biblioteca de JavaScript para construir interfaces de usuario interactivas.

Configuración del entorno

Antes de comenzar a desarrollar, es crucial tener el entorno listo. Asegúrate de tener instalado PHP, Composer, Node.js y npm. Una vez que tengas todo esto, puedes iniciar un nuevo proyecto de Laravel ejecutando el siguiente comando en tu terminal:

composer create-project --prefer-dist laravel/laravel nombre-del-proyecto

A continuación, instala Inertia.js y React ejecutando:

cd nombre-del-proyecto
composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom

Estas dependencias son necesarias para interactuar entre Laravel y React.

Creación de modelo y migraciones

Antes de implementar el CRUD, es necesario definir qué entidad vas a manejar. Por ejemplo, si decides crear un sencillo sistema de gestión de tareas, primero debes crear el modelo y la migración correspondiente:

php artisan make:model Task -m

Esto generará el modelo Task y la migración asociada. Edita el archivo de migración en database/migrations para definir la estructura de la tabla:

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

Luego, ejecuta la migración con:

php artisan migrate

Creación de rutas y controlador

Define las rutas en el archivo routes/web.php para que apunten a las acciones en el controlador que manejarán las operaciones CRUD. Crea el controlador:

php artisan make:controller TaskController

Dentro del controlador, agrega métodos para manejar las operaciones básicas: crear, leer, actualizar y eliminar. Asegúrate de retornar las vistas de Inertia adecuadamente.

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

Desarrollo del frontend

Crea páginas utilizando React en la carpeta resources/js/Pages/Tasks. Un archivo básico Index.jsx podría verse así:

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

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

export default Index;

Recuerda que debes agregar formularios que permitan al usuario agregar nuevas tareas y realizar ediciones, utilizando métodos de Inertia para gestionar las solicitudes internas.

Despliegue de la aplicación

Una vez que hayas configurado el backend y el frontend, asegúrate de compilar tus activos con:

npm run dev

Luego, ejecuta tu servidor de Laravel con:

php artisan serve

Accede a tu aplicación en http://localhost:8000 y verifica que las operaciones CRUD funcionen correctamente.

Conclusión

Crear un CRUD básico con Laravel, Inertia y React no solo es un ejercicio educativo, sino que también proporciona una base sólida para cualquier proyecto más grande. Esta combinación de tecnologías mejora la experiencia del usuario y facilita el desarrollo.

Si deseas leer más noticias sobre desarrollo web y tutoriales similares, te invito a explorar más artículos en mi blog. ¡No te lo pierdas!