2.4 Empezando a desarrollar en React

Casi todos los principales frameworks de JavaScript cuentan con herramientas de línea de comandos, lo que facilita las tareas rutinarias que surgen durante el desarrollo. La tarea más laboriosa del proceso de desarrollo es la configuración del entorno. Esto se debe principalmente a que se deben integrar numerosas herramientas para el proceso de desarrollo y compilación.

Normalmente, herramientas como gestores de paquetes, empaquetadores como Webpack, Babel (como transpilador) y muchas otras colaboran en el desarrollo de una aplicación web. Una herramienta de línea de comandos como Create React App gestiona la coordinación de estas herramientas y crea una estructura básica para la aplicación.

2.4.1 Requisitos

Para implementar una aplicación React, necesitas algunas herramientas en tu computadora.

Node.js

Por ejemplo, deberías tener una versión actualizada de Node.js. Puedes obtenerla directamente desde https://nodejs.org/ como paquete de instalación o a través del gestor de paquetes de tu sistema operativo.

NoteNode.js

Aunque React es una biblioteca frontend que puede usarse independientemente de Node.js, la plataforma JavaScript del lado del servidor desempeña un papel importante en el proceso de desarrollo. Muchas herramientas que se utilizan durante la implementación se basan en Node.js. Node.js se basa en el motor V8, que también se utiliza en el navegador Chrome. La plataforma cuenta con un conjunto de módulos principales que permiten acceder a los recursos del sistema operativo (como la red o el disco) durante el desarrollo.

Además de la plataforma JavaScript en sí, el paquete Node.js también incluye NPM, un administrador de paquetes que se puede utilizar para administrar las dependencias de su aplicación.

En este capítulo también conocerás Yarn, una alternativa a NPM en gran medida compatible con API.

En la línea de comandos, puede utilizar los siguientes comandos para comprobar que las dos herramientas estén instaladas correctamente:

$ node -v
V19.2.0
$ npm -v
8.19.3

Editor

Además de Node.js, deberías instalar un editor en tu sistema que puedas usar para escribir el código fuente de tu aplicación. Recomiendo usar el editor gratuito de Visual Studio Code de Microsoft o el entorno de desarrollo de pago WebStorm de JetBrains, aunque puedes usar prácticamente cualquier editor. Sin embargo, asegúrate de que cuente con funciones útiles como resaltado de sintaxis para JavaScript, TypeScript y, en el mejor de los casos, React y JSX, y que ofrezca completado de código, es decir, la correcta finalización de los nombres de variables y métodos al empezar a escribirlos.

Browsers (navegadores)

React puede ejecutarse en diversos entornos. Sin embargo, las aplicaciones React suelen ejecutarse en el navegador. Por lo tanto, para fines de desarrollo, es recomendable tener al menos una versión reciente de uno de los cuatro navegadores principales: Chrome, Firefox, Edge o Safari. Los ejemplos de este libro, en lo que respecta a funciones específicas del navegador, se refieren a Chrome debido a su amplio uso. Funcionalidades como las herramientas para desarrolladores también se pueden encontrar en otros navegadores de forma similar y con la misma extensión.

React es compatible con todos los navegadores modernos. Desde la versión 18 de React, Internet Explorer ya no es compatible. Microsoft dejó de ofrecer soporte para este navegador el 15 de junio de 2022. Si aún desea que las versiones anteriores de su navegador, o incluso Internet Explorer, sean compatibles, debe instalar varios polyfills. Estos se combinan en el paquete react-app-polyfill y se pueden instalar mediante un gestor de paquetes. Después, solo necesita integrar la versión adecuada para su navegador. El Listado 2.8 lo demuestra utilizando Internet Explorer 11 como ejemplo.

import 'react-app-polyfill/ie11';

Listado 2.8 Carga de Polyfills para Internet Explorer 11

NotePolyfill

Un polyfill es un fragmento de código fuente JavaScript que se utiliza para emular una función que no está presente en el navegador. Los polyfills suelen ser mucho menos potentes que las funciones reales del navegador. Sin embargo, la cuestión principal aquí es no excluir a ningún usuario, y menos el rendimiento.

2.4.2 Instalación de la aplicación Create React

Las variantes presentadas hasta ahora para iniciar el desarrollo con React tienen la desventaja de que permiten un inicio rápido, pero la comodidad del desarrollo se ve limitada. Este problema se soluciona con el proyecto Create React App. Se trata de una herramienta de línea de comandos desarrollada por Facebook. El sitio web del proyecto se puede encontrar en https://create-react-app.dev/. A diferencia de otras herramientas de interfaz de línea de comandos (CLI) (como Angular CLI) que guían al usuario a través de todo el ciclo de vida de la aplicación, Create React App solo asiste en el proceso de creación de la aplicación.

Create React App se encarga de casi todo el trabajo de inicialización de una aplicación. La herramienta crea la estructura básica de la aplicación, descarga todas las dependencias necesarias y prepara todo para que puedas empezar a desarrollar directamente. La aplicación generada utiliza paquetes establecidos en la comunidad para tareas estándar, como Webpack como empaquetador y Babel como transpilador. Sin embargo, Create React App gestiona la configuración de las herramientas utilizadas por defecto y permanece oculta para que no tengas contacto con ella. En la mayoría de los casos, la configuración predeterminada es suficiente. Si no es el caso de tu aplicación, puedes exportar la configuración y adaptarla. Para saber cómo funciona exactamente, consulta la Sección 2.4.4.

Otra práctica función que ofrece Webpack es el servidor de desarrollo de Webpack, un servidor web local que permite probar la aplicación directamente. Durante el desarrollo, cada vez que se realiza un cambio en el código fuente, los archivos afectados se reprocesan y se insertan en la aplicación en ejecución. La infraestructura garantiza que los navegadores se recarguen automáticamente para que los cambios surtan efecto de inmediato. Bajo ninguna circunstancia se debe utilizar el servidor de desarrollo para operaciones de producción, ya que al recargar la aplicación se restablece su estado en el navegador.

El objetivo principal de Create React App es facilitar el inicio rápido del desarrollo, minimizando la complejidad. Esto se refleja, por un lado, en la configuración predeterminada mencionada anteriormente y, por otro, en la gestión de dependencias. Si consulta la lista de dependencias instaladas directamente en el archivo package.json de una aplicación React nueva creada con Create React App, encontrará un total de tres bibliotecas instaladas: react, react-dom y react-scripts. Todas las demás dependencias necesarias son de estas tres bibliotecas, lo que también simplifica enormemente el proceso de actualización de una aplicación.

Pero basta de introducción; ¡comencemos a desarrollar una aplicación! Tienes varias opciones para instalar Create React App, según el gestor de paquetes y la estrategia que elijas.

Initialization Using “npm init” and “npx”

While several package managers exist for JavaScript, NPM is by far the most widely used. The simplest way to initialize your React application is to use the npm init command. Using

npm init react-app library

Listing 2.9 Initializing a React application using “npm init”

you also create a local directory named library where Create React App builds the structure for your application. If Create React App isn’t installed on your system, NPM will download it temporarily, run it, and then discard it. Typically, you use the npm init command to create a new package.json file in an interactive process. In our case, you also pass the react-app initializer. NPM then uses the npxtool to download the package named create- and the name of the initializer and run it. Alternatively, you can also use npx directly. In this case, the relevant command is as follows:

npx create-react-app library

Listing 2.10 Creation of a New React Application Using “npx”

The effects of both commands are equivalent, and you can start working on your application directly afterward.

NoteThe Node Package Manager

The name of the NPM tool is somewhat misleading. NPM is a package manager for JavaScript that you can use both for server-side development with Node.js and for managing dependencies in the frontend. NPM is developed as an independent open-source project and is part of most Node.js installations. On the command line, NPM is available across the entire system via the npm command.

Besides the npm command there are other important components of NPM in your project: The package.json file, which is usually located in the root directory of your application, contains the description of your application. The node_modules directory stores the installed packages. Usualy, this directory does not get versioned along with the application. Instead, if you want to rebuild an existing application from the version control system, you need to run the npm install command to install all dependencies listed in the package.json file.

In addition to the package.json file, three is also the package-lock.json file. This file lists all installed dependencies of your application and their dependencies. It ensures that each installation of your application is similar to all other installations. In package-lock.json, you can find the package names, their locations in the NPM registry, and an integrity hash that protects against tampering with the package. You should version both the package.json and the package-lock.json files of your project.

You can install, update, and remove packages from your system using NPM. The following list introduces the most important commands:

• npm install <package name>

  Downloads the specified package from the NPM repository and installs it. The package is automatically entered as a dependency in the package.json file of your project. You can use the -save-dev option to specify that this is a dependency which is only needed during development.

• npm update <package name>

  Updates the specified package within the allowed version range specified in the package.json file.

• npm remove <package name>

  Removes the package.

• npm list

  Lists the currently installed packages.

• npm init

  Creates a package.json file.

NoteNota

Throughout the rest of this book, I will use NPM as a package manager. However, all examples can be reproduced with minor adjustments using Yarn or any other package manager, such as pnpm.

Do not Use the Global installation via NPM

A previously very common way to use Create React App was to install the tool globally via the -g option, which you can see in the following command:

npm install -g create-react-app

Listing 2.11 Installing Create React App Globally Using NPM

The global installation ensures that the tool is available to you system-wide on the command line. The drawback is that you then have only one fixed version of Create React App in your entire system and you have to take care of updating the tool yourself. Because you only need Create React App once for an application —namely, during the initialization— the risk of the tool becoming obsolete is very high. Today, Create React App even prohibits a global installation. If you try to use the tool in this mode, you’ll get the following error message: “We no longer support global installation of Create React App.” In this case, you have no choice but to uninstall the global installation and use one of the variants described previously.

In addition to NPM, you can use Yarn as a full-featured alternative to initialize your application.

NoteYarn

Yarn is a package manager for JavaScript developed by Facebook. The tool is open source and free to use.

Initialization Using “yarn create”

Listing 2.12 Initializing a React application using Yarn

Command Line Options of Create React App

Update of an Existing Application

Listing 2.13 Updating the “react-scripts” Package

Automatic Update of the Source Code via “react-codemod”

2.4.3 Alternatives to Create React App

2.4.4 React Scripts

2.4.5 Server Communication in Development Mode

2.4.6 Encrypted Communication during Development