React
Una librería de JavaScript para construir interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre.
Conceptos
Unas pinceladas, de forma simple, a conceptos básicos:
- CSR => Client Side Rendering, renderizado en el lado del cliente, significa que el código sera cargado y procesado en la parte cliente, React por defecto se ejecuta en el cliente.
- SSR => Server Side Rendering, renderizado en el lado del servidor, el código es procesado y calculado en el servidor y el resultado es devuelto al cliente, React puese ejecutarse como SSR utilizando apis nativas.
- Componentes, las piezas con las que se construye, pueden ser funciones o clases que extiendan de React.Component.
- Lifecycle, ciclo de vida de un componente, los pasos por los que pasa desde que se instancia, renderiza hasta que se destruye.
- Estado, son las partes (propiedades) que pueden cambiar de un componente, cuando estas cambian, el componente se re-renderiza.
- Hooks, anclajes que permiten tener estados persistentes en una función como si de una propiedad de una clase se tratara.
- Props, de propiedades, son los valores pasados y recibidos de forma uní-direccional (De padre a hijo) por los componentes.
- JSX, una mezcla entre HTML y XML, permite mezclar JS.
Vale la pena aprender React?
Si nos basamos en el % de preguntas de StackOverflow es la librería con mayor proyección de todo el panorama frontend.
Si nos vamos a lo personal, yo veo ofertas diarias donde empresas buscan desarrolladores junior/senior, ya sea para mantener y evolucionar aplicaciones existentes, o para migrar viejas a React.
Y si miramos lo puramente personal, React ofrece una forma muy directa y satisfactoria de construir aplicaciones, es decir, es divertido de programar, y los hooks ofrecen interesantes desafíos mentales y un modelo distinto de programación al que solemos estar acostumbrado.
Ecosistema
Al ser solo una librería deja muchas de las cosas necesarias para una aplicación compleja en manos de terceros:
- PropTypes : Permite especificar los tipos de props de entrada esperados así como sus valores por defecto de un componente, y si lo recibido no es lo especificado lanza un error en consola.
- React Router : Enrutamiento declarativo para CSR, para imitar el funcionamiento en el navegador de una aplicación SSR.
- Redux : Contenedor de estados, permite acceder/mutar un estado desde distintos componentes a distintos niveles de profundidad sin tener que estar pasando props entre componentes.
- create-react-app : Permite tener aplicaciones de React listas para el desarrollo y el despliegue en producción con solo un comando en el terminal.
- react-hook-form: Crea formularios de forma fácil y sencilla con hooks.
Frameworks
- Next.js : Incluye todo lo necesario para construir aplicaciones complejas con enrutamieno, SSR y mucho mas.
- Gatsby : Siempre has soñado con un Wordpress hecho en React? Con Gatsby es posible.
Prepárate para ser un profesional
- React Interview Questions & Answers : Preguntas y respuestas básicas sobre React, esta un poco des actualizado.
- React Developer Roadmap : Todos los caminos y librerías que puedes llegar a tocar para considerarte un React dev completo.
TDD, el testing
Las dos librerías mas utilizadas, normalmente mezcladas, para el testing funcional de componentes de React son:
- Enzymes : Especializada en React facilita el testing de componentes y ofrece funcionalidades muy útiles como el renderizado shallow amen de una api para manipulación muy intuitiva.
- Jest : LA librería de testing para aplicaciones programadas con JavaScript.
- React Testing Library : Solución ligera de testeo que intenta imitar al máximo los tests al funcionamiento real del componente.
Utils
- useHooks : Una colección de pequeños pero útiles hooks que se pueden usar en el día a día.
- React SVGR : Convierte tus SVGS en componentes de React o React Native
UI Libraries
- Fluent UI : Coleccion de componentes made in Microsoft. Muy completa.
Para móviles, React Native
Facebook creo posteriormente React Native, un framework construido sobre React y orientado al desarrollo de aplicaciones móviles.
Posts destacados del hilo
#257 SEO y Gestión de Data Global
