Una guía completa para principiantes para reaccionar

Foto de Alexander Andrews en Unsplash

Quiero volver a escribir más contenido técnico. React es una de mis tecnologías favoritas, ¡así que pensé en crear una introducción de React! Esta publicación requiere conocimiento de HTML y JavaScript. Soy de la firme opinión de que debe saber esto antes de pasar a bibliotecas como React!

¿Qué es reaccionar?

React es una biblioteca de JavaScript creada en 2013 por el equipo de desarrollo de Facebook. React quería que las interfaces de usuario fueran más modulares (o reutilizables) y más fáciles de mantener. Según el sitio web de React, se utiliza para "Construir componentes encapsulados que administran su propio estado, y luego los componen para crear interfaces de usuario complejas".

¡Voy a usar muchos ejemplos de Facebook a lo largo de esta publicación desde que escribieron React en primer lugar!

¿Recuerdas cuando Facebook pasó de me gusta a reacciones? En lugar de que te puedan gustar las publicaciones, ahora puedes reaccionar con un corazón, una cara sonriente o un me gusta a cualquier publicación. Si esas reacciones se hicieran principalmente en HTML, sería una gran cantidad de trabajo cambiar todas esas reacciones de me gusta y asegurarse de que funcionen.

Aquí es donde entra en juego React. En lugar de implementar "separación de preocupaciones", tenemos una arquitectura diferente en React. Esta arquitectura aumenta la modularidad basada en la estructura de un componente.

Hoy, mantendremos el CSS separado, ¡pero incluso puede hacer que ese componente sea específico si lo desea!

Reaccionar contra JavaScript de vainilla

Cuando hablamos de JavaScript "básico", normalmente estamos hablando de escribir código JavaScript que no use bibliotecas adicionales como JQuery, React, Angular o Vue. Si desea leer más sobre ellos y sobre qué es un marco, tengo una publicación sobre los marcos web.

Un par de notas rápidas antes de comenzar

  • Para hacer este tutorial un poco más breve, algunos ejemplos de código tienen ... antes o después de ellos. Esto significa que omitimos algún código.
  • Utilizo Git diffs en algunos lugares para mostrar líneas de código que cambiarán. Si copia y pegó, debe eliminar el + al comienzo de la línea.
  • Tengo CodePens completos con las versiones completas de cada sección, ¡así que puedes usarlas para ponerte al día!
  • Los conceptos más avanzados que no son esenciales para el tutorial están en comillas en bloque. ¡Estos son hechos que son interesantes!

Preparar

Si está creando una aplicación React de producción, querrá usar una herramienta de compilación como Webpack. Webpack incluirá su código ya que React utiliza algunos patrones que no funcionarán de manera predeterminada en el navegador. La aplicación Create React es muy útil para estos fines, ya que hace la mayor parte de la configuración por usted.

Por ahora, utilizaremos React CDN, ¡que es solo para fines de desarrollo! También usaremos la CDN de Babel para poder usar algunas funciones de JavaScript no estándar (¡hablaremos más sobre eso más adelante!).

¡Ahora, vamos a nuestro código React!

La clase HelloWorld extiende React.Component {
  render () {
    // Le dice a React qué código HTML representar
    volver 

Hola mundo

  }
}
// Le dice a React que adjunte el componente HelloWorld al div 'HTML' raíz
ReactDOM.render (, document.getElementById ("root"))

¡Todo lo que sucede es que "Hello World" se muestra como un H1 en la página!

Pasemos por lo que está pasando aquí.

Primero, estamos usando una clase ES6 que hereda de la clase React.Component. Este es un patrón que usaremos para la mayoría de nuestros componentes React.

A continuación, tenemos un método en nuestra clase, y es un método especial llamado render. ¡React busca el método de renderizado para decidir qué renderizar en la página! El nombre tiene sentido. Lo que se devuelva de ese método de renderizado será procesado por ese componente.

En este caso, estamos devolviendo un H1 con el texto de "Hola Mundo" - esto es exactamente lo que normalmente estaría en el archivo HTML.

Finalmente tenemos:

ReactDOM.render (, document.getElementById ("root"))

Estamos utilizando la funcionalidad ReactDOM para adjuntar nuestro componente de reacción al DOM.

React utiliza algo llamado DOM virtual, que es una representación virtual del DOM con el que normalmente interactuaría en Vanilla JavaScript o JQuery. Este reactDOM.render representa este DOM virtual en el DOM real. Detrás de escena, React hace mucho trabajo para editar y volver a renderizar eficientemente el DOM cuando algo en la interfaz necesita cambiar.

¡Nuestro componente, , parece una etiqueta HTML! Esta sintaxis es parte de JSX, que es una extensión de JavaScript. No se puede usar de forma nativa en el navegador. ¿Recuerdas cómo estamos usando Babel para nuestro JavaScript? Babel transpilará (o convertirá) nuestro JSX en JavaScript normal para que el navegador pueda entenderlo.

JSX es realmente opcional en React, ¡pero verá que se usa en la gran mayoría de los casos!

Luego, estamos utilizando el documento integrado JavaScript.getElementById para obtener nuestro elemento raíz que creamos en nuestro HTML.

Con todo, en esta declaración ReactDOM.render, estamos adjuntando nuestro componente HelloWorld a nuestro div que creamos en nuestro archivo HTML.

Código de inicio

Bien, ahora que hemos hecho un "Hola Mundo", podemos comenzar con nuestro componente de Facebook.

Primero, quiero que juegues con esta demo. Trabajaremos en esto durante el resto del tutorial. ¡Siéntase libre de mirar el código también, pero no se preocupe por no entenderlo! ¡Para eso es el resto del tutorial!

Comencemos por "codificar" el HTML del widget:

Con un poco de CSS agregado, esto se parece a lo siguiente:

Aquí hay un Codepen con el código de inicio completo.

Por el bien de este tutorial, crearemos cuatro componentes: un componente de Estado que será el padre, un componente Me gusta que abarcará la lógica de me gusta y el componente Comentario que contendrá la lógica para escribir un comentario. El componente Me gusta también tendrá un LikeIcon secundario que se mostrará u ocultará cuando active el botón Me gusta.

Arquitectura de componentes

Sigamos adelante y dividamos el código HTML que hemos escrito en esos componentes.

Comenzaremos con el shell de un componente, ¡y también lo renderizaremos para asegurarnos de que funciona!

Una nota interesante sobre lo anterior, es que tuvimos que cambiar los atributos de "clase" a "className". La clase ya significa algo en JavaScript: ¡es para las clases de ES6! Algunos atributos se nombran de manera diferente en JSX que en HTML.

También podemos eliminar el contenido de nuestro HTML, dejando solo un elemento con la raíz ID: el div "contenido" principal es solo para el estilo.


  
    
  

Aquí está el HTML que se incluirá en el componente Estado. Tenga en cuenta que algunos de los HTML originales aún no están allí, ¡en su lugar, irán a nuestros subcomponentes!

Creemos un segundo componente, y luego lo incluiremos en nuestro componente Estado.

clase Comentario extiende React.Component {
  render () {
    regreso (