que-es-y-como-empezar-con-react

Qué es y cómo empezar con React

  • 4 min

React es una librería de JavaScript código abierto que permite construir interfaces de usuario, basados en componentes.

Fue desarrollada por Facebook (ahora Meta) en 2013 con el objetivo es simplificar el desarrollo de aplicaciones web modernas, dinámicas y escalables.

A diferencia de los frameworks completos como Angular, React se centra exclusivamente en la capa de la vista.

Desde entonces ha adquirido una gran popularidad, y se ha convertido en una de las herramientas más populares para el desarrollo de aplicaciones web modernas.

react-course

Sin ser mi opción preferida para desarrollo (no es que no me guste, es que otros me gustan aún más 💚), es con la que más me ha tocado trabajar.

Y también es una de la que más os váis a encontrar vosotros. Así que se viene esta zona para que podamos hablar de nuestra querida React.

¿Qué es React?

Como hemos visto, React es una librería Open Source de JavaScript que nos permite construir aplicaciones web de manera declarativa y basada en componentes.

Vamos a repasar algunas de las características más importantes de React,

React se basa en la creación de componentes que pueden ser reutilizados en diferentes partes de la aplicación 🧩.

Esto significa que las interfaces de usuario se dividen en “piezas” independientes y reutilizables, cada uno de los cuales gestionan su propio estado y lógica.

Esto promueve la modularidad y facilita el mantenimiento del código.

React utiliza JSX (JavaScript XML), una extensión de la sintaxis de JavaScript que permite escribir código HTML directamente en archivos JavaScript.

Esto hace que el código sea más legible y fácil de escribir 📝.

React utiliza un DOM virtual para optimizar el rendimiento. El virtual DOM es una representacion interna del DOM del navegador.

En lugar de actualizar el DOM real cada vez que hay un cambio, React actualiza su virtual del DOM y luego sincroniza solo las partes que han cambiado.

Esto (en teoría, y casi siempre) reduce el costo computacional y mejora la velocidad de la aplicación ⚡.

React sigue un flujo de datos unidireccional ➡️, lo que significa que los datos fluyen desde los componentes padres hacia los componentes hijos.

Además, se apoya profundamente en el concepto de inmutabilidad de los objetos, como parte de su sistema de gestión interna (esto es ventaja o debilidad, según como lo quieras vender).

Esto facilita la depuración y el seguimiento de los cambios en la aplicación.

React utiliza un enfoque declarativo. Esto significa que tú simplmente describes cómo debe verse la interfaz en un estado dado.

Por debajo, React se encarga de actualizar el DOM (Document Object Model) cuando ese estado cambia.

Eso te facilita la vida como desarrollador 😊, además de que elimina muchos errores y mejora la eficiencia.

¿Para qué se usa React?

Básicamente… para todo. Aunque la respuesta larga es para “construir aplicaciones web modernas con UI dinámicas”.

Desde aplicaciones de SPA (Single Page Application) como Netflix o Instagram, hasta paneles interactivos y apps móviles con React Native.

¿Qué necesitas saber?

React es una herramienta para hacer páginas web. Por tanto, es conveniente tener algun conocimiento anterior (aunque sea un poquito) de:

  1. HTML y CSS: Para estructurar y estilizar las interfaces de usuario.
  2. JavaScript : React es una librería de JavaScript, así que… pues tienes que saber algo de JavaScript 😃

Si no es tu caso, o si en algún momento necesitas un repasito, te dejo enlace a este curso tan bonito de JavaScript 👇

Ventajas de React

Si React se ha hecho tan popular, será porque su uso tiene algunas ventajas que le han hecho merecer su fama (aunque también exista un cierto factor suerte).

Algunas de ellas son,

  1. Fácil aprendizaje: Tiene una curva de aprendizaje inicial muy suave, y su enfoque basado en componentes es intuitivo.

  2. Rendimiento: Gracias al Virtual DOM, React es capaz de actualizar la interfaz de usuario de manera eficiente (casi siempre 🤭)

  3. Comunidad activa: React tiene una comunidad enorme y activa, lo que significa que vas a tener una gran cantidad de recursos, tutoriales y librerías disponibles .

También tiene ciertas desventajas, como el tamaño del bundle, que dominarlo sea complicado, o que “oculta” el estándar y lo reemplaza por su propio ecosistema. Pero…

Sin embargo, pese a su sencillez inicial, dominar por completo React puede ser complicado. Además, de que está en constante evolución (lo cuál es bueno).

Así que ya séa porque queréis aprender a usarlo, mejora vuestras skills, o actualizaros porque os quedáisteis version de “vete a saber cuando”, podéis seguir leyendo el curso.