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 aplicación completo, React se centra únicamente en la creación de vistas de aplicaciones a través de unidades encapsuladas denominadas componentes que mantienen el estado y generan 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 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:

• Instalar un entorno de desarrollo de React en Windows
• Instalar un entorno de desarrollo de React en Windows Subsystem for Linux

¿Qué se puede hacer con React?

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

• Basic web apps: Si no está familiarizado con React y está interesado principalmente en aprender a crear una aplicación web básica con React, se recomienda crear una aplicación react con las herramientas de front-end vite en Windows. Si planea crear una aplicación web que se implementará para producción, puede que desee considerar crear una aplicación react mediante las herramientas de front-end vite en Windows Subsystem for Linux (WSL), para mejorar la velocidad de rendimiento, la compatibilidad de llamadas del sistema y la alineación entre el entorno de desarrollo local y el entorno de implementación (que suele ser un servidor Linux).

• Aplicaciones de una sola página (SPA): Son sitios web que interactúan con el usuario mediante la reescritura dinámica de las páginas web actuales con nuevos datos de un servidor, en lugar de que el navegador cargue páginas nuevas completas de manera predeterminada. Si desea crear un sitio web spa estático orientado a contenido, se recomienda instalar Gatsby en WSL. Si desea crear un sitio web SPA servido por el servidor con un backend de Node.js, se recomienda instalar Next.js en WSL. (Aunque ahora Next.js también ofrece servicio de archivos estáticos).

• Aplicaciones de escritorio: React Native for Desktop + macOS permite crear aplicaciones de escritorio nativas con JavaScript que se ejecutan en varios tipos de equipos de escritorio, portátiles, tabletas, Xbox y Mixed Reality dispositivos. Admite tanto el SDK de Windows como macOS SDK.

• Aplicaciones móviles nativas: React Native es una manera multiplataforma de crear aplicaciones De Android e iOS con JavaScript que se representan en código nativo de interfaz de usuario de la plataforma. Hay dos maneras principales de instalar React Native: la CLI de Expo y la CLI de React Native. Hay una buena comparación de los dos en StackOverflow. Expo tiene una aplicación cliente para dispositivos móviles iOS y Android para ejecutar y probar las aplicaciones. Para obtener instrucciones sobre cómo desarrollar una aplicación Android con Windows, React Native y la CLI de Expo, consulte React Native for Android development on Windows.

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.

• Install React mediante Vite directamente en Windows
• Instala React usando Vite en el Subsistema de Windows para Linux (WSL)
• Instalación del marco de Next.js en WSL
• Instalar el framework Gatsby en WSL
• Instalación de React Native para desarrollo de escritorio
• Instalar React Native para el desarrollo en Android en Windows
• Instalación de React Native para el desarrollo móvil entre plataformas)
• Instale React en el explorador sin cadena de herramientas: dado que React es una biblioteca de JavaScript que es, en su forma más básica, solo una colección de archivos de texto, puede crear aplicaciones de React sin instalar herramientas ni bibliotecas en el equipo. Es posible que solo quiera agregar algunos "aspectos de interactividad" a una página web y no necesite herramientas de compilación. Puede agregar un componente de React simplemente agregando una etiqueta sin formato <script> en una página HTML. Siga los pasos "Agregar React en un minuto" en los documentos de React.

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 habitualmente 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 un compilador que admite JSX.
• Agrupación : dado que el rendimiento es clave para las aplicaciones web modernas, es importante que javaScript de una aplicación incluya solo el código necesario para la aplicación y se combine en el menor número de archivos posible. Un agrupador, como webpack , realiza esta tarea por usted.
• Administración de paquetes: los administradores de paquetes facilitan la inclusión de la funcionalidad de paquetes de terceros en la aplicación, incluida la actualización de ellos y la administración de dependencias. Los administradores de paquetes usados habitualmente incluyen 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 automáticamente. La única configuración necesaria para usar Vite es Node.js.

• Para el desarrollo en Windows, siga las instrucciones para instalar Node.js en WSL o instalar Node.js en Windows.

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.

React Native Directory proporciona una lista de bibliotecas de componentes que la plataforma de destino puede filtrar.

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 cosas como direcciones URL que se pueden marcar para la aplicación web o una forma de composición para navegar 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 de 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 le permite compilar módulos de JavaScript, también conocidos como agrupador 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: 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 ser útil usar babel-preset-env para que no sea necesario gestionar manualmente las transformaciones de sintaxis ni los polyfills del navegador y se pueda definir qué navegadores de Internet soportar.
• ESLint: una herramienta para identificar e informar sobre patrones encontrados en el código JavaScript que le ayuda a hacer que el código sea más coherente y evitar errores.
• Enzyme: utilidad de pruebas de JavaScript para React que facilita las pruebas del resultado 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 pruebas asincrónicas, informes y asignación de excepciones no detectadas 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:

• La ruta de aprendizaje de React contiene módulos de cursos en línea que le ayudarán a empezar a trabajar con los conceptos básicos.
• Cree una aplicación de página única (SPA) que se ejecute en el explorador (como este sample aplicación web que recupere la información del calendario de un usuario con Microsoft Graph API)
• Creación de una aplicación representada por el servidor con Next.js o una aplicación generada por sitio estático con Gatsby
• Cree una interfaz de usuario (UI) para una aplicación nativa que se ejecute en dispositivos Windows, Android e iOS (consulte estos ejemplos de aplicaciones nativas de Windows o este ejemplo de aplicación nativa que obtiene información del calendario para un usuario con la API de Microsoft Graph)
• Desarrollar una aplicación para el dispositivo de doble pantalla Surface Duo
• Creación de una aplicación web o una aplicación nativa mediante componentes de Fluent UI React
• Compilación de una aplicación react con TypeScript

Recursos adicionales

• La documentación oficial de React ofrece toda la información más reciente y actualizada sobre React.
• Microsoft Edge complementos para React Developer Tools: agrega dos pestañas a las herramientas de desarrollo de Microsoft Edge para ayudar con el desarrollo de React: Componentes y Generador de perfiles.