Compartir a través de


Introducción a React

¿Qué es React JS?

React es una biblioteca de código abierto de JavaScript para crear interfaces de usuario de front-end. A diferencia de otras bibliotecas de JavaScript que proporcionan un marco de trabajo de la aplicación completo, React se centra únicamente en la creación de vistas de aplicación mediante unidades encapsuladas llamadas componentes que mantienen el estado y generan los elementos de la interfaz de usuario. Puede colocar un componente individual en una página web o anidar jerarquías de componentes para crear una interfaz de usuario compleja.

Normalmente, los componentes de React se escriben en JavaScript y JSX (JavaScript XML), que es una extensión de JavaScript que se parece mucho a HTML, pero tiene algunas características de sintaxis que facilitan la realización de tareas comunes, como el registro de controladores de eventos para los elementos de la interfaz de usuario. Un componente de React implementa el método render, que devuelve el código JSX que representa la interfaz de usuario del componente. En una aplicación web, el código JSX devuelto por el componente se traduce en HTML compatible con el explorador y representado en el explorador.

Importante

En febrero de 2025, el equipo de React anunció que Create React App (CRA) ha quedado en desuso para las nuevas aplicaciones. El equipo recomienda que las aplicaciones existentes migren a un marco como Next.js o React Router o migre a una herramienta de compilación como Vite, Parcel o RSBuild.

¿Funciona React en Windows?

Sí. Windows admite dos entornos diferentes para desarrollar aplicaciones de React:

¿Qué se puede hacer con React?

Windows admite una amplia gama de escenarios para desarrolladores de React, entre los que se incluyen:

Opción de instalación

Hay varias maneras diferentes de instalar React junto con la cadena de herramientas integrada que mejor funcione para su escenario de caso de uso. Estas son algunas de las opciones más comunes.

Herramientas de React

Aunque escribir un componente de React simple en un editor de texto sin formato es una buena introducción a React, el código generado de esta manera es masivo, difícil de mantener e implementar, y lento. Hay algunas tareas comunes que las aplicaciones de producción deberán realizar. Estas tareas se controlan mediante otros marcos de JavaScript que la aplicación toma como una dependencia. Entre las tareas, se incluyen las siguientes:

  • Compilación: JSX es el lenguaje que se usa normalmente para las aplicaciones de React, pero los exploradores no pueden procesar esta sintaxis directamente. En su lugar, se debe compilar el código en la sintaxis estándar de JavaScript y se debe personalizar para distintos exploradores. Babel es un ejemplo de compilador que admite JSX.
  • Empaquetado: dado que el rendimiento es fundamental para las aplicaciones web modernas, es importante que el código JavaScript de una aplicación incluya solo el código necesario para la aplicación y se combine en el menor número posible de archivos. Un empaquetador, como webpack, realiza esta tarea de forma automática.
  • Administración de paquetes: los administradores de paquetes facilitan la inclusión de la funcionalidad de los paquetes de terceros en la aplicación, incluida su actualización y la administración de dependencias. Entre los administradores de paquetes más usados se encuentran Yarn y npm.

Juntos, el conjunto de marcos que le ayudan a crear, compilar e implementar la aplicación se llama cadena de herramientas. Un entorno de desarrollo fácil de configurar para react que usa esta cadena de herramientas es Vite, que genera una aplicación sencilla de una página. La única configuración necesaria para usar Vite es Node.js.

Directorio de componentes de React Native

Entre los componentes que se pueden usar en una aplicación de React Native se incluyen los siguientes:

  • Componentes principales: componentes que se desarrollan y tienen soporte técnico como parte del marco React Native.
  • Componentes de la comunidad: componentes desarrollados y mantenidos por la comunidad.
  • Componentes nativos: componentes que usted mismo crea, mediante código nativo de la plataforma, y registra para que sea accesible desde React Native.

El directorio de React Native proporciona una lista de bibliotecas de componentes que se pueden filtrar por plataforma de destino.

Opciones de la cadena de herramientas de React de pila completa

React es una biblioteca, no un marco, por lo que se pueden requerir herramientas adicionales para crear una aplicación más compleja. Además de usar React, puede considerar la posibilidad de usar:

  • Administrador de paquetes: dos administradores de paquetes populares para React son npm (que se incluye con NodeJS) y yarn. Ambos admiten una amplia biblioteca de paquetes bien mantenidos que se pueden instalar.
  • React Router: una colección de componentes de navegación que pueden ayudarle con aspectos como direcciones URL que se pueden agregar a marcadores para la aplicación web o una manera de interacción orientada a componentes en React Native. React solo se preocupa de la administración de estados y la representación de ese estado en el DOM, por lo que la creación de aplicaciones de React normalmente requiere el uso de una biblioteca de enrutamiento como React Router.
  • Redux: un contenedor de estado predecible que ayuda con la arquitectura del flujo de datos. Es probable que no sea algo que necesite hasta que acometa desarrollos de React más avanzados. Para citar a Dan Abramov, uno de los creadores de Redux: "No use Redux hasta que tenga problemas con React convencional".
  • Webpack: una herramienta de compilación que permite compilar módulos de JavaScript, también conocido como empaquetador de módulos. Cuando webpack procesa la aplicación, crea internamente un gráfico de dependencias que asigna los módulos que necesita el proyecto y genera uno o varios paquetes.
  • Uglify: un kit de herramientas con analizador, minificador, compresor y embellecedor de JavaScript.
  • Babel: un compilador de JavaScript que se usa principalmente para convertir código ECMAScript 2015+ en una versión compatible con versiones anteriores de JavaScript en exploradores o entornos actuales y antiguos. También puede resultar útil usar babel-preset-env para que no sea necesario microgestionar las transformaciones sintácticas o los elementos polyfill del explorador y definir qué exploradores de Internet admitir.
  • ESLint: una herramienta para identificar y notificar patrones encontrados en el código JavaScript que le ayuda a hacer que el código sea más coherente y evitar errores.
  • Se Enzyme: una utilidad de pruebas de JavaScript para React que facilita las pruebas de la salida de los componentes de React.
  • Jest: un marco de pruebas que funciona junto con Babel para ayudar a escribir pruebas de JavaScript idiomáticas en aplicaciones react.
  • Mocha: un marco de pruebas que se ejecuta en Node.js y en el explorador para ayudar con las pruebas asincrónicas, la generación de informes y la asignación de excepciones no controladas a los casos de prueba correctos.

Cursos y tutoriales de React

Estos son algunos lugares recomendados para aprender a usar React y compilar aplicaciones de ejemplo:

Recursos adicionales