Comece a criar um aplicativo de desktop com o React Native para Desktop

Artigo
11/09/2024

O React Native para Desktop permite que você crie um aplicativo UWP (Plataforma Universal do Windows) usando o React.

Visão geral do React Native

O React Native é uma estrutura de aplicativo móvel de software livre criada pelo Facebook. Ele é usado para desenvolver aplicativos para Android, iOS, Web e UWP (Windows) fornecendo controles de interface do usuário nativos e acesso completo à plataforma nativa. O uso do React Native exige uma compreensão dos conceitos básicos do JavaScript.

Para obter mais informações gerais sobre o React, confira a página de visão geral do React.

Pré-requisitos

Os requisitos de configuração para usar o React Native para Desktop podem ser encontrados na página Requisitos do sistema. Verifique se o Modo de Desenvolvedor está ATIVADO no Aplicativo de Configurações do Windows.

Instale o React Native para desktop

Você pode criar um aplicativo da área de trabalho do Windows usando o React Native para Desktop seguindo estas etapas.

Abra uma janela de linha de comando (terminal) e procure o diretório em que deseja criar seu projeto de aplicativo da área de trabalho do Windows.
Use esse comando com o NPX (Executor de Pacotes do Node) para criar um projeto do React Native sem a necessidade de instalação local ou a instalação global de ferramentas adicionais. O comando vai gerar um aplicativo React Native no diretório especificado por <projectName>.
```
npx react-native init <projectName>
```
Para iniciar um novo projeto com uma versão específica do React Native, use o argumento --version. Para saber mais sobre as versões do React Native, confira Versões – React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Alterne para o diretório do projeto e execute o seguinte comando para instalar os pacotes do React Native para Desktop:
```
cd projectName
npx react-native-windows-init --overwrite
```
Para executar o aplicativo, primeiro inicie o navegador da Web (ou seja, o Microsoft Edge) e execute o seguinte comando:
```
npx react-native run-windows
```

Depurar o aplicativo da área de trabalho React Native usando o Visual Studio

Instale o Visual Studio 2022 com as seguintes cargas de trabalho:
- Cargas de trabalho: desenvolvimento para Plataforma Universal do Windows e Desenvolvimento para área de trabalho com C++.
- Componentes individuais: atividades de desenvolvimento e suporte ao desenvolvimento do Node.js.
Abra o arquivo de solução na pasta do aplicativo no Visual Studio (por exemplo, AwesomeProject/Windows/AwesomeProject.sln se você usou AwesomeProject como <projectName>).
Selecione a configuração de Depuração e a plataforma x64 nos controles de caixa de combinação à esquerda do botão Executar e abaixo do item de menu Equipe e Ferramentas.
Execute yarn start no diretório do projeto e aguarde o empacotador do React Native relatar o êxito.
Selecione Executar à direita do controle de caixa de combinação da plataforma no VS ou o item de menu Depurar > Iniciar sem Depuração. Agora você verá seu novo aplicativo, e o Chrome terá carregado http://localhost:8081/debugger-ui/ em uma nova guia.
Selecione a tecla F12 ou CTRL + SHIFT + I para abrir as Ferramentas para Desenvolvedores no navegador da Web.

Depurar o aplicativo da área de trabalho React Native usando o Visual Studio Code

Instalar o Visual Studio Code
Abra a pasta de aplicativos no VS Code.
Instale o plug-in de Ferramentas React Native para VS Code.

Crie um arquivo no diretório raiz de aplicativos, .vscode/launch.json, e cole a seguinte configuração:

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

Pressione F5 ou procure o menu Depurar (se preferir, pressione CTRL + SHIFT + D) e, na lista suspensa Depurar, selecione "Depurar o Windows" e pressione a seta verde para executar o aplicativo.

Compartilhar via