Recientemente publiqué un video en X donde configuré un proyecto Laravel React con autenticación y una página de perfil de usuario en menos de un minuto. Pensé que sería útil compartir una versión escrita para cualquiera que prefiera seguirla junto con una guía detallada.

En esta guía, te mostraré cómo configurar rápidamente un nuevo proyecto Laravel con una interfaz React y autenticación integrada, todo usando Laravel Breeze. . Tendremos un panel de usuario funcional con edición de perfil en solo unos pocos pasos.

¿Por qué Laravel?

Laravel es un marco PHP popular que se utiliza para crear aplicaciones web modernas. de hecho, en septiembre de 2024, Accel anunció una inversión de 57 millones de dólares en Laravel.

Según el sitio oficial, Laravel es "El marco PHP para artesanos web" y realmente está a la altura de esa descripción.

No dedicaré mucho tiempo a qué es Laravel, hay un montón de información disponible en su sitio web oficial y en su documentación. En lugar de eso, vayamos directamente a configurar tu proyecto.

Configuración del proyecto

Pila de tecnología

Usaremos:

• Laravel (para API de backend)

• SQLite que es la base de datos predeterminada para proyectos de Laravel (aunque puedes cambiar a otra base de datos fácilmente)

• React para el frontend (con Inertia.js)

• Laravel Breeze para manejar la autenticación y la gestión de usuarios

Requisitos

Para seguir esta guía, asegúrese de tener:

• PHP 8 (preferiblemente 8.3)

• Compositor

• Node.js (v21)

¿Listo? ¡Empecemos!

Paso 1: crea un nuevo proyecto Laravel

Primero, usa Composer para crear un nuevo proyecto de Laravel:

composer create-project laravel/laravel laravel-project

Esto creará un nuevo directorio con la configuración predeterminada de Laravel. Vaya al directorio del proyecto y entregue la aplicación:

cd laravel-project
php artisan serve

Si visitas http://localhost:8000, verás la página de bienvenida de Laravel.

¡Felicitaciones, has creado tu primer proyecto de Laravel! ✅

De forma predeterminada, Laravel utiliza una base de datos SQLite, que ya ha sido configurada para usted. Puede encontrar el archivo de la base de datos en base de datos/database.sqlite.

Paso 2: Instalar Laravel Breeze

A continuación, agregaremos Laravel Breeze, que proporciona una implementación mínima de autenticación, que incluye:

• Acceso

• Registro

• Restablecer contraseña

• Verificación por correo electrónico

• Confirmación de contraseña

Además, Breeze incluye una página de perfil sencilla donde los usuarios pueden actualizar su información.

Agregue el paquete Breeze ejecutando:

composer require laravel/breeze --dev

Ahora, instala Breeze en tu proyecto:

php artisan breeze:install

Durante la instalación, Breeze le solicitará algunas opciones:

• Elijo React para la interfaz, pero hay algunas alternativas:

  • Cuchilla
  • Cableado vivo
  • Vue
  • Solo API

• Opcionalmente, puedes habilitar Modo oscuro, Representación del lado del servidor (SSR), Mecanografiado y ESLint .

• Cuando se le pregunte acerca de un marco de prueba, puede elegir entre Pest o PHPUnit. Usaré Pest.

Una vez que se complete el proceso, Breeze habrá agregado todo lo necesario para la autenticación y la gestión de usuarios.

¡Ya está! ?

Paso 3: ejecute su aplicación

Ahora que Breeze está configurado, tu aplicación está lista y puedes ejecutarla nuevamente:

php artisan serve

Visite http://localhost:8000/register para crear un nuevo usuario.

Comenzarás con un panel vacío y podrás navegar a tu página de perfil para editar tus datos de usuario y actualizar tu contraseña.

¡Los datos ya están almacenados en su base de datos SQLite y su aplicación está esencialmente lista para ser implementada!

Conclusión

Al seguir estos pasos, has iniciado exitosamente una aplicación web de pila completa usando Laravel y React, completa con autenticación y un sistema de administración de perfiles de usuario.

Breeze te brinda un excelente punto de partida, pero desde aquí puedes concentrarte en agregar lógica de negocios personalizada, mejorar UI/UX o integrar servicios de terceros, todo mientras te apoyas en el ecosistema de Laravel.