Aprendiendo React, 2ª Edición

Capítulo 1. Bienvenido a React

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

¿Qué hace que una biblioteca JavaScript sea buena? ¿Es el número de estrellas en GitHub? ¿El número de descargas en npm? ¿Es importante el número de tweets que los ThoughtLeaders™ escriben sobre ella a diario? ¿Cómo elegimos la mejor herramienta para construir lo mejor? ¿Cómo sabemos que merece nuestro tiempo? ¿Cómo sabemos que es bueno?

Cuando se lanzó React por primera vez, se habló mucho de si era bueno, y hubo muchos escépticos. Era nuevo, y lo nuevo a menudo puede resultar molesto.

Para responder a estas críticas, Pete Hunt, del equipo React, escribió un artículo titulado "¿Por qué React?" que recomendaba "darle [a React] cinco minutos". Quería animar a la gente a trabajar primero con React antes de pensar que el enfoque del equipo era demasiado alocado.

Sí, React es una pequeña biblioteca que no viene con todo lo que puedes necesitar para crear tu aplicación. Dedícale cinco minutos.

Sí, en React escribes código que parece HTML directamente en tu código JavaScript. Y sí, esas etiquetas requieren preprocesamiento para ejecutarse en un navegador. Y probablemente necesitarás una herramienta de compilación como webpack para ello. Dale cinco minutos.

A medida que React se acerca a una década de uso, muchos equipos decidieron que es bueno porque le dedicaron cinco minutos. Estamos hablando de Uber, Twitter, Airbnb y Twitter: empresas enormes que probaron React y se dieron cuenta de que podía ayudar a los equipos a crear mejores productos más rápidamente. Al fin y al cabo, ¿no estamos todos aquí para eso? No por los tweets. No por las estrellas. Ni por las descargas. Estamos aquí para construir cosas geniales con herramientas que nos gusta utilizar. Estamos aquí por la gloria de enviar cosas que nos enorgullece decir que hemos construido. Si te gusta hacer ese tipo de cosas, probablemente te gustará trabajar con React.

Una base sólida

Tanto si eres nuevo en React como si buscas este texto para aprender algunas de las últimas funciones, queremos que este libro te sirva de base sólida para todo tu trabajo futuro con la biblioteca. El objetivo de este libro es evitar confusiones en el proceso de aprendizaje poniendo las cosas en una secuencia: una hoja de ruta de aprendizaje.

Antes de profundizar en React, es importante conocer JavaScript. No todo JavaScript, ni todos los patrones, pero te resultará útil familiarizarte con las matrices, los objetos y las funciones antes de adentrarte en este libro.

En el siguiente capítulo, veremos la sintaxis más reciente de JavaScript para que te familiarices con las últimas funciones de JavaScript, especialmente las que se utilizan con frecuencia con React. Luego haremos una introducción al JavaScript funcional para que entiendas el paradigma que dio origen a React. Un bonito efecto secundario de trabajar con React es que puede convertirte en un desarrollador de JavaScript más fuerte al promover patroneslegibles, reutilizables y comprobables. Algo así como un suave y útil lavado de cerebro.

A partir de ahí, cubriremos los conocimientos básicos de React para entender cómo construir una interfaz de usuario con componentes. Luego aprenderemos a componer estos componentes y a añadir lógica con props y estado. Cubriremos los React Hooks, que nos permiten reutilizar la lógica con estado entre componentes.

Una vez establecidas las bases, construiremos una nueva aplicación que permita a los usuarios añadir, editar y eliminar colores. Aprenderemos cómo Hooks y Suspense pueden ayudarnos con la obtención de datos. A lo largo de la construcción de esa aplicación, presentaremos una serie de herramientas del ecosistema React más amplio que se utilizan para gestionar problemas comunes como el enrutamiento, las pruebas y la renderización del lado del servidor.

Esperamos que te pongas al día con el ecosistema React más rápidamente abordándolo de esta manera, no sólo para arañar la superficie, sino para equiparte con las herramientas y habilidades necesarias para crear aplicaciones React en el mundo real.

Pasado y futuro de React

React fue creado por primera vez por Jordan Walke, un ingeniero de software de Facebook. Se incorporó al newsfeed de Facebook en 2011 y más tarde a Instagram, cuando fue adquirida por Facebook en 2012. En la JSConf de 2013, React se convirtió en código abierto y se unió a la abarrotada categoría de bibliotecas de interfaz de usuario como jQuery, Angular, Dojo, Meteor y otras. En aquel momento, React se describió como "la V en MVC". En otras palabras, los componentes de Reactactuaban como la capa de vista o la interfaz de usuario de tusaplicaciones JavaScript.

A partir de ahí, la adopción por parte de la comunidad comenzó a extenderse. En enero de 2015, Netflix anunció que estaba utilizando React para potenciar el desarrollo de su interfaz de usuario. Ese mismo mes se publicó React Native, una biblioteca para crear aplicaciones móviles con React. Facebook también lanzó ReactVR, otra herramienta que llevó React a una gama más amplia de objetivos de renderizado. En 2015 y 2016, un gran número de herramientas populares como React Router, Redux y Mobx aparecieron en escena para gestionar tareas como el enrutamiento y la gestión de estados. Después de todo, React se presentó como una biblioteca: preocupada por implementar un conjunto específico de funciones, no por proporcionar una herramienta para cada caso de uso.

Otro gran acontecimiento en la línea de tiempo fue el lanzamiento de React Fiber en 2017. Fiber fue una reescritura del algoritmo de renderizado de React que tuvo algo de mágico en su ejecución. Fue una reescritura completa de las partes internas de React que apenas cambió nada de la API pública. Era una forma de hacer React más moderno y eficaz sin afectar a sus usuarios.

Más recientemente, en 2019, hemos visto el lanzamiento de Hooks, una nueva forma de añadir y compartir lógica con estado entre componentes. También hemos visto el lanzamiento de Suspense, una forma de optimizar la renderización asíncrona con React.

En el futuro, veremos inevitablemente más cambios, pero una de las razones del éxito de React es el sólido equipo que ha trabajado en el proyecto a lo largo de los años. El equipo es ambicioso pero cauto, impulsando optimizaciones con visión de futuro al tiempo que considera constantemente el impacto que cualquier cambio en la biblioteca enviará en cascada a través de la comunidad.

Como en se realizan cambios en React y en las herramientas relacionadas, a veces se producen cambios de ruptura. De hecho, las futuras versiones de estas herramientas pueden romper parte del código de ejemplo de este libro. Aún así, puedes seguir los ejemplos de código. Proporcionaremos información exacta sobre la versión en el archivo package.json para que puedas instalar estos paquetes con la versión correcta.

Además de, puedes estar al tanto de los cambios siguiendo el blog oficial de React. Cuando se publiquen nuevas versiones de React, el equipo central escribirá una entrada detallada en el blog y un registro de cambios sobre las novedades. El blog también se ha traducido a una lista cada vez mayor de idiomas, así que si el inglés no es tu lengua materna, puedes encontrar versiones localizadas de los documentos en lapágina de idiomas del sitio de documentos.

Aprender React: Segunda Edición Cambios

Este es la segunda edición de Aprender React. Nos pareció importante actualizar el libro porque React ha evolucionado bastante en los últimos años. Pretendemos centrarnos en todas las buenas prácticas actuales que defiende el equipo de React, pero también compartiremos información sobre funciones de React obsoletas. Hay mucho código React que se escribió hace años utilizando estilos antiguos que aún funciona bien y debe mantenerse. En todos los casos, mencionaremos estas características en una barra lateral por si te encuentras trabajando con aplicaciones React heredadas.

Trabajar con los archivos

En esta sección, hablaremos de cómo trabajar con los archivos de este libro y de cómo instalar algunas herramientas útiles de React.

Depósito de archivos

El repositorio GitHub asociado a este libro proporciona todos los archivos de código organizados por capítulos.

Herramientas para desarrolladores React

En recomendamos encarecidamente instalar React Developer Tools para apoyar tu trabajo en proyectos React. Estas herramientas están disponibles como extensión del navegador para Chrome y Firefox, y como aplicación independiente para Safari, IE y React Native. Una vez que instale las herramientas de desarrollo, podrás inspeccionar el árbol de componentes React, ver detalles de props y estados, e incluso ver qué sitios están utilizando actualmente React en producción. Esto es realmente útil a la hora de depurar y de aprender cómo se utiliza React en otros proyectos.

Para instalarla, dirígete alrepositorio de GitHub. Allí encontrarás enlaces a las extensiones paraChromey Firefox.

Una vez instalado, podrás ver qué sitios utilizan React. Siempre que el icono de React se ilumine en la barra de herramientas del navegador, como se muestra enla Figura 1-1, sabrás que el sitio tiene React en la página.

Figura 1-1. Visualización de las herramientas de desarrollo de React en Chrome

Entonces, cuando abras las herramientas de desarrollo, habrá una nueva pestaña visible llamada React, como se muestra en la Figura 1-2. Si haces clic en ella, se mostrarán todos los componentes que forman la página que estás viendo en ese momento.

Figura 1-2. Inspeccionar el DOM con las herramientas de desarrollo de React

Instalar Node.js

Node.js es un entorno de ejecución de JavaScript que se utiliza para crear aplicaciones full-stack. Node es de código abierto y puede instalarse en Windows, macOS, Linux y otras plataformas. Utilizaremos Node en el Capítulo 12cuando construyamos un servidor Express.

Necesitas tener instalado Node, pero no necesitas ser un experto en Node para utilizar React. Si no estás seguro de si Node.js está instalado en tu máquina, puedes abrir una ventana de Terminal o de símbolo del sistema y escribir:

node -v

Cuando ejecutes este comando, deberías ver que se te devuelve un número de versión de Node, idealmente 8.6.2 o superior. Si tecleas el comando y ves un mensaje de error que dice "Comando no encontrado", Node.js no está instalado. Esto se soluciona fácilmente instalando Node.js desde elsitio web de Node.js. Sólo tienes que seguir los pasos automatizados del instalador y, cuando vuelvas a escribir el comando node -v, verás el número de versión.

npm

Cuando instalaste Node.js, también instalaste npm, el gestor de paquetes de Node. En la comunidad JavaScript, los ingenieros comparten proyectos de código abierto para evitar tener que reescribir marcos, bibliotecas o funciones de ayuda por su cuenta. El propio React es un ejemplo de biblioteca npm útil. Utilizaremos npm para instalar diversos paquetes a lo largo de este libro.

La mayoría de los proyectos JavaScript de que encuentres hoy en día contendrán una colección variada de archivos más un archivo package.json. Este archivo describe el proyecto y todas sus dependencias. Si ejecutasnpm install en la carpeta que contiene el archivo package.json, npm instalará todos los paquetes enumerados en el proyecto.

Si estás empezando tu propio proyecto desde cero y quieres incluir dependencias, simplemente ejecuta el comando

npm init -y

Esto inicializará el proyecto y creará un archivo package.json. A partir de ahí, puedes instalar tus propias dependencias con npm. Para instalar un paquete con npm, ejecutarás

npm install package-name

Para eliminar un paquete con npm, ejecutarás

npm remove package-name

Hilo

Una alternativa de a npm es Yarn. Fue lanzado en 2016 por Facebook en colaboración con Exponent, Google y Tilde. El proyecto ayuda a Facebook y a otras empresas a gestionar sus dependencias de forma fiable. Si estás familiarizado con el flujo de trabajo de npm, ponerte al día con Yarn es bastante sencillo. Primero, instala Yarn globalmente con npm:

npm install -g yarn

Entonces, estarás listo para instalar paquetes. Al instalar dependencias desde package.json, en lugar de npm install, puedes ejecutar yarn.

Para instalar un paquete concreto con yarn, ejecuta:

yarn add package-name

Para eliminar una dependencia, el comando también es familiar:

yarn remove package-name

Yarn es utilizado en producción por Facebook y está incluido en proyectos como React, React Native y Create React App. Si alguna vez encuentras un proyecto que contenga un archivo yarn.lock, el proyecto utiliza yarn. De forma similar al comandonpm install, puedes instalar todas las dependencias del proyecto escribiendo yarn.

Ahora que tienes tu entorno configurado para el desarrollo de React, estás listo para empezar a recorrer el camino del aprendizaje de React. En el Capítulo 2, nos pondremos al día con la última sintaxis de JavaScript que se encuentra con más frecuencia en el código React.