Iniciando App - React Native

Oi devs! Esse é o primeiro tutorial da série que irei fazer sobre Reagir Native e te ajudar a construir seu próprio aplicativo. Sendo assim, para inaugurar, abaixo irei te usar como iniciar o seu projeto e definir a estrutura de pastas. 

Vale lembrar que essa estrutura sou eu que defino, mas você pode fazer a sua própria. Bora começar?

Em primeiro lugar, você deve ter instalado em sua máquina:

• react-native-cli
• node
  
• algum editor de código, no meu caso é o código do VS
• JDK
• Android Studio(android) ou Xcode(ios)

Recomendo fortemente esses dois links para configuração de ambiete:

• Docs da Rocketseat
• Vídeo para ajudar na instalação do JDK

Você também pode iniciar seu app com Expo, que não precisará das configurações acima:

https://reactnative.dev/docs/environment-setup

Tendo isso configurado, vamos aos passos:

1. Criar o aplicativo

Para criar o seu aplicativo, navegue no terminal até uma pasta que queira armazená-lo e digite:

2. Iniciar a execução da aplicação

Navegue até a pasta do aplicativo e abra dois terminais. 

No primeiro digite: react -native start

No segundo, digite: react -native run-android , caso esteja no Windows / Linux ou react-native run- ios , caso esteja sem Mac.

Na sua tela aparecerá o app executado:

** Caso gere esse  erro ***

Crie um arquivo nomeado local.properties em ./android e dentro insira o caminho da sua sdk do android:

sdk.dir = / home / user / android / Sdk

3. Estrutura de pastas

Para uma melhor organização do código, iremos ajustar a nossa estrutura, que inicialmente está assim:

Geralmente adicionamos uma pasta src à raiz do projeto para armazenar o código. Dentro dela adicionamos o seguinte:

• App.tsx, que irá armazenar o conteúdo principal da aplicação. 

Como vimos, esse arquivo já está na raiz, então é só copiá-lo para a pasta src :

Agora, no arquivo index.js da raiz, devemos adicionar o novo caminho do arquivo App.tsx

• Screens , que irá carregar conforme as telas do app
• Components , que irá carregar os componentes da aplicação
• Themes , que irá carregar os temas da aplicação (Cores, definições de estilos principais, etc)
• assets , que irá carregar as imagens e fontes utilizadas no app

Sua estrutura agora estará disponível assim:

4. Agora vamos ver se está funcionando

Vamos mostrar na nossa tela o famoso Hello World para ver se tudo está funcionando.

Crie uma pasta chamada Home em / Screens e insira um arquivo nomeado index.tsx

Dentro do arquivo digite uma estrutura inicial do código:

Eu utilizo a extensão  https://marketplace.visualstudio.com/items?itemName=rocketseat.RocketseatReactNative  da Rocketseat. É só digitar rnfc , que ele já irá gerar uma estrutura inicial com o nome do arquivo.

E importe ele no nosso arquivo principal App.tsx:

Agora é só inserir o nosso Hello World com o componente Text do react-native:

E sua aplicação ficará assim:

Finalizamos nossa inicialização do nosso aplicativo :) !!!

Espero que tenham gostado do tutorial e caso tenham dúvidas, podem me mandar DM no meu insta  mafe.dev  ou e-mail que eu irei responder.

Nos próximo tutoriais, iremos criar um clone do ifood, que foi um pedido dos meus seguidores no meu instagram. Então se inscrevam aqui no canal para receberem minhas próximas publicações.