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.

¿Funciona React en Windows?

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

• Instalación de un entorno de desarrollo de React en Windows
• Instalación de un entorno de desarrollo de React en el Subsistema de Windows para Linux

¿Qué se puede hacer con React?

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

• Aplicaciones web básicas: si no está familiarizado con React y está interesado principalmente en aprender a crear una aplicación web básica con React, se recomienda instalar create-react-app directamente en Windows. Si planea crear una aplicación web que se va a implementar en producción, puede considerar la posibilidad de instalar create-react-app en el Subsistema de Windows para Linux (WSL), para obtener una mejor velocidad de rendimiento, compatibilidad con las llamadas del sistema y alineación entre el entorno de desarrollo local y el entorno de implementación (que suele ser un servidor Linux).

• Aplicaciones de página única (SPA) : son sitios web que interactúan con el usuario reescribiendo dinámicamente la página web actual con nuevos datos de un servidor, en lugar del funcionamiento predeterminado del explorador de cargar páginas nuevas enteras. Si desea crear un sitio web SPA estático orientado al contenido, se recomienda instalar Gatsby en WSL. Si desea crear un sitio web SPA representado por el servidor con un back-end de Node.js, se recomienda instalar Next.js en WSL. (Aunque Next.js ahora también ofrece un servicio de archivos estáticos).

• Aplicaciones de escritorio nativas: React Native para Windows y macOS permite crear aplicaciones de escritorio nativas con JavaScript que se ejecutan en varios tipos de equipos de escritorio, portátiles, tabletas, Xbox y dispositivos de realidad mixta. Admite tanto Windows SDK como macOS SDK.

• Aplicaciones móviles nativas: React Native es una manera multiplataforma de crear aplicaciones Android e iOS con JavaScript que se representan en código de interfaz de usuario de la plataforma nativa. Hay dos maneras principales de instalar React Native: la CLI de Expo y la CLI de React Native. Hay una excelente comparación de las 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 Introducción al desarrollo para Android mediante React Native.

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.

• Instalar React mediante Vite directamente en Windows
• Instalar React mediante Vite en el Subsistema de Windows para Linux (WSL)
• Instalación del marco Next.js en WSL
• Instalación del marco Gatsby en WSL
• Instalación del entorno de desarrollo de escritorio React Native para Windows
• Instalación de React Native para el desarrollo para Android en Windows
• Instalación de React Native para el desarrollo para dispositivos móviles para varias plataformas
• Instalación de React en el explorador sin cadena de herramientas : puesto que React es una biblioteca de JavaScript que, en su forma más básica, es 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. Para agregar un componente de React, simplemente agregue una etiqueta <script> sin formato en una página HTML. Siga los pasos que se describen en "Agregar React en un minuto" en la documentación 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 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.

• 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.

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 integrado en el paquete create-react-app para ayudar a escribir pruebas idiomáticas de JavaScript.
• 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:

• 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.
• Creación de una aplicación de página única (SPA) que se ejecuta en el explorador (como esta aplicación web de ejemplo que recupera 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 un sitio estático con Gatsby
• Creación de una interfaz de usuario para una aplicación nativa que se ejecute en dispositivos Windows, Android e iOS (consulte estos ejemplos de aplicaciones nativas de Windows o esta aplicación nativa de ejemplo que recupera información del calendario de un usuario con Microsoft Graph API).
• React Native para Surface Duo
• Creación de una aplicación web o una aplicación nativa mediante componentes Fluent UI de React
• Creación de una aplicación de React con TypeScript

Recursos adicionales

• La documentación oficial de React ofrece toda la información más reciente y actualizada sobre React.
• Complemento de Microsoft Edge React Developer Tools (Herramientas de desarrollo para React): agrega dos pestañas a las herramientas de desarrollo de Microsoft Edge para ayudar con el desarrollo en React: Components y Profiler.