Introdução à criação de um aplicativo da área de trabalho com o React Native para Windows

O React Native para Windows 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 instalação para uso do React Native para Windows podem ser encontrados na página Requisitos do sistema. Verifique se o Modo de Desenvolvedor está ATIVADO no Aplicativo de Configurações do Windows.

Instalar o React Native para Windows

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

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

  2. 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>
    
  3. Alterne para o diretório do projeto e execute o seguinte comando para instalar os pacotes do React Native para Windows:

    cd projectName
    npx react-native-windows-init --overwrite
    
  4. 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 2019 com as seguintes cargas de trabalho:

    • Cargas de trabalho: desenvolvimento para Plataforma Universal do Windows & Desenvolvimento para área de trabalho com C++.
    • Componentes individuais: atividades de desenvolvimento & 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.

Recursos adicionais