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:
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:
|
|
Para iniciar com JS |
|
|
Para iniciar com Typescript |
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:
|
|
Estrutura inicial |
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 :
|
|
App.tsx em /src |
Agora, no arquivo index.js da raiz, devemos adicionar o novo caminho do arquivo App.tsx
|
|
index.js |
- 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:
|
|
Estrutura de pastas |
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
|
|
Tela Home |
Dentro do arquivo digite uma estrutura inicial do código:
|
|
Conteúdo da Home |
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:
|
|
Conteúdo de App.tsx |
Agora é só inserir o nosso Hello World com o componente Text do react-native:
|
|
Hello World em /Home |
E sua aplicação ficará assim:
|
|
Aplicação com Hello World |
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.