Desarrollar aplicaciones web completas puede parecer una tarea complicada, pero con las herramientas adecuadas, se vuelve mucho más accesible. En este artículo, te mostraré cómo crear una aplicación CRUD (Crear, Leer, Actualizar y Eliminar) utilizando Laravel 11 junto a React Inertia. Este enfoque permite construir interfaces de usuario modernas y rápidas sin sacrificar la simplicidad del desarrollo backend. A continuación, se presentan los pasos esenciales que necesitas seguir para llevar a cabo este proyecto.
¿Qué es Laravel 11 y React Inertia?
Laravel es un framework de PHP que facilita el desarrollo de aplicaciones web debido a su diseño elegante y sintaxis clara. Por otro lado, React Inertia es una biblioteca que permite construir aplicaciones simplemente combinando Laravel en el servidor y React en el cliente, facilitando la creación de interfaces interactivas y reactivas.
Instalación de Laravel 11
Para comenzar con tu aplicación, primero debes instalar Laravel 11. Abre tu terminal y ejecuta el siguiente comando:
composer create-project --prefer-dist laravel/laravel nombre-de-tu-proyecto
Esto descargará e instalará la última versión de Laravel en el directorio que determines.
Configuración de Inertia
Una vez que tienes Laravel instalado, el siguiente paso es integrar Inertia. Para ello, necesitas instalar algunos paquetes necesarios. Ejecuta los siguientes comandos en tu terminal:
composer require inertiajs/inertia-laravel
Luego, instala el cliente de JavaScript:
npm install @inertiajs/inertia @inertiajs/inertia-react
Asegúrate de que tu archivo app.js esté configurado para usar Inertia. Incluye lo siguiente:
import { createInertiaApp } from '@inertiajs/inertia-react';Creación de Rutas y Controladores
Para construir la funcionalidad CRUD, debes definir tus rutas en el archivo web.php. Por ejemplo:
Route::resource('productos', ProductoController::class);A continuación, crea el controlador correspondiente que manejará las operaciones CRUD. Usa el comando:
php artisan make:controller ProductoController --resource
Esto generará métodos para cada operación CRUD que puedes personalizar según tus necesidades.
Creando el Modelo y la Migración
El siguiente paso es crear el modelo que representará tu entidad. En este caso, un "Producto". Utiliza el siguiente comando:
php artisan make:model Producto -m
Esto también generará una migración para establecer la estructura de tu tabla en la base de datos. Abre el archivo de migración en database/migrations y define las columnas que necesitas.
Para aplicar la migración y crear la tabla correspondiente en la base de datos, ejecuta:
php artisan migrate
Frontend: Creando Componentes de React
Con el backend listo, ahora convierte tus vistas en componentes de React. Crea un componente para mostrar la lista de productos y otro para el formulario de creación y edición. Utiliza Inertia para manejar la navegación entre estos componentes.
Por ejemplo, para mostrar una lista de productos podrías implementar algo similar a lo siguiente:
const ListaProductos = ({ productos }) => {
return (
<div>
<h1>Lista de Productos</h1>
{productos.map(producto => (
<div key={producto.id}>{producto.nombre}</div>
))}
</div>
);
};Funcionalidad Modal
Para que el usuario pueda crear y editar productos eficazmente, implementa un sistema de modales. Utiliza alguna biblioteca como React Modal para facilitar la tarea. Así, podrás abrir un formulario dentro de un modal al presionar un botón.
Conclusión
Al seguir estos pasos, puedes crear una aplicación CRUD básica utilizando Laravel 11 junto a React Inertia. Este enfoque te brinda una experiencia de usuario interactiva y eficiente, además de simplificar mucho el desarrollo.
Si estás interesado en leer más noticias relacionadas con el desarrollo web y tutoriales útiles, te invito a explorar más contenido en mi blog. ¡Hasta la próxima!
