GUÍA DE REFUERZO: Introducción a React 

React 
Full-stack JavaScript - BICTIA 
Qué es React?

React es una librería de JavaScript para construir interfaces de usuario de manera rápida y
dinámica.

Fue desarrollada por Facebook y es una de las formas más utilizadas para crear
aplicaciones web junto con Angular y Vue.

Cómo funciona?

Componentes

El mecanismo central de React es el componente. Los componentes son interfaces de

usuario ​independientes​​ y ​reutilizables​​, que se unen para crear la aplicación web como tal.
Es decir, que una aplicación web tiene varios componentes (nav, perfil, barra de búsqueda,
etcétera) que lo componen.

La aplicación web está construida sobre un ​componente raíz​​ (o root component),

normalmente llamado App, desde el que se llaman y organizan otros componentes. Esto
quiere decir que una aplicación React es básicamente un árbol de componentes: el
componente App llama a varios componentes, y estos a su vez llaman otros componentes
más pequeños, y así sucesivamente.

La forma de trabajar con componentes en React es trabajar en ellos aisladamente y luego

unirlos.

Estado y método render

En la implementación como tal​​, un componente es una clase de JavaScript, que se

compone de un ​estado​​ y un método ​render()​​. El estado es un objeto que contiene los datos
que se van a mostrar (se llama estado porque estos datos son variables, y es necesario
aclarar que no todos los componentes deben tener estados). Por otro lado, el método
render()​​ es el encargado de describir cómo va a verse la interfaz de usuario.

El output del método render es un objeto JavaScript que apunta a un elemento DOM. Este
objeto no es entonces un dom real, sino una representación más ligera que se guarda en
memoria. A este objeto lo llamamos ​virtual DOM​​.

Virtual DOM

El Virtual DOM es lo que hace a React tan dinámico, pues con éste no necesitamos
manipular el DOM directamente (como lo hacíamos con código como
document.querySelector()​​). Cada vez que hay un cambio en el estado de un componente,
esto se ve reflejado en el Virtual DOM, y React sincroniza automáticamente este cambio
con el DOM real.

Es decir, que únicamente debemos cambiar el estado, y React hará el resto. Es por eso
React se llama así: ante un cambio de estado, React reacciona al cambio y
automáticamente lo pasa al DOM para que se represente visualmente.

Cómo instalar React?

Para instalar React, debemos tener instalado Node.js y npm.

Si ya lo tenemos instalado, debemos abrir la consola y colocar ​npm i -g create-react-app​​.

Cuando haya instalado, ingresamos a la carpeta de trabajo desde consola, e ingresamos

create-react-app <nombre del proyecto>​​. Por ejemplo, podemos colocar
create-react-app primera-app​​. Esto va a crear una sub-carpeta llamada “primera app”, y
dentro de ella va a colocar un número de carpetas y archivos:
Dentro de todos estos archivos se encuentra la carpeta ​node_modules​​ (con todos los
paquetes npm de terceros), una carpeta ​public​​, donde encontramos el archivo ​index.html​​,
que es donde React va a actuar. Finalmente, en la carpeta ​src​​, se encuentra un archivo
App.js​​, que es donde importamos los componentes y los juntamos. En ​App​​ utilizamos un
pseudolenguaje llamado ​JSX

Qué es JSX?

JSX ​es la abreviación de JavaScript XML. JSX nos permite describir nuestros componentes
de una forma parecida a como se va a ver en el DOM.

JSX funciona a través de Babel. Es decir, que cuando escribimos en JSX, luego va a pasar
por Babel, y éste lo va a convertir en código JavaScript sencillo (para que los intérpretes lo
puedan entender). (para ver el proceso, ver ​https://babeljs.io/repl​).

Hola Mundo!

Empecemos de cero para crear nuestra primera aplicación. Primero, borramos el archivo
index.js que se encuentran en la carpeta “src”. Luego, volvemos a crear un archivo index.js
para escribirlo desde cero.

En el archivo, usando sintaxis ES6, importamos React y ReactDom:

import​ ​React​ ​from​ ​'react'​;

import​ ​ReactDom​ ​from​ ​'react-dom'​;

Necesitamos importar React para que Babel pueda llevar a cabo la conversión de JSX a
Vanilla JavaScript. Así, con esto ya podemos crear nuestro primer elemento JSX:

const​ ​elemento​ = ​<​h1​>​Hola Mundo!​</​h1​>​;

Sin embargo, todavía no hemos “renderizado” el elemento JSX para poder modificar el
Virtual DOM, y por eso necesitamos ReactDom.

Así, utilizamos el método render junto con el clásico método ​document.getElementById:

ReactDom​.​render​(​elemento​, ​document​.​getElementById​(​"root"​));

En ​document.getElementById ​colocamos como parámetro “root”, que es el div principal

del archivo ​index.html​​.

Con todos estos pasos, nuestro elemento JSX debería aparecer en el localhost:3000, y al
inspeccionarlo debería aparecer dentro del <div id=”root”> del archivo html del proyecto:
Lo importante aquí es que el archivo index.js, que es el que maneja el método para
“renderizar” componentes en el DOM, va a ser la forma de conectar nuestro archivo ​App.js
al archivo index.html. Es decir, que de ahora en adelante trabajaremos en ​App.js​​, y los
componentes que llemamos de allí se van a “renderizar” gracias al archivo ​index.js​​ y su
ReactDOM.render(document.getElementByID)​​.