Configuración de un proyecto de React con Create React App

React es una de las librerías de JavaScript más populares para desarrollar aplicaciones front-end. Es una librería de código abierto que fue desarrollada originalmente por Facebook. React se volvió popular rápidamente para crear aplicaciones rápidas con JSX – un paradigma de programación que combina JavaScript con una sintaxis similar a HTML.

Anteriormente, configurar un proyecto de React habría sido un proceso complejo. Requería configurar los siguientes componentes manualmente:

• Un sistema de compilación
• Transpilador de código (convierte sintaxis modernas en códigos legibles por el navegador)
• La estructura de directorios base para el proyecto

Afortunadamente, esos días quedaron atrás, gracias a Create React App. Es una herramienta maravillosa que automatiza todos estos pasos. Create React App se encarga de la transpilación de código, el análisis estático (linting), las pruebas y los sistemas de compilación. Además, viene con un servidor que admite la recarga en caliente (hot reloading), lo que significa actualizar las páginas web a medida que se realizan los cambios. Por supuesto, todo esto se hace dentro de una estructura de directorios organizada.

En resumen, no es necesario pasar por el trabajo manual de configurar sistemas de compilación como Webpack, o un transpilador como Babel. Con menos cosas de qué preocuparse, tiene la libertad de concentrarse por completo en el desarrollo front-end. Create React App le permite comenzar con React con una preparación mínima.

En esta guía, mostraremos cómo usar Create React App y tener una aplicación básica de React en funcionamiento. Puede servir como base para cualquier proyecto de aplicación futuro.

Requisitos previos

Para realizar los pasos demostrados en este tutorial, necesitará tener configurado previamente el siguiente software.

• • Un servidor Ubuntu configurado correctamente. Puede seguir los pasos para configurar un servidor Ubuntu en CloudSigma.
  • La última versión de Node.js instalada. Aquí tiene una guía paso a paso sobre cómo instalar Node.js en Ubuntu.

Paso 1: Crear un directorio de proyecto npm dedicado

Para los paquetes de Node.js, npm es el gestor de paquetes predeterminado. Usaremos npm para crear un directorio de proyecto dedicado. Albergará archivos importantes como package.json que almacenan todos los metadatos sobre el proyecto y módulos de dependencia adicionales de Node.js. JSON es un formato estándar de intercambio de datos basado en objetos de JavaScript. Consulte esta guía si desea obtener más información sobre JSON.

Primero, cree un directorio dedicado:

A continuación, le diremos a npm que inicie un entorno de desarrollo dentro del archivo. Esto creará el archivo package.json necesario para el proyecto. Cambie el directorio actual:

Ejecute el comando npm init :

Tenga en cuenta que si desea que este directorio forme parte de un repositorio de git, se recomienda configurarlo primero. El script de inicialización lo detectará automáticamente y lo configurará todo en consecuencia. Una vez finalizado, debería haber un archivo package.json en el directorio. Compruébelo con un editor de texto:

Paso 2: Crear un proyecto de React con Create React App

En este paso, invocaremos Create React App para establecer nuestro proyecto de React de muestra. Este script copiará todo lo necesario en un nuevo directorio junto con todas las dependencias. El gestor de paquetes npm también viene con la herramienta npx. Se utiliza para ejecutar paquetes ejecutables. Lo usaremos para ejecutar el script Create React App sin descargar realmente el proyecto.

La ejecución ejecutará create-react-app en el directorio especificado. También ejecutará comandos npm install para instalar las dependencias. Para facilitar su uso, utilizaremos el nombre cloudsigma-react-react-tutorial. Ejecute el siguiente comando:

Al final del proceso, verá el siguiente aviso. Es el mensaje de éxito si la instalación se realizó correctamente. También informa de la ubicación donde se creó el proyecto.

Paso 3: Aplicar React-Scripts

Ahora, tendremos una breve descripción general de los diversos react-scripts que se instalaron durante la instalación.

• • Ejecutaremos el test script para ejecutar el código de prueba.
  • El build script creará una versión minificada de nuestro proyecto (para el entorno de producción).
  • Finalmente, el eject script ofrece un control total sobre la personalización.

Primero, verifica el contenido del directorio del proyecto React:

Aquí hay una descripción de cada archivo:

• • node_modules/: Este directorio contiene todas las bibliotecas externas de JavaScript que utilizará la aplicación. Rara vez es necesario hacer modificaciones aquí.
  • public/: Aloja algunos archivos base HTML, JSON e imágenes. Sirve como la raíz del proyecto.
  • src/: Este directorio contiene los códigos JavaScript de React para nuestro proyecto. Aquí es donde pasaremos la mayor parte de nuestro tiempo. Exploraremos este directorio más a fondo en la siguiente parte de la guía.
  • .gitignore: Es un archivo que describe qué directorios ignorará git, por ejemplo, el node_modules directorio. Generalmente, es mejor excluir directorios que contengan archivos grandes o que alojen archivos de registro que no sean necesarios para incluir en el control de versiones. En este caso, también incluirá algunos directorios específicos de React.
  • README.md: Es un archivo markdown que contiene mucha información útil sobre Create React App. Por ejemplo, incluye un resumen de enlaces de comandos para configuración avanzada. Por ahora, no nos ocuparemos de él. Sin embargo, a medida que avance el proyecto, agregarás más documentación sobre el proyecto.

Los archivos package.json y package-lock.json son utilizados por npm. Al ejecutar el comando inicial npx, se creó el proyecto base. Cuando se instalaron las dependencias adicionales, se creó package-lock.json. npm utiliza package-lock.json para garantizar que los paquetes coincidan con las versiones exactas. De esta manera, si alguien más instala tu proyecto, también obtendrá dependencias idénticas. Como se crea y gestiona automáticamente, rara vez necesitarás tocarlo.

El último archivo del que debemos hablar es package.json. Contiene metadatos sobre el proyecto. Por ejemplo, los metadatos podrían incluir un título del proyecto, número de versión y dependencias. También incluye los scripts que puedes usar para ejecutar el proyecto. Revisa el contenido del archivo package.json archivo:

Es un archivo JSON con varios objetos. Echa un vistazo al objeto scripts. Contiene cuatro scripts diferentes:

• • start
  • build
  • test
  • eject

Estos scripts se enumeran según su importancia. El start script inicia el servidor de desarrollo local. A continuación, detallaremos cómo puedes usar el resto de los scripts.

• • El script Build

Para ejecutar un npm script, la estructura del comando es la siguiente:

Para ejecutar el build script, usa el siguiente comando:

Iniciará el proceso de compilación de los códigos en un paquete utilizable. Una vez terminado, revisa el directorio de salida:

Ten en cuenta que hay un nuevo directorio build/ disponible. Contiene una versión minificada y optimizada de los otros archivos. Se recomienda ponerlo en el archivo .gitignore ya que siempre podemos generarlo usando el build script.

• • El script Test

El test script es uno de esos scripts que no requieren el parámetro run para que npm lo ejecute. Sin embargo, seguirá funcionando bien con él. Al ejecutarse, este script iniciará un ejecutor de pruebas llamado Jest. El probador busca cualquier archivo de proyecto con extensiones de archivo .spec.js o test.js y ejecuta esos archivos.

El siguiente comando npm ejecutará el test script:

Hay algunas cosas a tener en cuenta en la salida. ¿Recuerdas que el ejecutor de pruebas solo busca archivos con extensiones específicas? En este caso, solo hay una única suite de pruebas (solo un archivo con .test.js de extensión). Solo contiene una única prueba. Jest puede detectar automáticamente las pruebas en la jerarquía de código, por lo que eres libre de anidar pruebas en un directorio.

Además, Jest no solo ejecuta la prueba una vez y finaliza. Sigue ejecutando la prueba en la terminal. Si se realiza algún cambio en el código fuente, volverá a ejecutar las pruebas. Jest también permite limitar qué pruebas ejecutar. Por ejemplo, al presionar 0, puedes indicarle a Jest que pruebe solo los archivos que han cambiado. A medida que las suites de pruebas crecen, esta opción ahorra mucho tiempo. Para salir del ejecutor de pruebas de Jest, presiona q.

• • El script Eject

El eject copia todas las dependencias y archivos de configuración en el proyecto, ofreciéndote un control total sobre el código. Sin embargo, al hacerlo, eliminas el proyecto de la cadena de herramientas integrada de Create React App. Una vez ejecutado, no hay forma de deshacerlo.

El beneficio de Create React App es que te quita la carga de numerosas configuraciones. La construcción de cualquier aplicación JavaScript moderna requiere muchas herramientas que funcionen en conjunto. Create React App se encarga de todas las configuraciones por ti, por lo que expulsar el proyecto significa que tendrás que hacer todo eso manualmente después.

Una desventaja notable de Create React App es que, debido a que gestiona todas las configuraciones por sí mismo, no ofrece una personalización completa del proyecto. Para la mayoría de los proyectos, eso no es un problema. Sin embargo, si deseas tomar el control total del proyecto, tendrás que expulsar el código. Una vez expulsado, no podrás actualizar a las nuevas versiones de Create React App. Tendrás que gestionar manualmente todas las mejoras.

Paso 4: Inicio del servidor

Ahora, iniciaremos el servidor local y ejecutaremos el proyecto en un navegador web. Para iniciar el servidor, tenemos otro script a mano. Ejecutarlo no requiere el npm run comando. Al ejecutarse, el script inicia un servidor local, ejecuta el código del proyecto, lanza un observador y escucha los cambios en el código. Los cambios se muestran directamente en el navegador. El siguiente comando iniciará el servidor:

La salida mostrará la URL para visitar el proyecto en un navegador. También mostrará diversa información sobre el proyecto en ejecución. Abre la URL en un navegador:

Como muestra la salida, Create React App utiliza el puerto 3000 para servir el proyecto. Si el puerto ya estuviera en uso, Create React App utilizará el siguiente puerto disponible. Si tienes un cortafuegos configurado, este debe permitir el tráfico al puerto 3000 (o al puerto que informe Create React App). Puedes obtener más información sobre cómo gestionar el cortafuegos UFW aquí.

Para salir del servidor, presiona Ctrl+C desde la ventana de la terminal. Esto terminará el proceso en ejecución (la instancia del servidor).

Paso 5: Modificación de la página de inicio

A continuación, aprenderemos cómo modificar el código almacenado en el directorio public/ . Contiene la página HTML base y sirve como raíz del proyecto. Aunque es posible que no necesites editarlo más en el futuro, sirve como base del proyecto.

Primero, inicia el servidor con npm, luego muévete al public/ directorio:

El directorio contendrá archivos como favicon.ico, logo192.png, logo512.png, etc. Estos son iconos que un usuario que visite la página web vería en su pestaña, navegador o teléfono. El navegador seleccionará automáticamente el del tamaño adecuado. Eventualmente, los reemplazarás con iconos adecuados para tu proyecto. Por ahora, los dejaremos como están.

El archivo manifest.json alberga un conjunto estructurado de metadatos. Describe el proyecto, enumera los iconos disponibles y más.

El archivo robots.txt alberga información para rastreadores web. Los rastreadores web “rastrean” a través de la World Wide Web, indexando páginas para los motores de búsqueda. No hay necesidad de modificar el archivo a menos que tengas una razón específica para hacerlo. Por ejemplo, es posible que desees hacer que ciertas URL a contenido específico no sean fácilmente accesibles. Agrega la ubicación a robots.txt y no será indexado por los motores de búsqueda.

El archivo index.html es la raíz de nuestra aplicación. Cada vez que se accede a la aplicación, este es el archivo que se sirve. Este es el archivo que ves en la pantalla. Echemos un vistazo rápido a él. Ábrelo en un editor de texto:

Es un archivo bastante corto. Ten en cuenta que no hay imágenes ni palabras en el <body>. React construye esos contenidos utilizando su propio motor y los inyecta usando JavaScript. Sin embargo, React necesita saber dónde inyectar el código. El archivo index.html sirve para ese propósito.

Cambiemos el <title> a Mi React App:

Luego, guarda el archivo y cierra el editor. Ahora, comprueba la página web en el navegador:

Como puedes ver, el título de la pestaña cambia a Mi React App. Si no cambió automáticamente, recarga la página presionando F5 o Ctrl+R.

Regresemos al editor de texto. Todos los proyectos de React deben comenzar desde un elemento raíz. Puede haber más de uno en una sola página. Sin embargo, al menos uno es obligatorio. Le dice a React dónde colocar todos los códigos HTML generados. En nuestro index.html, busca la ubicación del elemento <div id="root">. Es el <div> que React utilizará para futuros cambios. Intenta cambiar el id de root a base:

 

 

Después de eso, recarga la página en el navegador. No mostrará ningún contenido. Como muestran las Herramientas de desarrollo web de Firefox, se produce un error:

Regresa al editor de texto y cambia el valor de id de nuevo a root:

Paso 6: Etiqueta de encabezado y cambios de estilo

Hasta ahora, hemos iniciado el servidor local y realizado pequeños cambios en el archivo HTML raíz. Ahora, vamos a trabajar con los componentes de React ubicados en el directorio src/ . Realizaremos cambios en el código CSS y JavaScript. Los cambios se aplicarán automáticamente mediante la recarga en caliente (hot reloading).

Si el servidor se detuvo, inícialo usando npm. Luego, echa un vistazo al contenido del directorio src/ :

Hay múltiples archivos JavaScript y CSS aquí. Los revisaremos uno por uno.

• ServiceWorker.js

Es un archivo importante si deseas crear aplicaciones web progresivas. Este service worker ofrece varias funcionalidades como notificaciones push, almacenamiento en caché sin conexión, etc. Por ahora, lo dejaremos como está.

• SetupTests.js y App.test.js

Como sugiere el nombre de estos archivos, se utilizan para probar archivos. Cada vez que ejecutamos el script test usando npm, ejecutó estos archivos. El archivo setupTests.js contiene algunos métodos expect personalizados.

Echemos un vistazo a App.test.js. Ábrelo en un editor de texto:

Contiene una prueba básica que busca que la frase learn react esté presente en el documento. Si tienes la pestaña del navegador abierta, puedes ver la frase en la página. A diferencia de otras pruebas unitarias, las pruebas de React son diferentes. Debido a que los componentes pueden incluir información visual como marcado (y lógica para la manipulación de datos), las pruebas unitarias tradicionales no funcionan fácilmente. En ese sentido, las pruebas de React se describen mejor como una forma de prueba funcional o de integración.

• Archivos CSS

Hay varios archivos de estilo disponibles: App.css, index.css, y logo.svg. Puedes seguir múltiples métodos para aplicar estilos en React. La forma más fácil es escribir CSS puro, ya que no se requiere configuración adicional.

Se te permite importar CSS directamente en un componente. Esto permite dividir los archivos CSS para que solo se apliquen a un componente individual. En realidad, no estás separando el CSS del JavaScript. Más bien, estás agrupando todos los componentes relevantes (CSS, JavaScript, imágenes y marcado) juntos.

Abre App.css con un editor de texto:

Es un archivo CSS estándar sin preprocesadores CSS especiales. Puedes agregarlos más tarde si lo deseas. Create React App se esfuerza por ser neutral al tiempo que ofrece una experiencia sólida lista para usar.

Hagamos un cambio y veámoslo en acción. Cambia el valor de background-color a blue:

Comprueba el cambio en el navegador:

• • Index.js

Ahora, es el momento de realizar cambios en el código JavaScript de React. Abre index.js usando un editor de texto:

En la parte superior, está importando React, ReactDOM, index.css, App, y serviceWorker. Al importar React, estamos extrayendo el código necesario para convertir JSX a JavaScript. ReactDOM es el código que conecta nuestro código de React con el elemento base ( index.html, por ejemplo). Mira la siguiente línea:

Le está indicando a React que busque un id mediante la etiqueta root e inyecte los códigos de React allí. <App/> es el elemento raíz y todo se ramifica a partir de ahí.

Ten en cuenta que también importamos archivos CSS (como index.css) pero en realidad no hicimos nada con ellos. Al importarlos, en realidad le estamos diciendo a Webpack a través de los scripts de React que incluya los códigos CSS en el paquete compilado final. De lo contrario, los estilos CSS no se mostrarán.

• App.js

A continuación, echaremos un vistazo a App.js. Ábrelo en un editor de texto:

 

Veamos cómo afecta el cambio de su contenido a nuestro proyecto. Cambia el contenido de la etiqueta <p>:

Luego, guarda el archivo y comprueba los cambios en el navegador:

¡Voila! ¡Has realizado tus primeros ajustes en un componente de React!

Hay una cosa más a tener en cuenta. Mira el elemento <img>:

Ten en cuenta que el logo se pasa entre llaves. Siempre que se pasen atributos (que no sean cadenas o números), se deben pasar entre llaves. Luego, React los tratará como objetos JavaScript en lugar de cadenas.

En este caso, la aplicación no está importando la imagen en realidad. En su lugar, es una referencia a la imagen. Cuando Webpack compila el proyecto, coloca la imagen en la posición adecuada. Podemos verificarlo en el navegador. Abre las Herramientas de desarrollo web en Firefox:

Webpack quiere asignar rutas de archivo únicas para todas las imágenes. Por lo tanto, incluso si las imágenes se importaron con el mismo nombre, tendrán rutas diferentes.

Paso 7: Compilación del proyecto

En este paso, aprenderemos cómo compilar el proyecto en un paquete desplegable. Inicia la terminal y ejecuta el script build del proyecto:

El compilador creará el directorio dedicado build/donde colocará la salida. Para ver qué hace el proceso de compilación, abre el archivo index.html desde el directorio build/:

Como puedes ver, todo el código está compilado y minificado al estado utilizable más pequeño posible. La legibilidad no es una preocupación, ya que no es la parte del código que ve el público. El código minificado ocupa menos espacio al tiempo que conserva todas sus funcionalidades. A diferencia de los lenguajes donde el espacio en blanco es muy importante (Python, por ejemplo), los lenguajes web (HTML, CSS y JavaScript) no requieren un espaciado adecuado para que el navegador los interprete.

Reflexiones finales

En esta guía, hemos demostrado con éxito cómo crear una aplicación de React. También mostramos algunas configuraciones básicas utilizando herramientas de compilación de JavaScript sin detalles técnicos complejos. Este es el valor clave que ofrece Create React App. No tienes que saberlo todo para empezar con React. Se te permite no aprender los complicados pasos de compilación mientras te concentras exclusivamente en el código de React.

Aquí también hemos demostrado cómo iniciar, probar y compilar un proyecto de React. Estos comandos son esenciales para proyectos de todos los tamaños.

¡Feliz programación!