La wiki de TempWin

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== Primeros pasos con React ======

Notas pertenecientes al curso [[informatica:programacion:cursos:desarrollo_web_react_18|Desarrollo de aplicaciones web con React 18]]

===== Preparación del entorno de desarrollo =====

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.

==== Visual Studio Code ====

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 [[https://code.visualstudio.com/docs/setup|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 [[https://code.visualstudio.com/sha/download?build=stable&os=darwin-universal|el paquete correspondiente]], extráelo del archivador ZIP y arrastra ''Visual Studio Code.app'' a la carpeta Aplicaciones.
  * En Linux, descarga el [[https://code.visualstudio.com/download|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.

{{ :informatica:programacion:cursos:desarrollo_web_react_18:010-vscode.png?nolink |}}

El panel de comandos, que puedes abrir mediante la tecla <kbd>F1</kbd> o la combinación <kbd>Ctrl</kbd> + <kbd>Mayús</kbd> + <kbd>P</kbd>, 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 - Code formatter**, 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.

==== Node.js ====

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 [[https://nodejs.org/|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 <kbd>Ctrl</kbd> + <kbd>D</kbd>.

{{ :informatica:programacion:cursos:desarrollo_web_react_18:010-node.png?nolink |}}
===== Creación de un nuevo proyecto con Vite =====

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 [[https://vitejs.dev/|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.

==== Creación del proyecto ====

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

<code>
$ 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
</code>

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.

==== Instalación de dependencias ====

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:

<code>
$ 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
</code>

==== Uso de los comandos ====

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:

<code>
$ 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
</code>

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:

<code>
$ 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
</code>

===== Instalación de bibliotecas para extender React =====

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 [[https://tailwindcss.com/|Tailwind CSS]], [[https://redux.js.org/|Redux]] y [[https://reactrouter.com/|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.

<WRAP center round info 60%>
Veremos más adelante el funcionamiento de todas estas bibliotecas y utilidades. Ahora tan solo vamos a ver cómo instalarlas y ponerlas en marcha.
</WRAP>

==== Configuración de un framework CSS ====

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**.

<WRAP center round tip 60%>
Por supuesto puedes utilizar la biblioteca o framework CSS que prefieras, o incluso no utilizar ninguno y definir tus propios estilos. En este curso utilizaremos **Tailwind CSS** para simplificar el desarrollo de la interfaz de usuario.
</WRAP>

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

<code>
$ 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
</code>

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:

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

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:

<code css>
@tailwind base;
@tailwind components;
@tailwind utilities;
</code>

==== Instalación y configuración de Redux ====

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:

<code>
$ npm install react-redux
</code>

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 [[https://redux-toolkit.js.org/|Redux Toolkit]], un conjunto de atajos para Redux oficial:

<code>
$ npm install react-redux @reduxjs/toolkit
</code>

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 [[https://redux-toolkit.js.org/rtk-query/overview|RTK Query]], un conjunto de funciones que automatiza la gestión de cachés a la hora de consultar y modificar datos externos.

==== Instalación de React Router ====

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.

[[https://reactrouter.com/|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:

<code>
$ npm install react-router-dom
</code>

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

===== Las herramientas de desarrollo de React =====

===== Prácticas propuestas para el módulo =====

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?