¿Como funciona React.js?
React.js es una librería para crear interfaces web, con ella están construidas las dos redes
sociales más grandes: Facebook e Instagram. Hoy prenderás de forma clara y sencilla como
funciona.
Diseño web
Lectura de 7 minutos
hace 2 años
¿Cómo vivíamos antes de React.js? ¿Por que no separar HTML CSS y JavaScript? ¿Que son los componente
React.js es una librería frontend para construir interfaces web, pero ¿como funciona?
Antes de entrar ello, veamos un poco de contexto
¿Cómo vivíamos antes de React.js?
La web está construida con 3 lenguajes básicos:
HTML es la estructura e información de la página web y es completamente estático.
CSS es el maquillaje para HTML, con CSS puedes hacer que la información se vea bonita
y se adapte a todos los tamaños de pantalla (responsive).
JavaScript a diferencia de HTML y CSS es un lenguaje de programación. Podemos darle
vida a la pagina haciendo que responda a las acciones del usuario.
Con estos tres lenguajes ya podemos crear aplicaciones web completas, sin embargo,
siempre los hemos separado en distintas carpetas:
📂 Public para HTML
📂 Styles para CSS
📂 Scripts para JavaScript
Pueden tener otros nombres pero esos son los más comunes y para nosotros esta
siempre ha sido una buena practica.
¿Por que no separar HTML CSS y JavaScript?
Un día llego el equipo de React y propuso meter todo en un solo paquete llamado
componente, y de seguro estas pensado "Esto va contra las buenas practicas" parece
que intentan regresar a los años 90 cuando en el mismo HTML metíamos el CSS y
JavaScript. ¿Por que lo proponen? Al guardar estos lenguajes en carpetas, estas
separando por código y no por funcionalidad.
Esta es la interfaz de EDteam
Cada elemento de esta página (logo, icono de búsqueda, carrito, icono de menú, texto,
botones, etc) es un bloque de interfaz. La losofía de React.js es separar el proyecto
por piezas de tal manera que el código pueda ser reutilizable, por ejemplo, si yo
necesito otro botón, simplemente reutilizó el componente que genera el botón.
¿Que pasa si quieres reutilizar un menú en otro proyecto? En el modelo tradicional
pasaba esto:
Extraer el HTML era sencillo
Extraer el JavaScript era muy complejo ¿Cual la función es la que interactúa con el
menú?¿Y si la función está comprometida con otra?
Traer el CSS era un in erno, en el mejor de los casos tenias que cambiar ids y clases
para que los estilos coincidan y no se rompan con los estilos del otro proyecto
Para React.js HTML y JavaScript siempre están unidos, opcionalmente puedes escribir
CSS dentro del componente o puedes trabajarlo de manera tradicional (Por fuera)
¿Que son los componentes?
Son piezas de UI (User Interface). Cada pieza en la pantalla con la que el usuario
interactúa es un componente
Los componentes deben poder reutilizarse y combinarse para crear componentes
mayores que a su vez se combinen creen un sistema completo, como la web de EDteam.
Son objetos, la lógica y la estructura están contenidos en un objeto de JavaScript
Los componentes se crean con JSX. Este el secreto de Reat.js, nos permite escribir HTML
con la misma sintaxis dentro de JavaScript. Webpack se encarga de convertir este código
a JavaScript estándar que el navegador puede interpretar.
Creando un componente con JSX
Pasar de HTML a JSX es increíblemente fácil, no necesitas ser un pro de JavaScript, solo
hace falta saber lo básico. El siguiente código es de un componente:
Línea 1: Traes la librería de React.js con un import sencillo
Línea 10: Exportamos el componente para poder importarlo en otro lugar
Línea 3- 8: Aquí es donde escribimos el componente y como pues ver es una simple
función JavaScript que retorna HTML
Este componente tiene sus datos quemados en el código ( url, clases del elemento y
texto), necesitamos que este contenido se dinámico, para lograrlo creamos el siguiente
componente:
Es el mismo componente pero con un pequeño cambio:
El componente está recibiendo un argumento llamado "props". Es un objeto que
contiene las propiedades que se van a imprimir al momento de llamar al componente.
Mira las partes resaltadas en amarillo, estamos llamando a las propiedades del objeto
"props"
Hemos llamado a las propiedades del objeto "props" dentro { }. Las llaves son
expresiones que indican que dentro de ellas vas a escribir JavaScript estándar
(Funciones, condicionales, ternarios, etc)
Como puedes ver con JSX tienes HTML con todo el poder de JavaScript, de esa manera
tú puedes coger el componente y llevártelo a otro proyecto sin los con ictos del
modelo anterior.
Ya tenemos listo el componente, ¿Como lo usamos para crear dos botones?
Nosotros queremos crear dos botones : "¡Comienza gratis!" y "Por qué EDteam"
Llamamos a cada Botón escribiendo el nombre del componente como si fuera una
etiqueta HTML
Las propiedades del objeto "props" las pasamos como si fueran atributos HTML (url,
class y texto)
Virtual DOM
El DOM es toda la estructura HTML de un sitio, cuando cargas una página web, el
navegador interpreta el código HTML, CSS y JavaScript; y lo pinta en pantalla. Cuando
hay un cambio en el DOM el navegador tiene que repetir todo el proceso y es muy
costoso en términos de recursos.
React.js guarda una copia en memoria del DOM, cuando hay cambios compara el DOM
virtual con el DOM real y aplica los cambios sin necesidad de volver a cargar todo. Tú
no tienes por que preocuparte de este proceso, React.js lo hace por debajo, pero es
importante que los sepas.
El estado de un componente
Cada componente tiene su propio estado, es como la fotografía del momento, es decir:
¿Me hizo clic el usuario o no?
¿Estoy activo o estoy inactivo?
¿Qué datos tengo en este preciso momento?
Ese es el estado y cada componente tiene uno propio que solo puede compartir con
sus hijos si es que los tiene.
Estado global
La aplicación tienen un estado globalque mantiene comunicados a todos los
componentes. Si yo hago clic en el botón de comprar en una web esto es lo que
pasaría:
El componente recibe el clic y lo comunica al estado global
El estado global le indica al carrito que debe agregar un producto
Tradicionalmente esto se hace con una herramienta llamada Redux, pero en las
ultimas versiones de React.js se incluye una API (Context) para que puedas trabajar el
estado global sin herramientas de terceros.
¿Por que aprender React.js?
React.js no solo es frontend, con el puedes dominar muchos ámbitos del desarrollo
web, móvil y de escritorio.
Puedes crear aplicaciones nativas en iOS y en Android con React Native
Backend
Realidad virtual
Aplicaciones de escritorio
En su ultima encuesta Stack Over ow revelo que React.js es la tecnología más amada
por los programadores y más buscada por las empresas.
EDteam tiene una especialidad de cuatro cursos que te llevaran desde cero hasta
dominar todos los conceptos de React.js. Al nalizar vamos a construir una plataforma
de educación online como la de EDteam 👉 https://ed.team/react
