Читать книгу: «Ejercicios prácticos con React», страница 2

1
Uso de React

En este capítulo se tratarán las siguientes recetas:

• Introducción

• Uso de React con las últimas características de JS

• ¿Qué hay nuevo en React?

• Uso de React en Windows

Introducción

React es una biblioteca JavaScript (con licencia del MIT), desarrollada por Facebook, para crear interfaces de usuario interactivas. Se utiliza para crear componentes dinámicos y reutilizables. Lo mejor de React es que se puede usar en aplicaciones del lado de cliente, del lado de servidor, en aplicaciones para móviles e incluso en aplicaciones de RV.

En las páginas web modernas, es necesario manipular el DOM constantemente. El problema es que hacerlo a menudo puede afectar seriamente al rendimiento de la aplicación. React utiliza un DOM virtual, lo que significa que todas las actualizaciones ocurren en la memoria (esta operación es más rápida que manipular el DOM real directamente). La curva de aprendizaje de React es corta en comparación con otros frameworks de JavaScript como Angular, Vue o Backbone, principalmente porque el código de React está escrito en su mayoría en JavaScript moderno (clases, funciones flecha, plantillas de cadenas de texto, etc.) y no tiene demasiados patrones para escribir código, como son la inyección de dependencias, o un sistema de plantillas, como en Angular.

Empresas como Airbnb, Microsoft, Netflix, Disney, Dropbox, Twitter, PayPal, Salesforce, Tesla y Uber utilizan React de forma generalizada en sus proyectos. En este libro, aprenderá a desarrollar sus aplicaciones de React de la misma forma que la utilizan estas empresas, haciendo uso de las mejores prácticas.

Uso de React empleando las últimas características de JS

Como dije en la introducción, React está escrito principalmente en JavaScript moderno (ES6, ES7 y ES8). Si desea aprovechar las ventajas de React, hay nuevas características de JS que debe dominar para obtener los mejores resultados de las aplicaciones de React. En esta primera receta, va a tratar las características esenciales de JS para que esté preparado y pueda empezar a trabajar en su primera aplicación de React.

Cómo hacerlo...

En esta sección, verá cómo utilizar en React las características más importantes de JS:

1. let y const. La nueva forma de declarar variables es mediante let o const. Puede utilizar let para declarar variables que pueden cambiar sus valores pero solo en el ámbito de un bloque del programa. La diferencia entre let y var es que let es una variable en el ámbito de bloque, por lo que no puede ser global, y con var puede declarar una variable global. Por ejemplo:

2. Para comprender de forma clara el “ámbito de bloque” va a declarar un bucle for con var y let. En primer lugar, va a utilizar var y verá su comportamiento:

3. Si escribe el mismo código, pero con let, ocurrirá lo siguiente:

4. Con const, puede declarar constantes, lo que significa que su valor es inalterable (excepto para matrices y objetos):

5. Si declara una matriz con const, puede manipular los elementos de la misma (añadirlos, eliminarlos, o modificarlos):

6. También, al utilizar objetos, puede añadir, eliminar o modificar nodos:

7. Operador de propagación. El operador de propagación (...) separa un objeto iterable en valores individuales. En React, se puede utilizar para añadir valores a una matriz, por ejemplo cuando quiere añadir un nuevo elemento a una lista de tareas utilizando setState (esto se explicará en el siguiente capítulo):

8. El operador de propagación se puede utilizar también en React para propagar atributos (props) en JSX:

9. El parámetro rest. El parámetro rest se representa también por .... Al último parámetro de una función prefijado con ... se le llama parámetro rest. El parámetro rest es una matriz que contendrá el resto de los parámetros de una función cuando el número de argumentos es superior al número de parámetros especificado:

10. Desestructuración. La función de asignación desestructurada es la que más se utiliza en React. Es una expresión que nos permite asignar los valores o propiedades de un objeto iterable a variables. Generalmente, con esta función puede convertir sus componentes props en variables (o constantes):

11. Funciones flecha. ES6 proporciona una nueva forma de crear funciones utilizando el operador =>. A estas funciones se les llama funciones flecha. Este nuevo método tiene una sintaxis más corta, y las funciones flecha son anónimas. En React, las funciones flecha se utilizan para enlazar el objeto this a los métodos en lugar de enlazarlo al constructor:

12. Plantillas literales. Las plantillas literales son una nueva forma de crear una cadena de caracteres utilizando comillas invertidas (` `) en lugar de comillas simples (' ') o dobles (" "). React utiliza las plantillas literales para concatenar nombres de clases o para renderizar (representar) una cadena usando un operador ternario:

13. Map. El método map()devuelve una nueva matriz con los resultados de la llamada a una función que actúa sobre cada elemento de la matriz que hace la llamada. Map se utiliza frecuentemente en React, y se emplea fundamentalmente para renderizar múltiples elementos dentro de un componente de React. Por ejemplo, se puede utilizar para renderizar una lista de tareas:

14. Object.assign(). El método Object.assign() se utiliza para copiar los valores de las propiedades características enumerables de uno o más objetos fuente a un objeto destino. Devuelve el objeto destino. Este método se utiliza en Redux para crear objetos inmutables y devolver un nuevo estado a los reductores (Redux se tratará en el Capítulo 5, Dominio de Redux):

15. Clases. Las clases en JavaScript, introducidas en ES6, son fundamentalmente una nueva sintaxis para la herencia basada en prototipos existentes. Las clases son funciones y no son izadas. React utiliza clases para crear los Componentes de clase:

16. Métodos estáticos. A los métodos estáticos no los requieren las instancias de clase. En lugar de esto, los precisa la clase misma. Son a menudo funciones de utilidades, pero también pueden ser funciones para crear o clonar objetos. En React se pueden utilizar para definir las PropTypes en un componente:

17. Promises. El objeto Promise (promesa) representa la eventual finalización (o fallo) de una operación asíncrona y el valor resultante. Utilizará promises en React para tratar las peticiones utilizando axios o fetch; también va a usar promises para implementar la renderización del lado del servidor (esto se tratará en el Capítulo 11, Implementación de la renderización del lado del servidor).

18. async/await. La declaración de una función async define una función asíncrona, que devuelve el objeto AsyncFunction. Esta también se puede utilizar para realizar una petición al servidor, por ejemplo utilizando axios:

¿Qué novedades hay en React?

Este párrafo lo escribí el 14 de agosto de 2018, y la última versión de React era 16.4.2. La version 16 de React tiene una nueva arquitectura central llamada Fiber.

En esta receta, verá las actualizaciones más importantes de esta versión que debe conocer para sacar el máximo partido a React.

Cómo hacerlo...

Vea las nuevas actualizaciones:

1. Los componentes pueden devolver matrices y cadenas en el renderizado: Antes, para devolver un elemento, React obligaba a envolverlo con <div> o con cualquier otra etiqueta. Ahora es posible devolver una matriz o una cadena directamente:

2. React tiene ahora también una nueva característica llamada Fragment (fragmento), que funciona como un envoltorio especial para los elementos. Se puede especificar con etiquetas vacías (<></>) o utilizando directamente React.Fragment:

3. Límite de error. Explicación que aparece en el sitio web oficial:

Un error de JavaScript en una parte de la interfaz de usuario (IU) no debería afectar a toda la aplicación. Para resolver este problema a los usuarios de React, React 16 introduce un nuevo concepto de “límite de error". Los límites de error son componentes de React que capturan errores de JavaScript en cualquier parte del árbol de componentes hijo, registran esos errores y muestran una interfaz de usuario de emergencia en lugar del árbol de componentes que ha fallado. Los límites de error detectan errores durante el renderizado, en los métodos de ciclo de vida y en los constructores del árbol que se encuentra debajo de ellos. Un componente de clase se convierte en límite de error si define un nuevo método de ciclo de vida llamado componentDidCatch(error, info).

4. Mejora del renderizado del lado del servidor. Como se indica en el sitio web oficial:

React 16 incluye un renderizador que ha sido reescrito en su totalidad. Es muy rápido. Soporta streaming, por lo que es posible empezar a enviar bytes al cliente más rápidamente. Y gracias a una nueva estrategia de empaquetado que compila las comprobaciones de process.env (¡lo creas o no, la lectura de process.env en Node es realmente lenta!), ya no es necesario empaquetar React para obtener un buen rendimiento de renderizado del servidor.

5. Reducido tamaño del archivo. Como se indica en el sitio web oficial: A pesar de todas estas incorporaciones, React 16 es muy pequeño comparado con la versión 15.6.1.

• React ocupa 5,3 kb (2,2 kb comprimido), inferior a los 20,7 kb (6,9 kb comprimido)

• React-dom ocupa 103,7 kb (32,6 kb comprimido), inferior a los 141 kb (42,9 kb comprimido)

• react + react-dom ocupa 109 kb (34,8 kb comprimido), inferior a los 161,7 kb (49,8 kb comprimido)

Esto equivale a una reducción de tamaño combinada del 32 % en comparación con la versión anterior (30 % después de comprimirlo).

Si quiere consultar las últimas actualizaciones de React, visite el blog oficial de React: https://reactjs.org/blog.

Utilización de React en Windows

No soy un gran fan del desarrollo con Windows ya que a veces su configuración resulta problemática. Prefiero siempre Linux o Mac, pero soy consciente de que muchos de los que están leyendo este libro utilizan Windows. En esta receta mostraré los problemas más habituales que se pueden presentar si trata de seguir las recetas de este libro utilizando Windows.

Cómo hacerlo...

Va a ver ahora los problemas más habituales haciendo el desarrollo con Windows:

1. Terminal. El primer problema con el que se enfrenta es utilizar el terminal de Windows (CMD) porque no soporta los comandos Unix (como Linux o Mac). La solución es instalar un terminal Unix. La opción más recomendada es utilizar el terminal de Git Bash, incluido en la instalación de Git (https://gitscm.com), y la segunda opción es instalar Cygwin, un terminal Linux en Windows (https://www.cygwin.com).

2. Variables de entorno. Otro problema que aparece con frecuencia cuando se utiliza Windows es establecer variables de entorno. En general, cuando escribe scritps npm, establece variables de entorno como NODE_ENV=production o BABEL_ENV=development, pero para establecer esas variables en Windows, se utiliza el comando SET, lo que significa que se necesita escribir SET NODE_ENV=production o SET BABEL_ENV=development. El problema al hacer esto es que si está trabajando con otros colaboradores que utilizan Linux o Mac, tendrán problemas con el comando SET, y probablemente necesitará ignorar este archivo y modificarlo solo para su entorno local. Puede ser aburrido. La solución a este problema es utilizar el paquete llamado cross-env. Este se puede instalar haciendo npm install cross-env, y esta solución funcionará en Windows, Mac, y Linux:

3. Archivos o directorios sensibles a mayúsculas y minúsculas. En realidad, este problema también se presenta en Linux, pero a veces es muy dificil identificarlo. Por ejemplo, esto ocurre si crea un componente en el directorio components/home/Home.jsx, pero en el código trata de importar un componente como este:

Normalmente, esta forma de proceder no causará ningún problema en Mac, pero puede generar un error en Linux o Windows, ya que está tratando de importar un archivo que tiene un nombre diferente (debido a que son sensibles a mayúsculas y minúsculas) en el directorio.

4. Rutas. Windows utiliza la barra invertida (\) para definir una ruta, mientras que en Mac o Linux se usa la barra oblicua (/). Esto constituye un problema, porque si se necesita definir una ruta (principalmente en Node.js) hay que hacer algo semejante a:

2
Cómo dominar los componentes y JSX

En este capítulo se tratarán las siguientes recetas:

• Creación del primer componente de React Organización de aplicaciones de React

• Estilización de componentes con clases CSS y estilos en línea

• Paso de props a componentes y su validación con PropTypes

• Uso del estado local en componentes

• Creación de componentes funcionales o apátridas Asimilación de los métodos de ciclo de vida de React Asimilación de los componentes puros de React

• Prevención de las vulnerabilidades de XSS en React

Introducción

Este capítulo contiene recetas que tienen como objetivo la creación de componentes de React. Va a aprender cómo crear componentes de React (componentes de clase, puros y funcionales) y organizar la estructura del proyecto. También aprenderá a utilizar el estado local de React, a implementar los métodos de ciclo de vida en React, y finalmente verá cómo prevenir vulnerabilidades en XSS.

Creación del primer componente de React

Los componentes son la parte esencial de React. Con React se pueden crear componentes interactivos y reutilizables. Con esta receta creará el primer componente de React.

Preparación

En primer lugar, necesita crear la aplicación en React mediante create-react-app. Una vez hecho esto, puede proceder a crear el primer componente de React.

Antes de instalar create-react-app, recuerde que necesita descargar e instalar Node de www.nodejs.org. Puede instalarlo en Mac, Linux y Windows.

Instala create-react-app globalmente tecleando el siguiente comando en el terminal:

O se puede usar un atajo:

Cómo hacerlo...

Va a crear la primera aplicación de React siguiendo estos pasos:

1. Crea la aplicación de React con el siguiente comando:

2. Va a la nueva aplicación con cd my-first-react-app y la inicia con npm start.

3. La aplicación debería estar ahora ejecutándose en http://localhost:3000.

4. Crea un nuevo archivo llamado Home.js dentro de la carpeta src:

5. Como ha podido observar, al final del archivo exporta el componente de clase, pero esto también se puede hacer directamente en la declaración de clase, de esta manera:

Yo prefiero exportarlo al final del archivo, pero a otros programadores les gusta hacerlo de esta forma, así que depende de lo que usted prefiera hacer.

6. Ahora que ya ha creado el primer componente, tiene que renderizarlo. Así que necesita abrir el archivo App.js, importa el componente Home y, a continuación, lo añade al método de renderizado del componente App. Al abrir este archivo por primera vez, probablemente verá un código como el siguiente:

7. Va a modificar ligeramente este código. Como dije antes, necesita importar el componente Home y después lo añade a JSX. También necesita sustituir el elemento <p> con su componente, como sigue:

Cómo funciona...

Como puede ver, importa React y Component de la biblioteca de React. Seguramente ha observado que no utilizará el objeto React directamente. Para escribir en código JSX necesita importar React. JSX es similar a HTML, pero con algunas diferencias. En las siguientes recetas, aprenderá más sobre JSX.

A este componente se le llama class (React.Component), y hay diferentes tipos: componentes puros (React.PureComponent) y componentes funcionales, también conocidos como componentes apátridas, que se tratarán en las siguientes recetas.

Si ejecuta la aplicación, debería ver algo similar a esto:

Hay más...

En el ejemplo dado, creará el archivo Home.js, y el nombre del componente es Home.

La primera letra de los nombres de los componentes de React debería ser mayúscula, tanto el nombre del archivo como el de clase. Al principio puede resultar incómodo, pero en React es la mejor práctica.

Algunas de las diferencias más importantes entre JSX y HTML son los nombres de los atributos. Habrá observado que utilizará className en lugar de class. Este es el único nombre de atributo especial. Otros que tienen dos palabras separadas por un guion necesitan convertirse a camelCase, por ejemplo, onClick, srcSet, y tabIndex. Los atributos aria-* y data-* siguen utilizando la misma nomenclatura (data-something y aria-label).

La organización de aplicaciones de React

En esta receta aprenderá cómo estructurar mejor el proyecto.

Cómo hacerlo...

Puede crear componentes de React con la estructura de archivos por defecto que proporciona create-react-app, pero en esta receta presentaré una opción para mejorar la organización del proyecto, de manera que esté preparado para cuando la aplicación crezca.

1. Necesita crear una nueva aplicación de React (compruebe la última receta si todavía no la ha creado).

2. En este momento, el árbol del directorio de la aplicación de React tiene el siguiente aspecto:

3. Necesita crear los directorios src/components y src/shared.

4. A continuación, necesita crear el directorio src/components/Home para el componente, y mover Home.js a esta carpeta.

5. El archivo App.js se queda en el nivel de src/components.

6. También App.css y App.test.js se quedarán en el nivel de src/components.

7. Mueva el archivo logo.svg a src/shared/images.

8. index.js permanece en el nivel src/.

9. Ahora el árbol del directorio tendría el siguiente aspecto:

Recomiendo encarecidamente crear otro directorio para componentes compartidos, src/shared/components. Explicaré este punto con mayor detenimiento en las siguientes recetas.

10. En el archivo App.js, cambiará las importaciones logo y Home:

11. Después de realizar este cambio, necesitará abrir index.js y redefinir la ruta de importación para el componente App:

Cómo funciona...

Esta nueva estructura le proporcionará una mayor flexibilidad al agrupar los componentes de React de forma más inteligente. Con esta nueva estructura, va a poder crear subcomponentes, si los necesita, y eso es muy importante cuando se desarrollan aplicaciones complejas con React.

En las siguientes recetas, verá cómo compartir componentes en la aplicación.