React Native Series: Primeiros passos para criação do nosso aplicativo

Compartilhe

Compartilhar no facebook
Compartilhar no google
Compartilhar no twitter
Compartilhar no linkedin

Espera, o quê 🤔?

Houve um artigo anterior onde eu começo a série de nome React Native Series, e ensino o que é e como instalar o React Native. Confira👉🏾 https://movile.blog/react-native-series-o-que-e-react-native-como-usar-e-instalar/, para seguir adiante é necessário que seja feita a leitura do artigo anterior, então reserva 5min e da uma lida lá nele, beleza 😁?

Ok, mas que história é essa de App 🤨?

No final do artigo, digo que irei ensinar a vocês a criarem um app simples em React Native, agora nesse artigo vamos iniciar os primeiros passos da criação do nosso App.

Esse App será um Album Book, onde nele será listado alguns álbuns musicais.

Nesse App iremos fazer uso de Conexão com API, Listagem/ScrollView e… React Hooks ↪🐠!  Isso mesmo, você não leu errado, iremos criar o app em React Native já utilizando o tão falado React Hooks. Caso você não saiba o que seria React Hooks, irei explicar sobre ele nos próximos artigos, no caso mais na frente, então relaxe 😌.

Começando com o App.

Agora vamos dar início a criação do app.

Todos os passos abaixo irão usar totalmente os princípios básicos do artigo anterior. Não leu ainda? Então dá uma lida nele lá 👉🏾 https://movile.blog/react-native-series-o-que-e-react-native-como-usar-e-instalar/.

  1. Criar o app
Escolha uma pasta de sua preferência, abra ela no terminal e execute o seguinte comando: react-native init AlbumBook
  1. Executar o app

Depois de criado, vamos executar ele no terminal também!

Para iOS: react-native run-ios

Para Android: react-native run-android

NOTA* Quem vai usar muito o Android, recomendo instalar o ADB, neste link ele ensina como fazer: https://stackoverflow.com/questions/31374085/installing-adb-on-macos

Depois de executado um desses comandos, apenas aguarde, pode levar um tempinho …

Ao finalizar, deverá aparecer algo assim no seu simulador:

simulador

Melhorando a estrutura de arquivos do App.

Depois de o projeto estar rodando, vamos abrir ele em uma IDE. Nessa série, eu irei usar o VsCode, recomendo ele bastante! Caso alguém queira, aqui está o link de download dele: https://code.visualstudio.com/download

A Estrutura do seu App, vai estar provavelmente dessa maneira:

react2

Vamos dar uma melhorada nela para o desenvolvimento do App!

  1. Na raiz do projeto, crie um a pasta de nome src
  2. Dentro da pasta src, crie o arquivo de nome App.js

Agora, sua estrutura deve estar algo parecido com:

react3

Você deve ter percebido que agora, tem 2 arquivos com nome App.js, certo? Tudo bem, a gente já vai corrigir isso!

Procure pelo arquivo de nome index.js, achando ele, abra ele. Quando você abrir, deverá ter algo provavelmente parecido com isso:

react4

Perceba que tem uma linha importando o arquivo App.js, certo?

Iremos trocar a referência desse importe, para o App.js que acabamos de criar, dentro da pasta src.

Você deverá trocar de:

Para:

Depois de feito isso, salve o arquivo.

Agora que o arquivo foi salvo, podemos apagar o App.js que está fora da pasta src, porem antes de apagar, vamos dar uma olhada nele? Vamos lá!

Ao abrir, você deverá ver um bocado de linha de código, fique a vontade para ler e entender caso assim você queira, ao acabar sua análise, exclua ele.

Criando nossa primeira tela.

Depois de excluido o arquivo App.js fora da pasta src, abra o arquivo App.js que está dentro da pasta src que criamos.

Ao abrir ele, você vai ter algo do tipo:

react5

Sim, nada no arquivo!

Vamos começar a a escrever umas linhas de código nele!

Começando, iremos importa a Biblioteca do React para o arquivo.

No topo desse arquivo, faça a seguinte importação:

Basicamente, nessa linha estamos dizendo que nesse arquivo, o App.js, vamos usar React nele.

Depois iremos importa mais uma, que será a Biblioteca do React Native, logo abaixo da importação do React que fizemos:

Perceba que junto a ela, eu importei 2 componentes, que seria o View  e Text. Para quem trabalha com Web, o View, seria o <div> do Web, e o Text como o <h1>.

Resumindo para quem não entendeu, o View seria o componente onde a gente vai organizar os elementos da tela, guardar os elementos da tela (ex: Texto, Botão, Input, etc..), e o Text seria o componente onde a gente vai colocar os textos que queremos que aparece na tela da nossa aplicação. 

Caso mesmo assim não tenha entendido, já já você vai entender melhor, beleza 😉? 

Depois de importado as duas bibliotecas, seu código deve estar parecido com isso: 

react6

Se sim, está tudo ok até agora.

Agora, Iremos criar uma Constante, que nela irá conter o código referente a nossa tela.  

Logo abaixo dos imports, pule 1 linha e escreva o seguinte código:

Feito isso, dentro do ultimo parênteses, aperte ENTER, com isso, digite o seguinte código dentro desse parênteses:

No final, seu código deve ficar assim:

react7

Acredite ou não, mais com esse pouquinho de código já criamos nossa primeira tela 😱!

Agora, no final dessa linha de código, vamos exportar esse Const App, de modo que o React Native entenda que no arquivo App.js dentro da pasta src, possui o Const App que dentro dessa variável constante, existe o código da nossa tela.

Para fazer isso tudo que eu descrevi acima, basta apenas escrever esse código:

Feito isso, salve o arquivo com essas alterações.

No final de tudo, o arquivo App.js, deve estar assim:

react8
Feito isso, Vamos ao tudo ou nada! Que seria ver esse código rodando no simulador/emulador 😄!

Se você for no simulador/emulador de vocês, vão perceber que a tela deles ainda está do mesmo modo, com as mesmas coisas default, igual no primeiro print desse artigo. Se liga nessa dica importante, sempre que fizemos alguma coisa no código React Native, para ver essa atualização, temos de ”Atualizar” o código que está rodando no simulador/emulador de modo manual (existe uma forma automática, mas não vamos explorar ela agora).

iOS:

Vá no seu simulador, click nele, e aperte esse comando de teclas:

COMMAND + R

Android

Vá no seu emulador, click nele e aperte esse comando de teclas:

COMMAND + M

Em seguida, no menu que abriu, click na opção RELOAD.

Feito isso, os simuladores vão atualizar a tela e…

react9

Vai aparecer o textinho de vocês na tela 🎉!

Mas Samuel, o texto mal tá aparecendo no iOS e nem tá centralizado, nem bonitinho etc… 😶

Sim, realmente, porém isso foi algo proposital!

No próximo artigo iremos focar no Assunto Estilização, ou conhecido também como CSS! Porém, no React Native é um pouco diferente o modo de estilizar com relação ao Web, mais relaxe, que vou ensinar a vocês como fazer 😃.

Então, não deixe de acompanhar essa Série!

O Código que fizemos nessa aula, se encontra em meu GitHub:

https://github.com/samuelmataraso/AlbumBook/tree/article/class_1

Valeu! Até mais o/

Deixe um comentário

%d blogueiros gostam disto: