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 filosofí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 infierno, 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 conflictos 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 Overflow 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 finalizar vamos a construir una plataforma de educación online como la de EDteam 👉 https://ed.team/react
🚀 React.js Desde Cero Programa tus aplicaciones web con la librería frontend que usa Facebook e Instagram.
🚀 React - Rutas, APIs & Hooks Aprende a integrar React.js con librerías de terceros para ampliar sus características.
🚀 React - Manejo del estado de la aplicación Aprende a manejar un estado global para toda tu aplicación para controlar el estado de los componentes
🚀 Plataforma de educación online con React.js Aprende a crear tu propia aplicación de cursos con React.js y basada en la experiencia de EDteam.
Si quieres aprender React.js desarrollando una aplicación del mundo real y no con experimentos, esta especialidad es para ti. Al finalizar habrás creado tu propia plataforma de educación online que podrás vender tus clientes y adaptarlo a sus necesidades.