Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Crea una aplicación React con Laravel RESTful Back End: Parte 2, React

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Build a React App with Laravel Backend.
Build a React App With a Laravel RESTful Back End: Part 1, Laravel 5.5 API

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image
What You'll Be Creating

Esta es la segunda y última parte de la serie sobre la creación de una aplicación React con un Back End en Laravel. En la primera parte de la serie, creamos una API RESTful utilizando Laravel para una aplicación básica de listado de productos. En este tutorial, desarrollaremos la interfaz utilizando React.

También consideraremos todas las opciones disponibles para cerrar la brecha entre Laravel y React. No necesitas haber seguido la primera parte de la serie para comprender este tutorial. Si estás aquí para ver cómo reaccionan React y Laravel, puedes, de hecho, evitar la primera parte. Deberías dirigirte a GitHub, clonar el repositorio y llevar a cabo la recapitulación rápida a continuación para comenzar.

Un resumen rápido

En el tutorial anterior, desarrollamos una aplicación Laravel que responde a las llamadas API. Creamos rutas, un controlador y un modelo para la aplicación de listado simple de productos. Dado que el trabajo del controlador era devolver una respuesta a las solicitudes HTTP, la sección de la vista (plantilla) se omitió por completo.

Luego tocamos técnicas para el manejo y validación de excepciones usando Laravel. Al final del tutorial, teníamos una API de back-end en Laravel. Ahora podemos usar esta API para crear aplicaciones tanto para la web como para una amplia gama de dispositivos móviles.

En este tutorial, cambiaremos nuestro enfoque hacia el diseño. La primera mitad del tutorial consiste en configurar React en un entorno Laravel. También te presentaré a Laravel Mix (compatible con Laravel 5.4 y posterior), es una API para compilar recursos. En la segunda mitad del tutorial, comenzaremos a construir una aplicación React desde cero.

Configuración de React en Laravel

Laravel Mix se introdujo en Laravel 5.4, y actualmente es la forma ideal de conectar React y Laravel. Con Laravel 5.5, todo el proceso se hizo mucho más fácil. He descrito ambos métodos a continuación.

Uso del comando React Preset (Laravel 5.5)

Laravel 5.5 tiene una nueva característica que permite andamiar el código de los componentes React utilizando el comando preset react. En versiones anteriores de Laravel, configurar React dentro de Laravel no era tan fácil. Si estás ejecutando la última versión de Laravel, ejecuta el siguiente comando para agregar un ajuste preestablecido React a tu proyecto.

Laravel se envía por defecto con el preajuste Vue, y el comando anterior reemplaza todas las instancias de Vue con React. Curiosamente, si no necesitas un ajuste preestablecido, puedes eliminarlo por completo con el comando php artisan preset none.

Si todo va bien, esto debería aparecer en tu terminal.

En el fondo, Laravel usa Laravel Mix, el cual es un contenedor suave para webpack. Webpack, como ya sabrás, es un paquete de módulos. Resuelve todas las dependencias del módulo y genera los recursos estáticos necesarios para JavaScript y CSS. React requiere un paquete de módulos para funcionar, y webpack encaja perfectamente en ese rol. Así que, Laravel Mix es la capa que se encuentra sobre el webpack y hace que sea más fácil usar webpack en Laravel.

Una mejor comprensión de cómo funciona Laravel Mix es importante si necesitas personalizar la configuración del webpack en otro momento. El comando React preestablecido no nos da información sobre cómo funcionan las cosas en segundo plano. Así que eliminemos el preajuste React y recordemos los pasos manualmente.

Método manual (Laravel 5.4)

Si estás ejecutando Laravel 5.4, o si tienes curiosidad por ver cómo se configura Laravel Mix, estos son los pasos que debes seguir:

Instala reactreact-dom y babel-preset-react usando npm. También podría ser una buena idea tener yarn instalado. No es ningún secreto que Laravel y React prefieren yarn sobre el npm.

Dirígete a webpack.mix.js, ubicado dentro del directorio raíz de tu proyecto Laravel. Este es el archivo de configuración donde declaras cómo deben compilarse tus recursos. Reemplaza la línea mix.js('resources/assets/js/app.js', 'public/js'); con mix.react('resources/assets/js/app.js', 'public/js');. app.js es el punto de entrada para nuestros archivos JavaScript, y los archivos compilados se ubicarán dentro de public/js. Ejecuta npm install en la terminal para instalar todas las dependencias.

A continuación, ve a resources/assets/js. Ya hay una carpeta de componentes y un par de otros archivos JavaScript. Los componentes de React entrarán en el directorio de componentes. Elimina el archivo Example.vue existente y crea un nuevo archivo para un componente React de muestra.

resources/assets/js/component/Main.js

Actualiza app.js para eliminar todo el código relacionado con Vue e importa el componente React en su lugar.

resources/assets/js/app.js

Ahora, solo tenemos que hacer que los recursos sean accesibles para la Vista. Los archivos de vista se encuentran dentro del directorio resources/views. Agreguemos una etiqueta <script> a welcome.blade.php, que es la página predeterminada que se muestra cuando navegas a localhost:8000/. Elimina el contenido del archivo de vista y cámbialo por el siguiente código: 

resources/views/welcome.blade.php

Finalmente, ejecuta npm run dev o yarn run dev para compilar los recursos. Si visitas localhost:8000, deberías ver:

Laravel and React running together
React incrustado dentro de la vista de Laravel.

Package.json tiene un script de vigilancia que compila automáticamente los recursos cuando se detectan cambios. Para habilitar este modo, ejecuta npm run watch.

Felicitaciones, has configurado con éxito React para trabajar con Laravel. Ahora, vamos a crear algunos componentes React para la interfaz.

Desarrollando la aplicación React

Si eres nuevo en React, encontrarás que el resto del tutorial es un poco desafiante. Recomiendo tomar el curso React Crash Course para principiantes para familiarizarte mejor con los conceptos de React. ¡Empecemos!

Una aplicación React se basa en componentes. Los componentes son la estructura más importante en React, y tenemos un directorio dedicado para los componentes.

Los componentes te permiten dividir la interfaz de usuario en piezas independientes y reutilizables, y pensar en cada pieza aisladamente. Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas "props") y devuelven elementos React que describen lo que debería aparecer en la pantalla.
Documentos oficiales de React

Para la aplicación que estamos creando, comenzaremos con un componente básico que muestre todos los productos devueltos por el servidor. Vamos a nombrarlo Main component. El componente debería encargarse de las siguientes cosas inicialmente:

  • Obtener todos los productos de la API (GET/api /products).
  • Almacenar los datos del producto en su estado.
  • Mostrar los datos del producto.

React no es un framework completo y, por lo tanto, la biblioteca no tiene características AJAX por sí misma. Utilizaré fetch(), la cual es una API estándar de JavaScript para recuperar los datos del servidor. Pero hay muchas alternativas para hacer llamadas AJAX al servidor.

resources/assets/js/component/Main.js

Aquí estamos inicializando el estado de los productos en una matriz vacía en el constructor. Una vez que el componente se monta, usamos fetch() para recuperar los productos de /api/products y almacenarlos en el estado. El método de renderizado se usa para describir la interfaz de usuario del componente. Todos los productos se muestran como una lista allí.

Screenshot of the React Application - List of all products

La página solo muestra los títulos de los productos, lo cual es aburrido. Además, aún no tenemos elementos interactivos. Hagamos clic en el título del producto y, al hacer clic, se mostrarán más detalles sobre el producto.

Visualización de los datos del producto

Aquí está la lista de cosas que debemos cubrir:

  • Un estado para rastrear el producto al que se le hizo clic. Llamémoslo currentProduct con un valor null inicial.
  • Cuando se hace clic en el título de un producto, este se actualiza. State.currentProduct.
  • Los detalles del producto afectado se muestran a la derecha. Hasta que se seleccione un producto, por defecto se mostrará el mensaje "Sin producto seleccionado".

resources/assets/js/component/Main.js

Aquí agregamos createProduct en el estado y lo inicializamos con el valor null. La línea onClick = {() =>this.handleClick(product)} invoca el método handleClick() cuando se hace clic en el elemento de la lista. El método handleClick() actualiza el estado de currentProduct.

Ahora, para mostrar los datos del producto, podemos representarlo dentro del componente Main o crear un nuevo componente. Como se mencionó anteriormente, dividir la interfaz de usuario en componentes más pequeños es la forma React de hacer las cosas. Por lo tanto, crearemos un nuevo componente y lo nombraremos Product.

El componente Product está anidado dentro del componente Main. El componente principal pasa su estado como accesorios. El componente de producto acepta estos accesorios como entrada y representa la información relevante.

resources/assets/js/component/Main.js

resources/assets/js/component/Product.js

La aplicación debería verse más o menos así ahora:

Screenshot of the React application with product details displayed

Agregar un nuevo producto

Hemos implementado con éxito el diseño correspondiente a la recuperación de todos los productos y su visualización. A continuación, necesitamos un formulario para agregar un nuevo producto a la lista de productos. El proceso para agregar un producto puede parecer un poco más complejo que simplemente obtener los datos de una API.

Esto es lo que creo que se requiere para desarrollar esta función:

  • Un nuevo componente con estado que representa la interfaz de usuario para un formulario de entrada. El estado del componente contiene los datos del formulario.
  • En el envío, el componente secundario pasa el estado al componente Main usando una devolución de llamada.
  • El componente Main tiene un método, digamos handleNewProduct(), que maneja la lógica para iniciar una solicitud POST. Al recibir la respuesta, el componente Main actualiza su estado (tanto this.state.products como this.state.currentProduct)

Eso no suena muy complejo, ¿verdad? Vamos a hacerlo paso a paso. Primero, crea un nuevo componente. Voy a llamarlo AddProduct.

resources/assets/js/component/AddProduct.js

El componente básicamente representa un formulario de entrada, y todos los valores de entrada se almacenan en el estado (this.state.newProduct). Luego, al enviar el formulario, se invoca el método handleSubmit(). Pero AddProduct necesita comunicar la información a los padres, y lo hacemos mediante una devolución de llamada.

El componente Main, que es el padre, pasa una referencia de función como accesorios. El componente secundario, AddProduct en nuestro caso, invoca este accesorio para notificar al padre del cambio de estado. Entonces la línea this.props.onAdd (this.state.newProduct); es un ejemplo de una devolución de llamada que notifica al componente padre del nuevo producto.

Ahora, dentro del componente Main, declararemos <AddProduct /> de la siguiente manera:

El controlador de eventos onAdd está encadenado al método handleAddProduct() del componente. Este método aloja el código para realizar una solicitud POST al servidor. Si la respuesta indica que el producto se ha creado correctamente, se actualiza el estado de productscurrentProducts.

No olvides vincular el método handleProduct a la clase utilizando this.handleAddProduct = this.handleAddProduct.bind (this); en el constructor. Y aquí está la versión final de la aplicación:

Screenshot of the final version of the application

¿Qué sigue?

La aplicación está incompleta sin las funciones de eliminar y actualizar. Pero si has seguido de cerca el tutorial hasta ahora, deberías poder llenar el vacío sin muchos problemas. Para comenzar, te proporcionaré la lógica del controlador de eventos para el escenario de eliminación y actualización.

Lógica para eliminar un producto

Lógica para actualizar un producto existente

Lo que debes hacer es sumergirte, ensuciarte las manos y finalizar la aplicación usando la lógica anterior. Te daré una pista: el botón de eliminación idealmente debe ir dentro del componente Product, mientras que la función de actualización debe tener un componente propio. Los animo a que acepten este desafío y terminen los componentes faltantes.

Resumen

Hemos recorrido un largo camino desde donde comenzamos. Primero, creamos una API REST usando el framework Laravel. Luego, discutimos nuestras opciones para mezclar Laravel y React. Finalmente, construimos una interfaz para la API usando React.

Aunque nos centramos principalmente en crear una aplicación de una sola página con React, puedes crear widgets o componentes que están montados en elementos específicos en tus vistas. React es muy flexible porque es una biblioteca y una buena.

Durante el último par de años, React ha crecido en popularidad. De hecho, tenemos una serie de artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si buscas recursos adicionales en React, no dudes en consultarlos.

¿Has intentado experimentar con Laravel y React antes? ¿Qué piensas? Comparte tu experiencia con nosotros en los comentarios.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.