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:
Artículos destacados de React:
Qué es React. Por qué usar React
Un primer artículo para conocer muchos detalles sobre la librería React y los motivos por los que es una excelente alternativa para desarrollo frontend.
Primeros pasos con React
Este es un artículo más práctico dedicado a explicar cómo se desarrolla un un primer componente con React y cómo se pone en funcionamiento en una página web.
Manuales
Colecciones
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.
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.
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
¿Quieres añadir algo sobre React?
Crea artículos, recursos o comparte información sobre React
Temas relacionados
Preguntas y respuestas de React
Se han recibido 1 faqs en React
Resp.
1
Votos
1