¿Qué es React?

Antes de ponernos a programar y a construir, tomemos unos minutos para definir qué es react y cómo es que nos ayudará a crear mejores aplicaciones web.

React te permite construir interfaces de usuario dinámicas e interactivas.

React fue inventado en 2011 por Facebook y actualmente es la biblioteca de JavaScript más usada del mundo.

React es usada en ámbitos profesionales, así que si lo que buscas es conseguir un empleo como desarrollador web, aprender React es una gran idea. 🤓

La mejor forma de aterrizar un empleo con React es sabiendo construir aplicaciones con confianza.

¿Por qué se inventó React?

Cuando una página web se muestra en el navegador, el código HTML se convierte en un árbol de nodos llamado Document Object Model, mejor conocido como el DOM.

Esto nos permite cambiar la página y su contenido con JavaScript en respuesta a una acción del usuario.

Por ejemplo, podemos usar JavaScript para ocultar un elemento cuando un botón es pulsado. A este código se le llama vanilla JavaScript. Lo que quiere decir que no se usa ninguna otra herramientas más que código JavaScript plano.

document.querySelector('button')
.onclick = ()=>{}

Ahora, cuando nuestra aplicación crece, mantener este vanilla JavaScript se vuelve más complejo y retador. Aquí es donde React hace su aparición.

Con React ya no tenemos que preocuparnos de mantener los cambios en el DOM nosotros mismos.

En su lugar podemos describir una página web utilizando pequeños componentes reutilizables y React se hará cargo de crear y actualizar los nodos del DOM eficientemente.

Los componentes de React nos ayudan a escribir código mejor organizado, reutilizable y modular.

Ejemplo del mundo real

Ahora vemos un ejemplo del mundo real.

Imagina que quieres construir una página web como esta.

En esta página tenemos una barra de navegación en la parte superior y un side panel en la izquierda.

También tenemos un grid de tarjetas en el area central.

Podríamos construir cada una de estas secciones como componentes separados.

Cada una de estas tarjetas es independiente aunque todas cohabiten en el grid.

Cada “libro” es independiente, pero contienen información similar mostrada de la misma forma, y cada tarjeta tiene también otros componentes dentro como los botones.

Podemos construir cada uno de estos componentes individualmente.

Estos componentes se combinan para construir toda la página web.

Esencialmente una aplicación React no es más que un árbol de componentes, que tiene por raíz un componente APP que mantiene todo unido.

Bueno, esto ya ha sido suficiente teoría por ahora.

Es momento de hacer algo más divertido y configurar tu entorno de desarrollo y palpar por primera vez, cómo se siente crear componentes con React.

como piezas individuales, elementos en pantalla que son llamados componentes. Cualquier elemento en pantalla ya sea interactivo o no, con React es un componente.

Como un botón, un video, un logo, un párrafo, lo más útil de esto es que los puedes reutilizar para combinarlos y así construir elementos más complejos, el principio de single-responsibility [única responsabilidad] en su máxima expresión.

Con React puedes combinar código y diseño.

React hace uso de varias herramientas que iremos viendo en este curso, herramientas innovadoras.

Una de esas herramientas que fue tan innovadora que provocó cierta resistencia y fue muy polémica es el JSX.

Esta curiosa sintaxis combina etiquetas HTML y JavaScript y se ve algo así:

<h1>Hola {name}</h1>

Lo que vemos aquí es JavaScriptX (JSX) y se siente como HTML pero no lo es, pues podemos incrustar valores, ya sea variables o expresiones, funciones que devuelvan un valor:

<h1>Hola {getName()}</h1>

Esta sintaxis, cuando es interpretada y compilada (”transpilada”) se convierte en simplemente JavaScript:

createElement(
    'h1',
    { className: 'clase-css' },
    'Hola blissmo'
  ); 

Te imaginas escribir esta invocación con cada etiqueta que queramos colocar. Afortunadamente tenemos JSX.

👀 Hoy en día y a pesar de el rechazo inicial a esta tecnología, la sintaxis JSX se ha vuelto muy valorada en la comunidad al grado de ya usarse en otras herramientas totalmente agenas a React.

Es importante decir que para trabajar con React no es necesario JSX, sin embargo es muy útil y por eso lo usaremos.