DEV Community

Jose Carlos de Freitas
Jose Carlos de Freitas

Posted on • Edited on

Criando seu primeiro aplicativo React Native do zero: Um guia passo a passo

O React Native é uma plataforma poderosa para criar aplicativos móveis multiplataforma usando JavaScript. Este guia irá te levar da instalação do React Native à criação de um aplicativo funcional, passo a passo.

Passo 1: Ambiente

Você terá que ter instalado estas ferramentas em seu sistema:

  • Node.js. Basta acessar o link https://nodejs.org/en/, realizar o download e seguir os passos da instalação.
  • Git. Basta acessar o link https://git-scm.com/download/win, realizar o download e seguir os passos da instalação.
  • Um editor de código como Visual Studio Code, Sublime Text ou Atom.
  • Expo Go. Para testar o app no seu celular você precisa instalar o aplicativo Expo GO nele.

Passo 2: Criação do projeto

Navegue até o diretório em que queira os projetos salvos em seu sistema. Abra o bash do git:

git bash

Digite o seguinte comando:

npx create-expo-app testeApp
Enter fullscreen mode Exit fullscreen mode

git bash

Com isso o seu app react-native estará criado. Vá para a pasta e abra ele no seu editor, no meu caso estou usando o visual studio code.

vs code

Abra o terminal e digite:

expo start
Enter fullscreen mode Exit fullscreen mode

terminal vs code

Após executar este comando será gerado o Qr Code para ser lido com o app do Expo Go baixado no seu celular.

qr code

Agora com o seu celular e o app Expo Go aberto, na tela inicial terá uma opção chamada Scan Qr Code.

scan qr code

Que você vai usar para escanear o qr gerado. Depois de escaneado irá abrir a tela inicial do seu app.

home app

Hello World
Agora vá para o vs code e edite o arquivo inicial do seu app.

inicial

Faça seu primeiro hello world em um aplicativo.

hello world

se o app está rodando no seu celular é só salvar o arquivo que ele já atualiza no app.

first hello world

Pronto agora você já pode começar a desenvolver seus próprios aplicativos, espero ter ajudado. Muito obrigado por ler até aqui e até a próxima.

Top comments (0)