React al microscopio

 

Después de hablar de Angular, continuemos esta serie sobre los frameworks más famosos para programar en Javascript, presentando React.

Como siempre, antes de pasar a la parte técnica, partamos de su historia y las razones que llevaron a su desarrollo.

ANTECEDENTES HISTÓRICOS

Probablemente sepas que React se anunció en 2013, pero su verdadera historia comienza unos años antes.

Volvamos al 2011...

Durante este período, los proyectos activos en los que trabajaba Facebook crecían cada vez más. Entre todos destacaba Facebook ADS, cuyo mantenimiento y desarrollo de nuevas funcionalidades estaba lastrando y complicando aún más la vida de los desarrolladores. Por esta razón el equipo comenzó a expandirse cada vez más, contratando nuevos miembros.

Con el tiempo, el creciente número de miembros del equipo y las nuevas funciones llevaron a la empresa a una desaceleración de la producción. Las razones se encuentran en las constantes solicitudes de actualizaciones en cascada, que dificultaron la gestión del proyecto.

Había una necesidad de innovar, de hacer todo más eficiente

Después de un tiempo, los ingenieros de Facebook llegaron a un punto crítico.

Sabían lo que había que hacer, tenían el modelo de resolución correcto, sin embargo, tenían miedo de empeorar la experiencia del usuario ante una mejora en la eficiencia de producción de código.

Primer prototipo de React

En 2011 Jordan Walke creó un primer prototipo de React, llamándolo FaxJs. Este proyecto se utilizó dentro de Facebook para algunas funciones, incluida la función de búsqueda de elementos.

Llegamos al 2012...

Durante este año Jordan Walke, impulsado por los problemas de gestión de Facebook ADS, finalmente crea una primera versión de React.

En el mismo año, Facebook compra Instagram, lo que empuja a los equipos de las dos empresas a tratar de estandarizar los stack de tecnología. Para hacer esto, React tuvo que desvincularse de Facebook y convertirse en Open Source. La mayor parte de este trabajo se lo debemos a Pete Hunt, uno de los antiguos miembros del equipo central de React.

¡Finalmente llegamos al lanzamiento!

Durante la JSConf Us 2013, Jordan Walke presenta React. Simultáneamente con su primera presentación pública, React se convierte en Open Source. Inicialmente, el público reaccionó con escepticismo, sin comprender el potencial de esta herramienta, considerándola un paso atrás.

Por lo que los creadores de React, luego de darse cuenta, iniciaron una serie de acciones para promocionarlo, partiendo de la creación de un React Tour, demostrando todo su potencial.

Años sucesivos...

Los años posteriores a 2013 marcaron una expansión constante en la popularidad de React, atrayendo la atención de grandes empresas como Netflix. El verdadero auge de la popularidad se produjo cuando en 2015 Netflix afirmó públicamente que usaba React y que había mejorado los procesos de desarrollo de Front End.

Pero no solo, también Airbnb comienza a utilizar React. 

Su uso por parte de grandes y populares empresas representa una tarjeta de presentación muy importante para React, a partir de este momento cada vez más empresas consolidadas comenzarán a utilizarlo.

Avanzando en 2015, siguen otros anuncios importantes, incluido el lanzamiento de React Native, el desarrollo de la primera versión estable de React Developer Tool y el lanzamiento de Redux.

2016 fue otro año de innovación con el lanzamiento de Mobx, mientras que 2017 fue un año de mejoras por parte del equipo central de React, con el lanzamiento de actualizaciones que mejoraron su rendimiento. La última versión estable es la 18, lanzada en marzo de 2022.

La historia React es muy interesante. 

Su nacimiento introdujo un nuevo enfoque arquitectónico en el desarrollo de aplicaciones Javascript, proponiendo un modelo diferente a los MVC y MVVM que usaban otros frameworks como Angular.

Según el equipo de React, el patrón MVC clásico no permite aplicaciones escalables en las que es fácil detectar fallas y errores durante la fase de desarrollo. El modelo que propuso React se llamó Flux, del cual se derivó Redux.

Los elementos clave de Flux son cuatro: Dispatcher, Store, Action y Views, aunque recomendamos empezar directamente desde Redux, esa es su evolución.

El concepto clave de Flux es el flujo unidireccional de datos. Toda solicitud de modificación de los datos contenidos en los Stores debe realizarse siempre y únicamente mediante el lanzamiento de una Acción, interceptada por un Dispatcher, que modifica el Store que contiene los datos leídos por las Vistas.

Los elementos clave de Flux son cuatro: Dispatcher, Store, Action y Views, aunque recomendamos empezar directamente desde Redux, esa es su evolución.

El concepto clave de Flux es el flujo unidireccional de datos. Toda solicitud de modificación de los datos contenidos en los Stores debe realizarse siempre y únicamente mediante el lanzamiento de una Action, interceptada por un Dispatcher, que modifica el Store que contiene los datos leídos por las View.

Por fin, un poco de código...

Después de haber hablado extensamente sobre su historia, comencemos con algunos ejemplos prácticos.

Los requisitos previos para usar react son instalar:

• Node Js
• npm
• npx

Primero ve a la terminal y escribe:

npx create-react-app prova-react

Esta instrucción creará un proyecto React llamado prueba-react.

Después ejecuta los siguientes comandos para entrar en el proyecto e iniciarlo localmente:

cd prueba-react

npm start

Si todo salió bien, su navegador debería haber abierto una nueva pestaña apuntando a la dirección localhost:3000, mostrándole la siguiente pantalla:

¡Perfecto! Has creado tu primera aplicación en React, ahora vamos a hacer algunos cambios.

Perfetto! Hai creato la tua prima applicazione in React, ora apportiamo qualche modifica.

Creamos el clásico Hello World 

Para crear nuestro primer hello world podemos actuar de dos maneras:

• ir a src/App.js y modificar el contenido
• ir a src/index.js y modificar el parámetro pasado a la función render

Empecemos por el segundo caso, después de haber abierto el documento index.js, veremos este código.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

 

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

• Línea 1 y Línea 2 importan bibliotecas react y react-dom necesarias para inicializar la aplicación y escribir HTML dentro del documento JavaScript, este tipo de sintaxis se conoce como JSX. 
• Línea 3 importa el archivo CSS para la estilización.
• Línea 4 importa el archivo App.js, un componente creado en automático.
• Línea 7 define el punto de acceso de la completa aplicación React. El componente con id root buscado se encuentra en public/index.html
• Desde Línea 8 a Línea 12 se efectúa el render de la aplicación, empezando por el punto de accesso definido anteriormente.

Así es como se presenta el componente root dentro de public/index.html

Ahora modifiquemos el código para ver la escritura Hello world..

Como puedes ver, hemos cambiado el contenido de la función render eliminando el componente <App /> e insertando un h1 simple en su lugar.

Sin embargo, hacerlo iría en contra de los principios de React. De hecho, si quisiéramos usar nuestro h1 dentro de otra página estaríamos obligados a replicar el código.

¡La solución correcta sería crear un componente personalizado!

Veamos cómo hacerlo:

• Creamos dentro de la carpeta src un archivo llamado HelloWorld.js
• Dentro de este archivo definimos una función llamada HelloWorld que devuelve un h1 con nuestro mensaje

function HelloWorld(){

    return (

        <h1>

            Hello World!

        </h1>

    )

}

export default HelloWorld;

• Luego importamos el componente en src/index.js, sustituyendo el contenido de la función render

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import HelloWorld from './HelloWorld';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

 

root.render(

  <React.StrictMode>

    <HelloWorld/>

  </React.StrictMode>

);

 

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

En la línea 11 puedes ver cómo lo instanciamos. Este procedimiento se puede realizar de forma recursiva, creando una estructura jerárquica que poco a poco irá construyendo un árbol de componentes que definan el esqueleto de nuestra aplicación.

Componentes funcionales

El enfoque que se acaba de mostrar muestra el uso de los componentes funcionales (functional components). 

Si eres un novato, para hacerte una idea, imagina tener que crear la siguiente tabla e insertarla en el método render que hemos mostrado anteriormente.

<h2>HTML Table</h2>

<table>

  <tr>

      <th>Company</th>

      <th>Contact</th>

      <th>Country</th>

  </tr>

  <tr>

      <td>Alfreds Futterkiste</td>

      <td>Maria Anders</td>

      <td>Germany</td>

  </tr>

  <tr>

      <td>Centro comercial Moctezuma</td>

      <td>Francisco Chang</td>

      <td>Mexico</td>

  </tr>

  <tr>

      <td>Ernst Handel</td>

      <td>Roland Mendel</td>

      <td>Austria</td>

  </tr>

  <tr>

      <td>Island Trading</td>

      <td>Helen Bennett</td>

      <td>UK</td>

  </tr>

  <tr>

      <td>Laughing Bacchus Winecellars</td>

      <td>Yoshi Tannamuri</td>

      <td>Canada</td>

  </tr>

  <tr>

      <td>Magazzini Alimentari Riuniti</td>

      <td>Giovanni Rovelli</td>

      <td>Italy</td>

  </tr>

</table>

Claro, puedes y aún podrás ver la tabla renderizada. Pero, ¿qué pasaría si agregara otro componente?

La respuesta es simple, el código comenzaría a ser poco mantenible y verboso, ya que cada componente nuevo tendría que estar en cola o en medio de los existentes.

¡Para eso está el enfoque del componente funcional, para favorecer la modularidad del código!

Habría bastado crear un documento separado y añadir el código de la tabla en una función, como hemos hecho ya para HelloWorld.

import HelloWorld from './HelloWorld';

import Table from './Table';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

 

root.render(

  <React.StrictMode>

    <HelloWorld/>

    <Table/>

  </React.StrictMode>

);

Esto se puede resumir así:

function NomeComponente() {

    return(

    <component> </component>

  )

}

 

root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<NomeComponente />);

Donde <component></component> es el componente HTML que se desea representar, puede ser cualquier cosa, desde un simple párrafo hasta una tabla.

Puede ser útil tener en cuenta dos cosas:

• El nombre de la función que crea el componente tendría que iniciar siempre con la letra mayúscula
• Dentro del método render puedes usar el tag autoblocante para simplificar
   

Entonces, en conclusión, ¿que es React y por qué tendría que usarlo?

React es una biblioteca Javascript para construir una web application, separando la UI en elementos modulares. 

Tendrías que usarlo o al menos conocerlo por una serie de motivos:

• Fácil de aprender, ya que requiere un mínimo conocimiento de Javascript para empezar, ni mucho más ni mucho menos.
• Componentes Reutilizables, React permite la separación de los elementos UI en componentes reutilizables y fácilmente comprobable.
• Altas Performance garantizadas por Virtual Dom, con el uso de un Virtual Dom, React puede optimizar en gran medida el rendimiento en la web, disminuyendo drásticamente las actualizaciones directas en el DOM ya que actúa primero en el DOM virtual y luego, con una serie de comparaciones entre el estado anterior y el actual, calcula la mejor manera de hacer el cambios.
• Enfoque arquitectónico unidireccional con Redux. Como hemos explicado antes, React propone un enfoque unidireccional en el desarrollo de las aplicaciones.
• Developer tool y community, React goza de una de las community más activas en el mundo y además pone a disposición óptimas herramientas para poder depurar y que ayudan mucho la vida del desarrollador. 
• React Native, aprender React ofrece el plus de poder usar sin muchos problemas React Native para el desarrollo de aplicaciones móviles para IOS y Android, aprovechando las mismas metodologías y arquitectura.