camino a reaccionar

Dec 01 2022

React es una de las mejores bibliotecas de Javascript utilizadas para crear aplicaciones web. Para comprender React, necesitamos entender cómo funciona detrás del capó.

Foto de Ksenia Yakovleva en Unsplash

React es una de las mejores bibliotecas de Javascript utilizadas para crear aplicaciones web. Para comprender React, necesitamos entender cómo funciona detrás del capó. En este artículo, veamos los fundamentos de React, la API de React sin procesar, cómo funciona internamente y, finalmente, creemos un componente de React reutilizable.

Supongo que tiene una comprensión básica de los conceptos de Javascript y HTML DOM. Si no, puede revisar estos conceptos aquí: Guía de Javascript , Introducción al DOM .

¡¡Ahora saltemos a nuestro tema!!

¿Cómo se crea una Página Web?

¿Alguna vez has sentido curiosidad por saber cómo funciona la web? ¿Qué ocurre después de escribir la URL de un sitio web y hacer clic en Intro? ¿Cómo puedes ver esa página web en nuestra pantalla? Veámoslo paso a paso.

1. Una vez que busca cualquier sitio web, se envía una solicitud HTTP al servidor.

2. El servidor enviará los archivos del sitio web.

3. El navegador analizará estos archivos. Al principio, se analiza un archivo HTML, luego se analizan los archivos CSS y JavaScript.

4. El navegador crea DOM a partir de HTML analizado y lo muestra en la pantalla.

Así es como se muestra una página web en su pantalla (existen otros conceptos como servidor DNS y protocolo HTTP, pero esa no es nuestra área de interés). Es tan simple como eso, pero espera, ¿qué es este DOM? ¿De dónde vino? ¿Vamos a explorar DOM un poco?

DOM se refiere al modelo de objeto de documento, que representa un documento HTML con un árbol lógico. Cada rama contiene nodos y cada nodo contiene objetos. Los métodos DOM permiten el acceso al DOM. Con esos métodos, puede cambiar la estructura y el contenido del documento.

Como todos sabemos, HTML es el componente básico de la web y podemos crear páginas web utilizando HTML. Vamos a crear una página web simple que muestre "¡¡Hola mundo!!" Como se muestra abajo:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Para permitir que javascript interactúe con el DOM, debemos agregar una etiqueta de secuencia de comandos en el archivo HTML, y puede escribir código para crear, eliminar o actualizar los elementos en el DOM (esto es lo que llamamos manipulación de DOM).

Veamos un código JavaScript que interactúa con el mensaje "¡¡Hola mundo!!" creado anteriormente. página y cambia su contenido a "Wassup World!!".

Creación de elementos HTML con Javascript:

Como hemos visto que podemos modificar elementos HTML a través de javascript, intentemos crear una página web que contenga un div con "raíz" como id y h1 como hijo del div. h1 contiene "¡¡Hola mundo!!". El código se puede encontrar en el sandbox a continuación.

Pero crear elementos a través de Javascript es imperativo. Para realizar esta tarea, debemos proporcionar Javascript con instrucciones paso a paso. Por ejemplo, si desea crear un div con una identificación, primero debe crear ese elemento div , luego establecer el atributo de identificación y finalmente agregar este div a su padre. Ya es demasiado trabajo. ¿Qué pasa si hay una manera de decirle a JavaScript solo qué elemento crear en lugar de cómo crearlo (enfoque declarativo)? Reduce una gran cantidad de código JavaScript. Suena genial, ¿verdad? Pero, ¿cómo lo logramos? ¿Qué es este enfoque imperativo y declarativo?

La programación imperativa es cómo haces algo, y la programación declarativa es más como lo que haces. Aquí hay un hermoso artículo sobre programación imperativa versus declarativa .

React es un lenguaje declarativo, es decir, nos permite escribir código sin preocuparnos de cómo suceden las cosas debajo del capó.

Entonces, veamos cómo la programación declarativa puede facilitarnos la vida.

Una descripción general de la API React:

La API de React incluye métodos para manipular el DOM. por ejemplo, React.createElement() y ReactDOM.render(). Considere que el método React.createElement() es el equivalente a document.createElement() y ReactDOM.render() como document.append(). Analicemos en profundidad estos métodos.

React.createElement() toma dos argumentos: el elemento que se creará y los accesorios. Si desea crear una etiqueta div simple con la identificación "raíz" y el texto "¡Hola mundo!" dentro de él, se verá así:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

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

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React es el punto de partida para usar React en su código. Puede instalarlo como un paquete a través de npm o usar los archivos de script disponibles en unpkg.com . Usemos archivos de script en nuestro código de muestra, ya que no necesitamos preocuparnos por instalarlos.

Ahora volvamos a crear el mismo "¡¡Hola mundo!!" página con la API de React.

El accesorio secundario para React.createElement() puede ser texto sin formato o puede ser otro elemento, así es como creamos elementos anidados. Para ilustrar, considere el siguiente código HTML: un div como un contenedor que contiene otro div como elementos secundarios. La etiqueta div secundaria contiene dos etiquetas span con el texto "Hola" y "Mundo". Enlace al códigoSandbox

creando elementos anidados con React API

Para crear elementos anidados tenemos que usar métodos anidados, lo que hace que sea muy difícil leer y comprender el código.
Así que necesitamos un código más legible. Entonces, ¿hay alguna forma alternativa de hacer que el código sea legible? ¿Qué pasaría si pudiéramos escribir una sintaxis similar a HTML en lugar de usar la API de React? JSX entra en escena aquí. Dediquemos unos minutos a aprender sobre JSX.

JSX:

JSX es una sintaxis similar a HTML (pero no HTML), que es azúcar sintáctica sobre su API React sin procesar. Puede escribir todos estos métodos React en una sintaxis simple similar a HTML con la ayuda de JSX.

Dado que JSX no es Javascript, debe transpilarlo a JavaScript, que el navegador entiende.

Babel es el transpilador que transpila JSX a Javascript. Todo el JSX se convierte en React API por Babel, como se muestra a continuación.

Babel transpilando JSX a Javascript

Como se ve en la imagen anterior, <div id=”root”> se convierte en React.createElement(“div”,{id:”root”},children). Así es como Babel convierte JSX en React API.

Para hacer uso de Babel en nuestro proyecto, tenemos que usar un archivo de script de unpkg.com, y podemos comenzar a escribir JSX dentro de la etiqueta del script mencionando type=”text/babel” . Para mayor claridad, puede consultar a continuación sandbox

Llegamos tan lejos de modificar imperativamente el DOM a través de Javascript para usar JSX. A diferencia de Javascript, no nos preocupa cómo crear elementos mientras usamos JSX. Es trabajo de Babel convertirlos en la API de React, que modificará el DOM.

Así es como el enfoque declarativo de React nos facilita la vida. Pero aún no ha terminado, y nos falta la idea principal de React, es decir, la reutilización. Vamos a crear un componente React reutilizable.

Creación de componentes de reacción:

Como sabemos que las funciones nos facilitan la vida al compartir código, también podemos compartir el código JSX como funciones, pero estos se denominan componentes en React.

Tomemos un ejemplo.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Hemos pasado la función de mensaje como parámetro a React.createElement() en lugar de un elemento. cuando pasamos una función como parámetro a React.createElement(), React Reconciler llamará a esa función con el parámetro que pasamos. Cuando el reconciliador encuentra un elemento anfitrión, deja que el renderizador se encargue de montarlo.

Los componentes del host son componentes específicos de la plataforma que pertenecen al entorno del host (como navegadores o dispositivos móviles). En el caso de un host DOM, estos pueden ser elementos HTML como div o img .

En nuestro caso, se producirán dos llamadas de función, mensaje ("¡¡Hola mundo!!") y mensaje ("¡¡Adiós, mundo!!") , y ambas funciones devolverán:

<div className=”msg”> ¡¡Hola mundo!! </div>

<div className=”msg”>¡¡Adiós mundo!! </div>

Al igual que usar JSX para hacer que el código sea más legible que usar la API de React sin procesar, usar JSX para componentes personalizados (funciones de JavaScript) hace que nuestro código sea más limpio y más legible. Recuerde que es Babel el responsable de tomar nuestro JSX y transpilarlo a la API de React, por lo que debemos configurar Babel de tal manera que pase la función por su nombre en lugar de una cadena.

Para usar un componente personalizado como una etiqueta JSX, debemos poner en mayúscula el primer carácter del nombre de la función para que Babel lo reconozca como un componente personalizado. Se parece a esto:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

¡¡Hurra!! hemos creado nuestro primer componente React

Conclusión:

Así es como funciona React detrás de escena. Recuerde que es solo un artículo fundamental que explica cómo funcionan las cosas bajo el capó, y hay muchos otros conceptos como Estado, DOM virtual, reconciliación, etc. que hacen que React sea poderoso y eficiente.