Introducción a la compilación de una aplicación de escritorio con React Native for Desktop

Artículo
11/09/2024

React Native for Desktop permite crear una aplicación de Plataforma universal de Windows (UWP) mediante React.

Introducción a React Native

React Native es un marco para aplicaciones móviles de código abierto creado por Facebook. Se usa para desarrollar aplicaciones para Android, iOS, Web y UWP (Windows) y proporciona controles de interfaz de usuario nativa y acceso completo a la plataforma nativa. Trabajar con React Native requiere un conocimiento de los aspectos básicos de JavaScript.

Para más información general sobre React, consulte la página Introducción a React.

Requisitos previos

Los requisitos de configuración para usar React Native for Desktop se pueden encontrar en la página Requisitos del sistema. Asegúrese de que el modo de desarrollador esté activado en la aplicación de configuración de Windows.

Instalación de React Native para escritorio

Puede crear una aplicación de escritorio de Windows con React Native for Desktop siguiendo estos pasos.

Abra una ventana de la línea de comandos (terminal) y vaya al directorio donde desea crear el proyecto de aplicación de escritorio de Windows.
Puede usar este comando con el ejecutor de paquetes de Node (NPX) para crear un proyecto de React Native sin necesidad de instalar herramientas adicionales de forma local o global. El comando generará una aplicación de React Native en el directorio especificado por <projectName>.
```
npx react-native init <projectName>
```
Si desea iniciar un nuevo proyecto con una versión específica de React Native, puede usar el argumento --version. Para obtener información sobre las versiones de React Native, consulte Versiones: React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Cambie al directorio del proyecto y ejecute el siguiente comando para instalar los paquetes de React Native for Desktop:
```
cd projectName
npx react-native-windows-init --overwrite
```
Para ejecutar la aplicación, primero inicie el explorador web (por ejemplo, Microsoft Edge) y, a continuación, ejecute el siguiente comando:
```
npx react-native run-windows
```

Depuración de la aplicación de escritorio de React Native mediante Visual Studio

Instale Visual Studio 2022 con las siguientes opciones marcadas:
- Cargas de trabajo: Desarrollo de la plataforma universal de Windows y Desarrollo para el escritorio con C++.
- Componentes individuales: actividades de desarrollo y compatibilidad con el desarrollo para Node.js.
Abra el archivo de la solución de la carpeta de la aplicación en Visual Studio (por ejemplo, AwesomeProject/windows/AwesomeProject.sln, si usó AwesomeProject como <projectName>).
Seleccione la configuración de depuración y la plataforma x64 en los controles de cuadro combinado situados a la izquierda del botón Ejecutar y debajo del elemento de menú Equipo y herramientas.
Ejecute yarn start desde el directorio del proyecto y espere a que el empaquetador de React Native informe de que se ha ejecutado correctamente.
Seleccione Ejecutar a la derecha del control de cuadro combinado de la plataforma en VS o seleccione el elemento de menú Depurar ->Iniciar sin depurar. Ahora verá la nueva aplicación y Chrome debería haber cargado http://localhost:8081/debugger-ui/ en una nueva pestaña.
Seleccione la tecla F12 o Ctrl+Mayús+I para abrir las Herramientas de desarrollo en el explorador web.

Depuración de la aplicación de escritorio de React Native mediante Visual Studio Code

Instalación de Visual Studio Code
Abra la carpeta de la aplicación en VS Code.
Instale el complemento Herramientas de React Native para VS Code.

Cree un nuevo archivo .vscode/launch.json en el directorio raíz de la aplicación y pegue la configuración siguiente:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

Pulse F5 o vaya al menú de depuración (también puede presione Ctrl+Mayús+D) y, en la lista desplegable Depurar, seleccione "Depuración de Windows" y pulse la flecha verde para ejecutar la aplicación.

Compartir a través de