Notas pertenecientes al curso Desarrollo de aplicaciones web con React 18

Las dos herramientas esenciales con las que debemos contar para disponer de un entorno de desarrollo para React son un editor de código y un entorno de ejecución de JavaScript. Para los propósitos del curso, vamos a utilizar las opciones más comunes dado su amplio soporte y ubicuidad.

Aunque puedes utilizar cualquier editor de tu elección para desarrollar aplicaciones de React y no es necesario un entorno de desarrollo integrado en absoluto, el editor Visual Studio Code es una de las mejores opciones ya que incorpora multitud de funcionalidades que asisten a la hora de escribir código JavaScript, como snippets de código, autocompletado, sangrado automático o una terminal integrada.

Para instalarlo, puedes dirigirte a la página web oficial donde se detalla el proceso de instalación para tu sistema operativo. Para una instalación rápida, tienes las siguientes opciones:

• En Windows, abre una terminal y ejecuta el comando winget install Microsoft.VisualStudioCode
• En macOS, descarga el paquete correspondiente, extráelo del archivador ZIP y arrastra Visual Studio Code.app a la carpeta Aplicaciones.
• En Linux, descarga el paquete adecuado para tu distribución e instálalo con el gestor de paquetes de tu sistema o ejecuta sudo snap install code --classic si dispones del gestor de paquetes Snap.

El panel de comandos, que puedes abrir mediante la tecla F1 o la combinación Ctrl + Mayús + P, te dará acceso a todo tipo de acciones que puedes realizar sobre el código, incluyendo comandos especiales en función del lenguaje que estés editando.

Aunque Visual Studio Code integra multitud de ayudas para programar en JavaScript, sus funcionalidades se pueden ampliar instalando extensiones, que se acceden desde el panel lateral. Algunas extensiones que te pueden resultar útiles son las siguientes:

• ESLint, un analizador estático que identifica problemas en código JavaScript y sugiere soluciones para corregirlos de forma sencilla
• Prettier, un formateador de código automático
• VSCode React Refactor, un conjunto de comandos para automatizar tareas comunes en React
• Highlight Matching Tag, una sencilla extensión que resalta las etiquetas de apertura y cierre en secciones de marcado HTML y JSX.

El entorno de ejecución Node.js nos permite disponer de un motor JavaScript para ejecutar programas sin depender necesariamente de un navegador. Esto, a su vez, hace posible construir aplicaciones de servidor sin depender de otras plataformas en otros lenguajes.

En nuestro caso, ya que la mayoría del trabajo de React se ejecuta en el cliente, no le daremos mucha importancia al componente que sirve la aplicación, pero es importante que tengas en cuenta que el código que escribas se preparará y transformará de la forma conveniente antes de enviarla al navegador. Aún así, no es imprescindible contar con un servidor para construir aplicaciones React y veremos algunos ejemplos en los que la aplicación se compone de un solo fichero HTML que podemos abrir directamente en el navegador.

La ventaja de utilizar Node.js es, además, que facilita la inclusión de otras bibliotecas (la gestión de dependencias) y la ejecución de comandos que efectúan diferentes tareas de creación y mantenimiento del código por nosotros.

Para instalar Node.js, puedes utilizar el gestor de paquetes de tu sistema operativo:

• En Windows, abre una terminal y ejecuta el comando winget install openjs.nodejs.
• En macOS, si dispones de Homebrew puedes abrir una terminal y ejecutar el comando brew install node.
• En distribuciones de Linux, el gestor de paquetes tendrá acceso a nodejs o bien node. Por ejemplo, para Debian y Ubuntu podemos ejecutar sudo apt install nodejs.

Alternativamente, puedes descargar Node.js de la página oficial en forma de paquete instalable. Una vez que lo tengas instalado por cualquier método, comprueba que puedes ejecutar los comandos node, npm y npx en una terminal. Puedes salir de los prompts que se abren, por ejemplo, al ejecutar node, utilizando la combinación Ctrl + D.

Una vez que tenemos Node.js instalado, es muy sencillo comenzar a crear proyectos React. La opción más conveniente en la actualidad para desarrollar una aplicación y llevarla al navegador es utilizar Vite. Esta herramienta arranca un servidor que realiza todas las tareas necesarias para convertir el código que escribamos en módulos listos para ejecutar en el navegador. Esto nos permite desarrollar utilizando lenguajes y utilidades adicionales que no se ejecutan directamente en el navegador, como son TypeScript y la sintaxis JSX. También nos facilita utilizar preprocesadores como Tailwind CSS para crear hojas de estilo dinámicamente. Todo esto lo veremos a medida que avancemos en el curso.

El mecanismo por el que Vite sirve aplicaciones al navegador es muy eficiente. A diferencia de herramientas previas como Webpack, que transformaban todo el código de una aplicación en un solo paquete o bundle, Vite no requiere de todo ese procesamiento. Vite aprovecha el soporte de los navegadores modernos para ES Modules (módulos de ECMAScript), que es la manera estándar de importar objetos y funciones desde otros archivos en JavaScript.

Para comenzar a usar Vite, basta con invocar el comando create-vite desde npx y podremos crear un nuevo proyecto React siguiendo estos pasos:

$ npx create-vite
Need to install the following packages:
create-vite@5.2.0
Ok to proceed? (y) y
✔ Project name: … miapp
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/tempwin/.../code/miapp...

Done. Now run:

  cd miapp
  npm install
  npm run dev

Como resultado, obtendremos un nuevo directorio con el mismo nombre que le hayamos dado al proyecto. Dentro de dicho directorio encontraremos una plantilla completa de aplicación React lista para lanzar y comenzar a desarrollar.

El siguiente paso será movernos con la terminal al directorio recién creado. Por ejemplo, cd miapp para el proyecto que se ha creado en el ejemplo anterior. Ahora, puedes instalar las dependencias localmente (listadas en el fichero package.json) con el comando npm install y obtendrás un resultado similar al siguiente:

$ npm install

added 272 packages, and audited 273 packages in 57s

98 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Una vez que todas las dependencias del proyecto se han instalado, si ejecutas npm run podrás ver que la plantilla (también en el fichero package.json) ya incluye algunos scripts preparados para ejecutar, construir o previsualizar la aplicación:

$ npm run
Scripts available in miapp@0.0.0 via `npm run-script`:
  dev
    vite
  build
    vite build
  lint
    eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0
  preview
    vite preview

Cada uno de estos scripts se puede invocar con npm run nombre-script, por ejemplo, siempre que quieras lanzar la aplicación en modo de desarrollo, bastará con que ejecutes el siguiente comando:

$ npm run dev

> miapp@0.0.0 dev
> vite


  VITE v5.1.1  ready in 295 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

A lo largo del curso iremos utilizando, aparte de React, algunas otras bibliotecas que nos facilitarán el desarrollo, automatizando o simplificando algunas tareas. Las principales serán Tailwind CSS, Redux y React Router. También puedes instalar otras bibliotecas para disponer de componentes útiles, sets de iconos, animaciones o elementos que se puedan arrastrar y soltar, por poner algunos ejemplos.

En algunas aplicaciones será normal que queramos definir una hoja de estilo con un diseño específico y una determinada semántica para nuestros componentes pero, dado que en este curso nos centraremos principalmente en el desarrollo de React, podemos optar también por una biblioteca que facilita la asignación de estilo a los componentes, en este caso, Tailwind CSS.

Para instalar Tailwind en un proyecto React, serán necesarios los siguientes comandos:

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

Ahora que tenemos un fichero tailwind.config.js, entraremos en él y añadiremos las rutas de los ficheros en los que Tailwind deberá encontrar las clases CSS para crear la hoja de estilos:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Por último, podemos añadir las siguientes declaraciones CSS al archivo principal de estilos de la aplicación, src/index.css, para que las hojas de estilos de Tailwind se añadan a la hoja global:

@tailwind base;
@tailwind components;
@tailwind utilities;

Otra biblioteca que será muy útil para el desarrollo de aplicaciones es Redux, un contenedor de estado centralizado para JavaScript. Existe una interfaz oficial de Redux que lo integra con React, y ese será el paquete que añadiremos a nuestras dependencias normalmente:

$ npm install react-redux

Además, si queremos simplificar la forma de utilizar Redux, guiarnos por los patrones usuales recomendados en la documentación oficial y que muchas de las funcionalidades que generalmente hay que implementar a mano se nos proporcionen ya listas, podemos añadir Redux Toolkit, un conjunto de atajos para Redux oficial:

$ npm install react-redux @reduxjs/toolkit

Redux trabaja únicamente con el estado local de la aplicación en el lado del cliente. Si además queremos una utilidad que nos permita integrar esta gestión con la recuperación y envío de información a un servidor externo, podemos aprovechar que Redux Toolkit incorpora RTK Query, un conjunto de funciones que automatiza la gestión de cachés a la hora de consultar y modificar datos externos.

Debido a que React sirve para implementar interfaces de aplicaciones de una sola página, por lo general es difícil simular una navegación entre páginas diferentes. Por ejemplo, si implementamos una tienda online usando React, tanto la interfaz de búsqueda como la de detalles de un producto deben estar cargadas en la misma página web, y tendremos que usar reglas para mostrar y ocultar los componentes en cada momento.

React Router es una biblioteca que nos permite establecer un árbol de rutas dentro de la propia página y que exista una navegación entre páginas, todo ello sin que el navegador tenga que refrescar la página web en ningún momento. Esto nos ampliará notablemente la gama de casos de uso donde podemos aplicar React.

Para instalar React Router en una aplicación, ejecutaremos el siguiente comando:

$ npm install react-router-dom

Más adelante estudiaremos cómo integrar React Router en una aplicación React para crear y conectar diferentes rutas.

A lo largo de este módulo habrás aprendido a instalar y utilizar diversas herramientas, incluidos el editor VS Code, la plataforma Node.js y la utilidad Vite. Para que adquieras más confianza en tus conocimientos, te proponemos los siguientes ejercicios prácticos:

• Instala, si todavía no lo has hecho, Visual Studio Code y Node.js en tu sistema. Comprueba que la instalación es correcta.
• Desde la terminal integrada de Visual Studio Code, crea un proyecto React utilizando Vite.
• Muévete con la terminal a la carpeta del proyecto y lanza el servidor en modo de desarrollo. Comprueba que se abre una pestaña de navegador con la interfaz de la aplicación.
• Inspecciona el código del proyecto, especialmente, el fichero index.html, main.jsx y App.jsx. Identifica cómo llega a mostrarse el componente App en la página web (dónde se incluye el componente en main.jsx y cómo se invoca este script desde index.html).
• Experimenta con las sentencias import y export.
  • Si en main.jsx modificamos la tercera línea a import Aplicacion from './App', ¿qué otro cambio debemos efectuar para que la aplicación funcione?
  • Si en lugar de export default App en App.jsx especificáramos export { App }, ¿qué otro cambio debe ocurrir para que la aplicación siga funcionando?