React

> Temas > React
Editar

React es una librería frontend para el desarrollo de componentes, que permite crear también aplicaciones Javascript modernas con una experiencia de desarrollo amistosa.

React es una biblioteca Javascript, pensada para el desarrollo en base a componentes y la creación de interfaces de usuario dinámicas y avanzadas.

React permite un desarrollo amistoso para los profesionales, con la posibilidad de generar código fácilmente mantenible. Para ello utiliza un enfoque declarativo. El mantenimiento del estado de los componentes se realiza en clases de Javascript, que son capaces de enviar los datos a las vistas sin necesidad de escribir código adicional. Las vistas por tanto son reactivas y se diseñan con un lenguaje similar a HTML, llamado JSX, donde se introducen diversas utilidades como el bindeo de datos o eventos.

Es una librería que tiene un enfoque basado en componentes, lo que quiere decir que los elementos que se desarrollan con React se pueden usar fácilmente en diversos entornos, permitiendo la reutilización del código en cualquier proyecto. Este mismo enfoque basado en componentes ayuda también en el mantenimiento de las interfaces y las aplicaciones.

La librería muy popular en el mundo entero. De hecho es líder en países como Estados Unidos. Es Open Source, por lo que se puede usar para cualquier tipo de proyecto. La ha creado Facebook, que es quien mantiene su código apoyado por una gran comunidad.

Más información:

React

Manuales

Manual de React

Manual de React

Este es el manual de la librería React, una popular bibliotecta Javascript para el desarrollo de interfaces de usuario, con la que también podemos crear aplicaciones frontend modernas.

React: Framework o librería

React se presenta como una "biblioteca para el desarrollo de interfaces de usuario". En lenguaje informático para la programación los términos "biblioteca" y "librería" son equivalentes, así que, si nos fiamos de lo que ellos mismos dicen, lo cierto es que no hay lugar a mucha discusión. Sin embargo, en la práctica, React también se usa como una pieza central en el desarrollo de aplicaciones, lo que podría equivaler a un framework.

Para poder decidir si React es un framework lo mejor es acudir al significado de ese concepto. Un framework es una base de código para el desarrollo de aplicaciones, con una arquitectura de carpetas determinada, una arquitectura de clases, patrones de diseño. Con todo, un framework contiene unas directrices sólidas para construir y organizar el código de proyectos informáticos.

Obviamente React no es nada de eso. React es una librería que se encarga de una parte muy específica del desarrollo de aplicaciones frontend, como es un modelo de componentes. React permite organizar el código en base a componentes reutilizables. Esos componentes tienen una vista, expresada en código JSX, que es capaz de reaccionar a cambios en los datos que manejan esos componentes. Nada más que eso, por tanto hasta aquí está claro que React no es un framework.

Entonces ¿si está tan claro, por qué esta discusión? Es porque React sí se usa para lo que se usa un framework y a menudo se compara con sus competidores como Angular o Vue.js que sí son claramente frameworks.

Este hecho se explica porque React se utiliza muy habitualmente con otras herramientas y librerías donde, su combinación sí podríamos considerarla un framework. Por ejemplo, Redux, como un contenedor global de estado en la aplicación, React Router para el sistema de routing de las aplicaciones, Axios para las comunicaciones HTTP, etc.

Si tenemos en consideración toda una serie de complementos y herramientas del ecosistema React, podríamos aceptar la denominación de framework. Pero siempre teniendo en mente las distancias y sabiendo que, diga lo que se diga, en verdad React en sí es solo una librería.

React: Framework o librería

Editar

Motivos por los que la comunidad usa y apoya a React

React es una librería ampliamente apoyada por la comunidad, la que manifiesta diversos motivos por los cuales usan y disfrutan desarrollando con esta solución para desarrollo de interfaces de usuario.

  • Tiene una comunidad muy grande, es fácil encontrar solución a problemas y aprender de otros desarrolladores, obtener componentes que se basan en React.
  • "Aprende una vez y úsalo siempre". Es decir, no introduce cambios agresivos en la librería a lo largo de sus versiones.
  • Ofrece compatibilidad hacia atrás. No necesitas actualizar tu código para que siga funcionando con el tiempo.
  • Es sencillo de aprender, con una curva suavizada de aprendizaje, lo que lo hace atractivo.
  • Ofrece un buen rendimiento de las aplicaciones.
  • Es muy flexible, por lo que puedes usarlo de diversas maneras y hacer uso a un buen número de herramientas del ecosistema React, de manera opcional y a medida que las vas necesitando.
  • Es una demanda laboral muy habitual de las empresas (2020).
  • Permite ordenar y mantener bien el código de las aplicaciones en componentes, aunque esto es una constante en cualquier librería moderna.

Editar

Vite para el desarrollo de proyectos React

Para el desarrollo de proyectos React necesitamos algún tipo de herramienta frontend que nos permita lidiar con las particularidades del lenguaje Javascript y la adaptación a la plataforma web, concretamente para importar módulos que no están realizados con el estándar de ES6 Modules y la creación de los bundles de código.

Tradicionalmente se venía usando Webpack, mediante el conocido proyecto Create React App. Sin embargo actualmente la preferencia es usar Vite como herramienta de desarrollo.

Vite nos ofrece mayor velocidad de desarrollo y una serie de herramientas más modernas para lidiar con los assets en general, como el Javascript, CSS y otro tipo de archivos.

Para crear un proyecto React lanzamos el siguiente comando en la consola:

npm create vite@latest

Este comando se encargará de instalar Vite en nuestro sistema, o actualizarlo, y posteriormente crear la estructura de archivos y carpetas para un proyecto React sencillo. Para ello nos realizar una serie de preguntas elementales, entre ellas las tecnologías que queremos escoger, ya que Vite es capaz de desarrollar scaffoldings de proyectos para varios tipos de proyectos.

Luego tenemos que acceder a la carpeta donde se ha creado el proyecto:

cd nombre-del-proyecto

Y allí instalar las dependencias con el gestor de dependencias que estemos usando comúnmente, ya sea npm o yarn.

npm install

Una vez instaladas las dependencias podemos arrancar el servidor de desarrollo que viene incluido en Vite, que ya tiene todo listo para poder desarrollar el proyecto de una manera ágil, como el live-reload, la compilación del Javascript y todo lo demás.

El servidor de desarrollo lo arrancamos con el comando:

npm run dev

Luego, cuando queramos llevar la aplicación a producción, podemos lanzar el comando build.

npm run build

Editar

¿Quieres añadir algo sobre React?

Crea artículos, recursos o comparte información sobre React

Crear un bloque

Temas relacionados

Preguntas y respuestas de React

Se han recibido 1 faqs en React

Hacer una pregunta