Introducción a React

Veces vista: 49

En este artículo os «cuento» cómo me he iniciado en este nuevo entorno de desarrollo y que soluciones/herramientas he adoptado para hacer los desarrollos.

Además, os dejo (también de recuerdo para mí) algunos de los comandos básicos que tenemos que tener presentes, desde el inicio del primer ejercicio.

Objetivo

  • Aprender React siguiendo el libro. (instalación de la infraestructura necesaria para el desarrollo)
  • Utilizar un ejemplo de GITHUB donde se integra React y PHP. «parzibyte.me»
  • Adaptar el ejemplo para utilizar PHPRunner en el Back-End.
  • Hacer una APP Android de la aplicación desarrollada.
  • Mejorar la aplicación del ejemplo utilizando los componentes de Material UI, que son gratuitos y de Google.

DEMO: https://fhumanes.com/react_api/

APP Mejorada: https://fhumanes.com/videos-react/

Back-End: https://fhumanes.com/api_php

Solución Técnica

La explicación de React no se puede facilitar en un artículo y por ello deberéis acceder a algún libro o la web del producto https://es.react.dev/learn.

La parte del server he utilizado PHPRunner y el framework SLIM 4, que es el que facilite el RestAPI, para servir a las peticiones del Front-End.

Los métodos utilizados son:

  • GET – list –  https://fhumanes.com/api_php/restapi/v1/videojuegos/list . Permite recuperar toda la información de la base de datos
  • POST – {action} – https://fhumanes.com/api_php/restapi/v1/videojuegos/{action}/{id}
    Las acciones pueden ser (view, update, add y delete) y el {id} es la primary key del registro.

El interfaz de RestAPI es igual a todos los que últimamente he hecho y publicado y espero que lo veáis sencillo de desarrollar. Para la seguridad, hice un ejemplo de este tipo de interfaz para el Archivo documental EDAS3 y también escribí otro artículo para explicar arquitectura, concepto y herramientas de testeo que si tenéis poco conocimiento, deberías de revisar.

Para «empaquetar» la aplicación en una APP Android he utilizado lo explicado en este artículo.

Si estáis buscando soluciones para aplicaciones de móvil o para disponer de un «potente» interface para usuarios finales, los interfaces realizados en JavaScript es vuestra solución.

En la versión mejorada he utilizado la librería «Material UI» de Google (gratis), que dispone de muy buena documentación y en internet podréis encontrar multitud de ejemplos y soluciones.

Herramientas que utilizo en el desarrollo

Como requisito básico, necesitas instalar Node.js. Es gratuito, como todo el software utilizado.

Para todo lo que tenga que ver con el desarrollo del Front-End (React), utilizo Microsoft Visual Studio Code. También es gratuito y el interfaz lo puedes poner en el idioma que desees.

Para el desarrollo del Back-End utilizo NetBean for PHP. Ya expliqué su uso para las depuraciones del código.

Estas herramientas funcionan en Windows, Mac y Linux.

Comandos 'básicos' de REACT

  • Crear una nueva aplicación npx create-react-app <dir>

Para los comandos de a continuación, debes estar situado en el directorio raíz del proyecto

  • Instalar la librerías que requiere los ejemplos:
    • npm install @mui/material
    • npm install @mui/x-data-grid
    • npm install @emotion/react
    • npm install @emotion/styled
    • npm install @mui/icons-material
    • npm install axios
    • npm install react-router-dom
    • npm install –save sweetalert2
    • npm install sweetalert2-react-react-content
  • Lanzar la ejecución de la aplicación en tu navegador npm start
  • Construir la carpeta build para desplegar la aplicación npm run build
  • Consultar el estado de actualización de las librerías npm outdated
  • Actualizar la librerías según dependencias npm update
  • Instalar las librerías a un ejemplo npm install

En el caso de que la aplicación no corra en el directorio root del servidor WEB, hay que actualizar el fichero package.json incluyendo esta línea de «homepage»:

{
  "name": "videos-react",
  "version": "0.1.0",
  "private": true,
  "homepage": "/videos-react",
  "dependencies": 
.........
}

Como siempre, os dejo todos los fuentes para que podáis practicar y cambiar aquello que necesitéis.

Adjuntos

Archivo Tamaño de archivo Descargas
zip APK - Aplicación Android 3 MB 297
zip PHPRunner 10.7 + Base de Datos 266 KB 260
zip React - Fuentes 211 KB 294
zip videos-react Fuentes 228 KB 17

Blog personal para facilitar soporte gratuito a usuarios de React y PHPRunner