🌀 ¿Qué es React?
React es una biblioteca de JavaScript de código abierto desarrollada por Facebook y utilizada para construir interfaces de usuario interactivas. Permite crear componentes de nterfaces de manera declarativa, componentizada y reactiva.
En detalle:
- DOM Virtual: React utiliza un DOM virtual para optimizar el proceso de actualización de la interfaz de usuario, mejorando el rendimiento de la aplicación.
- React Native: React también se puede usar con React Native para desarrollar aplicaciones móviles nativas para iOS y Android.
- Ecosistema: React tiene un ecosistema amplio que incluye herramientas como React Router para la gestión de enrutamiento y Redux para la gestión del estado de la aplicación.
- Componentes: React se basa en un sistema de componentes, donde cada pieza de la interfaz de usuario se define como un componente independiente. Estos componentes pueden ser funciones de JavaScript que retornan HTML.
- JSX: React utiliza JSX, una extensión de JavaScript que permite escribir HTML dentro de código JavaScript, facilitando la creación de componentes.
🧾 Definiciones impotantes
✔️ Declarativa: En React, declarativa significa que describes qué quieres que se muestre en pantalla, no cómo lograrlo paso a paso.
✔️ Componentizada: Significa que la interfaz se divide en bloques reutilizables llamados componentes.
✔️ Reactiva: Significa que la interfaz se actualiza automáticamente cuando el estado cambia.
✔️ React Native es un framework basado en React que permite crear aplicaciones móviles nativas para iOS y Android usando JavaScript y React.
🧠 Historia de React
| Año | Evento clave |
|---|---|
| 2011 | Facebook desarrolla React internamente para mejorar el rendimiento de su feed de noticias. |
| 2013 | Facebook lanza React como proyecto open source en JSConf US. |
| 2015 | Facebook presenta React Native, para crear apps móviles nativas usando React. |
| 2016 | React se vuelve muy popular por su enfoque basado en componentes y el uso de JSX. |
| 2017 | Facebook lanza la nueva arquitectura de React con Fiber, mejorando la eficiencia del renderizado. |
| Actualidad | React es mantenido por Meta (Facebook) y una gran comunidad, con millones de proyectos en producción. |
🚀 ¿Por qué usar React?
Hay muchas razones por las que React es una de las tecnologías más populares hoy en día:
✅ Ventajas de React
- Componentes reutilizables: Escribe una vez, usa en cualquier parte.
- JSX: Combina JavaScript y HTML de forma elegante y legible.
- Virtual DOM: Mejora el rendimiento actualizando solo lo necesario en el DOM.
- Gran comunidad y ecosistema: Muchas herramientas, librerías y soporte.
- React Developer Tools: Herramientas potentes para debugging.
- React Native: Usa lo que sabes de React para crear apps móviles.
- Declarativo: Dices qué quieres renderizar, y React se encarga del cómo.
- Unidirectional data flow: Facilita la gestión del estado y la depuración.
🧭 ¿Qué es una SPA (Single Page Application)?
Una Single Page Application (SPA) es una aplicación web que se carga una sola vez en el navegador y, a partir de ahí, actualiza dinámicamente el contenido sin recargar toda la página.
🛠 ¿Cómo funciona una SPA?
- Al ingresar a la aplicación, el navegador descarga un HTML, CSS y JavaScript inicial.
- Las siguientes "páginas" se cargan dinámicamente mediante JavaScript.
- El enrutamiento se hace en el cliente (client-side routing).
- React se encarga de modificar el DOM según la ruta o el estado sin recargar la página.
🎯 Ventajas de una SPA
- Mayor velocidad y fluidez al navegar.
- Mejor experiencia de usuario (UX).
- Reducción de uso del servidor (menos tráfico).
- Permite crear apps tipo PWA (Progressive Web Apps).