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 kanpus para el proyecto que se ha creado en el ejemplo anterior. Ahora, puedes instalar las dependencias localmente con el comando npm install y obtendrás un resultado similar al siguiente:

$ npm install

added 85 packages, and audited 86 packages in 10s

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

Una vez que todas las dependencias del proyecto se han instalado, si ejecutas npm run podrás ver que la plantilla 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
  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

> 020-miapp@0.0.0 dev
> vite


  VITE         ready in 208 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose