Tutorial de React: Cómo comenzar y cómo se compara

El front-end y JavaScript en particular son un mundo extraño. La cantidad de cosas nuevas que se implementan a diario a menudo es ridiculizada por personas que no trabajan con ellas y muchas que sí lo hacen. Aún así, a veces, nos sentimos un poco abrumados con nueva información, bibliotecas y discusiones, y nos gustaría algo estable, como un refugio seguro para los barcos donde podamos quedarnos un poco más. Últimamente, React parece ser este puerto dócil en un mar de evolución dinámica de JavaScript.

Con eso en mente, decidimos producir este tutorial de React de varias partes, para mostrar sus capacidades y ver cómo se compara con Angular y VueJS.

Por supuesto, React no es el único puerto que podemos usar, pero en este momento es una de las soluciones más populares, estables e innovadoras, y aunque todavía recibe muchas actualizaciones, son más una opción de mejora que que una necesidad para la función.

El estado de React en 2019

React es una biblioteca de visualización a la que podemos rastrear desde 2011, cuando su primer prototipo, llamado FaxJs, apareció en su página de Facebook. Jordan Walke (quien también es autor del prototipo mencionado) presentó React en JSConfUS en 29 de mayo de 2013 y estuvo disponible abiertamente en GitHub el 2 de julio de 2013.

React continuó ganando popularidad en 2014, cuando comenzaron a aparecer conferencias para expandir la comunidad y popularizar React. Sin embargo, desde mi perspectiva, 2015 fue un año histórico para React: a las grandes empresas (p. ej., Airbnb y Netflix) les empezaron a gustar y adoptar las soluciones de React. Además, React Native apareció ese año. La idea detrás de React Native no era algo absolutamente nuevo, pero era interesante de ver, especialmente porque estaba respaldado por Facebook.

Otro gran cambio fue Redux, una implementación de Flux. Esto hizo que la gestión estatal fuera mucho más accesible y fácil, lo que la convirtió en la implementación más exitosa hasta la fecha.

Entre entonces y ahora, muchas otras cosas estuvieron disponibles, incluidas las herramientas React, una reescritura del algoritmo central, Fiber, un cambio en el control de versiones semántico, etc. Avance rápido hasta hoy, estamos en 16.6.3, probablemente unas semanas antes de que esté disponible la nueva versión con Hooks (se suponía que sería 16.7.0, pero ya se lanzó debido a algunas correcciones para React.lazy). React es bien conocido y estable y recibe excelentes opiniones.

Pero, ¿qué es reaccionar?

Bueno, si eres un desarrollador front-end y aún no has oído hablar de él, entonces debo decirte que te felicito, ya que es toda una hazaña.

Bromas aparte, React es una biblioteca de vista declarativa basada en componentes que te ayuda a crear una interfaz de usuario. Es una biblioteca, no un marco, aunque al principio mucha gente lo describió como lo último.

Obviamente, si vamos a agregar Redux, React Router, etc., comienza a tener todas las cosas necesarias para hacer una aplicación regular de una sola página, lo que podría ser una razón por la cual a veces se caracteriza erróneamente como un marco en lugar de una biblioteca. . En todo caso, se podría argumentar que, con todos los componentes de ese entorno juntos, el término "marco" es algo apropiado, pero por sí solo, React es solo una biblioteca.

Detengámonos en la nomenclatura y centrémonos en lo que es diferente en React, en las cosas que no teníamos antes de su creación. En primer lugar, cuando piensa por primera vez en React, piensa en JSX, ya que es lo primero que ve cuando mira el código. JSX es una extensión de sintaxis de JavaScript que se parece un poco a HTML/XML. Cuando se trata de React y JSX, tenemos algunas diferencias con HTML, por ejemplo, una clase en React es className , no hay tabindex sino tabIndex , el estilo acepta objetos JavaScript que tienen propiedades camelCased, etc.

Hay algunas diferencias menores, pero cualquiera debería aprenderlas en poco tiempo. El manejo de eventos es a través de, por ejemplo, los atributos onChange y onClick que se pueden usar para adjuntar alguna función para manejar eventos. Además, los componentes posteriores se pueden reutilizar y personalizar libremente mediante el uso de accesorios, por lo que no hay razón para escribir el mismo código varias veces.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

Sin embargo, JSX en realidad no es absolutamente necesario en React. Puede escribir funciones regulares para crear elementos sin usar JSX. El mismo código que está arriba, se puede usar como a continuación.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

Obviamente, no estoy sugiriendo que use esa sintaxis, aunque hay casos en los que puede resultar útil (por ejemplo, desea introducir algo realmente pequeño y no desea cambiar el entorno de compilación).

En realidad, tengo otra razón por la que mostré el fragmento anterior. A menudo, los desarrolladores no entienden por qué debemos hacer lo siguiente:

 import React from 'react';

El fragmento debe explicarse por sí mismo. A pesar de que estamos extrayendo Component , todavía necesitamos React, porque Babel transpila por encima de JSX a debajo de React.createElement . Entonces, si no importamos React, simplemente fallará para nosotros. Mencioné Babel, que es una herramienta que nos ayuda a introducir cosas que aún no están en JavaScript (o más bien en los navegadores) o que de alguna manera son extensiones (o diferentes lenguajes como TypeScript, que Babel admite desde Babel 7). Gracias a Babel:

• JSX se convertirá en funciones que son entendidas por el navegador.
• Podemos usar nuevas funciones que aún no están en los navegadores (por ejemplo, propiedades de clase).
• Podemos agregar características que están en los navegadores más nuevos pero que no están en los más antiguos mientras mantenemos la compatibilidad con navegadores más antiguos.

En resumen, mañana es hoy en JavaScript; esto es probablemente algo que requeriría su propio artículo. Vale la pena mencionar que la importación de React también se puede omitir mediante otras técnicas (como la introducción de ProvidePlugin a través de Webpack, etc.), pero debido al espacio limitado aquí, lo evitaremos y asumiremos que el usuario usará Create React App ( CRA) (más adelante se mencionará más sobre esta herramienta).

La segunda cosa importante, y mucho más importante que el propio JSX, es que React se basa en el DOM virtual. En resumen, el DOM virtual es la memoria de un árbol ideal que está representado por JavaScript que escribe el desarrollador, que luego se compara con el DOM real y se sincroniza con él en un proceso llamado reconciliación.

¿Cómo se compara React con Angular y Vue?

No me gusta comparar bibliotecas, especialmente cuando nos vemos obligados a comparar peras con manzanas (bibliotecas frente a marcos, etc.).

Por lo tanto, intentaré comparar React con Angular y Vue usando una serie de preguntas y respuestas cortas que no tienen mucho que ver con aspectos técnicos en lugar de decir algo como “X es mejor que Y porque usa JSX y no plantillas. ” Puntos como estos suelen ser preferencias personales, elecciones subjetivas de uno. Además, la velocidad, la asignación de memoria, etc., son bastante similares en React y todos sus principales competidores (me vienen a la mente Angular y Vue). Hay un informe muy bueno sobre el tema, pero tenga esto en cuenta: la gran mayoría de las aplicaciones no se ven como tablas realmente grandes que intercambian filas en una tabla de 10k. Por lo tanto, estos resultados también son un experimento de velocidad pura. En el mundo real, no harías tal cosa en primer lugar.

Entonces, echemos un vistazo a algunas preguntas relacionadas con React y cómo se compara con la competencia:

Quiero tener muchas oportunidades de trabajo. ¿Qué tan popular es React?

Bueno, esa es una pregunta fácil de responder: elige React. En realidad, diría que React tiene aproximadamente 6 a 10 veces (un margen bastante grande, pero hay algunos portales donde es 1:50 y algunos donde es 1:6) más vacantes que Vue y 2 a 4 veces más que Angular. La demanda de expertos en React es fuerte, entonces, ¿por qué Vue es tan popular en GitHub (de hecho, tiene más estrellas que React) pero tiene menos ofertas de trabajo? No tengo ni idea.

Quiero una gran comunidad, muchas bibliotecas, soluciones rápidas para los problemas que puedan surgir.

Reaccionar. No busque más.

¿Es fácil de usar y hace que el desarrollo sea agradable?

Una vez más, según los informes del estado de JS de 2018 y 2017, tanto React como Vue disfrutan de una muy buena reputación y la mayoría de los desarrolladores dicen que los volverían a utilizar. Angular, por otro lado, tiene una tendencia, año tras año, a hacer que más y más personas digan que no lo volverían a usar.

Quiero crear una nueva aplicación de una sola página, pero no quiero buscar bibliotecas.

Ese es probablemente el único lugar donde diría que Angular es la mejor opción.

Sin grandes corporaciones. Quiero ser lo más independiente posible, ¿cuál debo elegir?

Vue: es el único independiente en nuestro gran trío. (Facebook respalda a React, mientras que Google está detrás de Angular).

¿El comienzo más fácil y la curva de aprendizaje más rápida?

Vue/Reaccionar. Me inclino por Vue aquí, pero esa es solo mi opinión personal.

¿Por qué? Porque ni siquiera necesita saber JSX (es opcional) y es básicamente HTML + CSS + JavaScript.

Tutorial de React: Introducción a su primera aplicación

La forma más fácil de comenzar con React hoy en día es usar CRA, una herramienta CLI que crea un proyecto para usted y lo ayuda a evitar todas las configuraciones necesarias para Webpack/Babel y más. En su lugar, confía en cómo está configurado de forma predeterminada y en lo que se ha incluido a lo largo del tiempo. Gracias a eso, no necesita preocuparse por las actualizaciones importantes para algunas bibliotecas críticas.

Por supuesto, más adelante, puede "expulsarse" usted mismo y manejar cada aspecto por su cuenta ejecutando npm run eject . Este enfoque tiene sus propios puntos fuertes, ya que puede mejorar su aplicación con cosas que de otro modo no estarían disponibles (por ejemplo, decoradores), pero también puede ser una fuente de dolores de cabeza, ya que requiere muchos archivos adicionales y mucho más tiempo.

Entonces, lo primero que hay que hacer es:

 npx create-react-app {app-name}

Luego npm run start y estará listo para comenzar.

Componentes de clase frente a función

Deberíamos comenzar explicando en qué se diferencian estos componentes. Básicamente, cada componente puede ser una función o una clase . La principal diferencia entre ellos es que la clase uno tiene algunas características que no están disponibles en el componente de función: pueden tener un estado y usar referencias, ciclo de vida, etc. Ese es el estado actual del juego, y a partir de la versión 16.7 (o como sea ser llamado debido a los cambios ya mencionados), también tendremos ganchos, por lo que el estado y las referencias serán posibles con ganchos.

Hay dos tipos de componentes de clase: Component y PureComponent . La única diferencia entre los dos es que PureComponent está haciendo una comparación superficial de accesorios y estado: tiene sus propios beneficios en una situación en la que no desea hacer renderizados "desperdiciados", donde un componente y sus elementos secundarios están exactamente en el mismo estado. después de un renderizado. Aún así, es solo una comparación superficial; si desea implementar su propia comparación (por ejemplo, porque está pasando accesorios complejos), simplemente use Component y anule shouldComponentUpdate (que de forma predeterminada devuelve verdadero). Desde 16.6+, algo similar también está disponible con componentes de función, gracias a React.memo que es un componente de orden superior y, de forma predeterminada, se comporta como PureComponent (comparación superficial), pero requiere un segundo argumento donde puede pasar su propia comparación de accesorios personalizados. .

Como regla general, si puede usar el componente de función (no necesita características de clase), utilícelo. Pronto, a partir de 16.7.0, solo se requerirá el uso de componentes de clase debido a los métodos del ciclo de vida. Tiendo a creer que los componentes de la función son más transparentes, más fáciles de razonar y de entender.

Métodos de ciclo de vida de React

Constructor (accesorios)

• Opcional, especialmente porque CRA es tan popular, donde las declaraciones de campo de clase para JavaScript se incluyen de forma predeterminada. No tiene sentido declarar si está vinculando sus métodos mediante la función de flecha dentro del cuerpo de la clase. Un estado similar también se puede inicializar como una propiedad de clase.
• Debe usarse solo para inicializar el estado local de objetos y métodos de vinculación en clases ES6.

componenteHizoMontar()

• Haz llamadas de Ajax aquí.
• Si necesita escuchas de eventos, suscripciones y demás, agréguelos aquí.
• Puede usar setState aquí (pero hará que el componente se vuelva a renderizar).

componenteDesmontará()

• Limpia todo lo que aún está en curso, por ejemplo, se debe interrumpir Ajax, cancelar la suscripción, borrar los temporizadores, etc.
• No llame a setState , ya que no tiene sentido porque el componente se desmontará (y recibirá una advertencia).

componenteDidUpdate(prevProps, prevState, instantánea)

• Ocurre cuando el componente acaba de terminar de actualizarse (no ocurre en el renderizado inicial).
• Tiene tres parámetros que son opcionales de usar (accesorios anteriores, estado anterior y una instantánea que solo aparecerá si su componente implementa getSnapshotBeforeUpdate ).
• Solo sucede si shouldComponentUpdate devuelve verdadero.
• Si usa setState aquí, debe protegerlo o aterrizará en un bucle infinito.

shouldComponentUpdate(nextProps, nextState)

• Sólo para la optimización del rendimiento.
• Si devuelve falso, NO se invocará un renderizado.
• En su lugar, se puede usar PureComponent si el SCO anulado es solo una comparación superficial de accesorios/estado.

getSnapshotBeforeUpdate()

• Se puede usar para mantener cierta información sobre el DOM actual, por ejemplo, la posición de desplazamiento actual que luego se puede reutilizar dentro de componentDidUpdate para restaurar la posición del desplazamiento.

componenteDidCatch(error, información)

• Un lugar donde deberían ocurrir errores de registro.
• Puede llamar a setState , pero en versiones futuras, se descartará en favor del método estático getDerivedStateFromError(error) , que actualizará el estado al devolver un valor para actualizar el estado.

Hay dos métodos adicionales que son estáticos y se mencionaron en otras explicaciones

getDerivedStateFromError estático (error)

• La información de error está disponible aquí.
• Debería devolver un valor de objeto que actualizará el estado que se puede usar para manejar errores (al mostrar algo).
• Como es estático, no tiene acceso a la instancia del componente en sí.

getSnapshotBeforeUpdate estático (accesorios, estado)

• Debe usarse en casos en los que los accesorios cambian con el tiempo; como ejemplo, según los documentos de React, podría ser útil para un componente de transición.
• Como es estático, no tiene acceso a la instancia del componente en sí.

Tenga en cuenta que hay algunos métodos más que están disponibles a partir de hoy, pero se supone que se eliminarán en React 17.0, por eso no se mencionaron aquí.

Estado vs accesorios

Comencemos con Props , ya que son más fáciles y rápidos de explicar. Los accesorios son propiedades que se pasan al componente que luego se pueden reutilizar dentro de él para mostrar información/lógica comercial y demás.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

En el ejemplo anterior, el name es un accesorio. Los accesorios son elementos de solo lectura y no se pueden cambiar directamente en los componentes secundarios. Además, hay una mala práctica que la gente suele hacer, y es copiar accesorios al estado y operar en el estado después. Por supuesto, hay casos en los que desea hacer algo como "estado inicial que actualizará el componente principal después del envío", pero eso es más raro: en tal escenario, la alimentación del estado inicial podría tener sentido. Además, no solo se pueden pasar propiedades como cadenas a los componentes secundarios, sino también números, objetos, funciones, etc.

Los accesorios también tienen una cosa más útil que se llama defaultProps , un campo estático que puede decirle cuáles son los accesorios predeterminados para un componente (cuando no se transmiten al componente, por ejemplo).

En el caso de "elevar el estado", donde un componente (el padre) tiene un estado que luego es reutilizado por sus hijos (por ejemplo, un hijo lo muestra y otro permite la edición), entonces necesitamos pasar la función al hijo de padre, que nos permite actualizar el estado local del padre.

State , por otro lado, es un estado local que se puede modificar, pero indirectamente usando this.setState . Si alguien mutara el estado directamente, el componente no se dará cuenta del cambio y no se volverá a procesar para reflejar los cambios mencionados en el estado.

SetState es un método para cambiar el objeto de estado local (mediante una combinación superficial), y después de eso, el componente responde volviéndose a representar. Tenga en cuenta que después setState , la propiedad this.state no reflejará los cambios mencionados en la función de inmediato (tiene una naturaleza asíncrona) ya que algunas instancias de setState pueden agruparse por lotes debido a la optimización. Tiene algunas formas de ser invocado donde una de estas posibilidades nos permite hacer algo con el componente justo después de actualizar el estado:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – este formulario nos permite adjuntar callback de llamada, que se invocará cuando el estado refleje los datos que queríamos tener (en el primer argumento).

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Contexto de reacción

React recientemente estabilizó la API de contexto (que estuvo en React durante bastante tiempo, pero era una característica experimental a pesar de ser ampliamente utilizada por algunas de las bibliotecas más populares como Redux), lo que nos ayuda a resolver un problema: la perforación de accesorios. En resumen, la perforación de accesorios es una forma de pasar accesorios profundamente dentro de la estructura, por ejemplo, puede ser algún tipo de tema para componentes, localización para un idioma específico, información del usuario, etc. Antes de Context (o más bien antes de que se volviera no experimental), se profundizaba pasando de forma recursiva de padre a hijo hasta la última hoja (obviamente, estaba Redux, que también podía resolver el problema). Tenga en cuenta que esta característica SOLAMENTE resuelve la perforación de accesorios y no es un reemplazo para cosas como Redux o Mobx. Obviamente, si estaba usando una biblioteca de administración de estado solo para eso, puede reemplazarla libremente.

Terminando

Esto concluye la primera parte de nuestro tutorial de React. En los próximos artículos, esperamos abordar temas más avanzados, que van desde el estilo y los tipos de verificación, hasta la implementación de producción y la optimización del rendimiento.