Quais desafios vou enfrentar ao começar um app com React Native?

Nicholas Eduardo
Aug 14, 2017 · 6 min read

Esse é um overview para quem deseja ou pensa em começar um aplicativo com React Native. — Daqui em diante, abreviarei React Native para RN.

Obs: não falarei do expo, mas caso tenha interesse de conhecer, clique aqui.

Ambientes

No mundo perfeito, você desenvolverá aplicativos para Android e iOS, mas vamos no convencional, você tem uma máquina que roda somente ambiente Android.

Antes de tudo, é necessário baixar o Android Studio, suas dependências e criar um emulador compatível com seu computador. Digo as especificações para não deixar o ambiente de desenvolvimento lerdo.

Uma dica importante! Se você nunca fez um aplicativo, por mais que seja simples com Android, faça, senão a curva de aprendizado com RN será maior.

React Native

Instalação

É necessário ter o Nodejs para instalar as dependências do RN e seu CLI.

Rodar RN no Emulador

Quando você lê “Rodar RN no Emulador”, provavelmente o caminho que fará é: abrir o Android Studio, tools, AVD e iniciar o emulador.

Bem, eu tenho um caminho melhor que fará você ganhar mais processamento, por rodar somente o emulador.

Para linux, vá até a pasta /root, depois entra no Android/sdk/emulator, execute o arquivo emulator passando dois argumentos: .

Esse nomedoemulador, você definiu no inicio, quando criou o emulador. E provavelmente você não trocou o nome, só deu next, next, finish. Vá até o Android Studio, menu tools, avd e verifique o nome do emulador, se estiver um nome complexo, altere e reexecute o comando para iniciar o emulador pelo root.

Obs: não sei o caminho para windows, então se souberem, comentem.

Rodar RN no Celular

Esse é um procedimento meio chato de se fazer, mas você trabalha rapidamente, pois, não tem o emulador rodando e diminuindo seu processamento com outros programas abertos.

Mais informações, clique aqui

Primeiros passos

Não criou um projeto ainda?

Execute na sua pasta raiz ou onde estão todos seus projetos.

Você sempre terá três abas do terminal, uma para o emulador, uma para inicializar o projeto do react e depois seu server, e por fim, o log do que está acontecendo no aplicativo. É com ele que sabemos o retorno do console.log, por exemplo.

Abra o emulador, caso não tenha aberto antes, será a primeira inicialização dele, então instalará algumas dependências do Android. Após ter aberto, vá para outra aba, entre na pasta criada do projeto e execute . O RN irá inicializar o projeto no emulador, com todas suas particularidades.

Obs: Abrirá um novo terminal com o server do RN, mas feche, tive muito problema de incompatibilidade, então sugiro que ao terminar a execução do react-native run-android, execute na mesma aba react-native start.

Obs2: O RN tem um sistema de reload que facilita o desenvolvimento, pois, toda vez que der um save no código, será atualizado o projeto no emulador. Caso tenha interesse, clique aqui.

Outros passos

Iniciei o projeto, estou com meu editor aberto e o que preciso entender daqui pra frente?

Com o editor aberto, você verá um arquivo chamado index.android.js e index.ios.js. Cada arquivo será chamado pelo core do RN quando estiver no ambiente referenciado.

E como eu consigo usar o DRY (Dont Repeat Yourself) ou em outras palavras, reutilizar o mesmo código nos dois ambientes?

Crie um arquivo index.js e direcione nos dois arquivos (index.android.js e index.ios.js), o mesmo. Veja esse projeto e se atentem aos arquivos mencionados.

Após ter apontado o index.js para os dois arquivos, será utilizado o mesmo projeto, diminuindo muito o retrabalho. Mas vale lembrar que cada ambiente tem suas particularidades, como configurar notificação, splashscreen e etc.

Módulos

O RN tem diversos módulos nativos que podem ser acessados pelo package react-native. Então busque sempre na documentação para ter um melhor entendimento do todo.

Outros módulos podem ser encontrados, basta procurar no Google com a palavra chave react-native.

Quando for utilizar módulos de terceiros, leia bem a documentação, pois, existem arquivos que precisam ser alterados para que funcione perfeitamente. Caso ao contrario, terá dor de cabeça.

Se possível, teste os módulos criando outro projeto, para que o principal não fique com códigos perdidos que podem causar erros estranhos.

Obs: Caso tenha interesse em criar seus próprios módulos, você precisa conhecer a linguagem nativa do ambiente que quer criar, seja Android ou IOS. Para saber mais, clique aqui para Android e aqui, para IOS.

Obs2: Você verá o rnpm link e rnpm unlink sempre nos módulos externos. Ele de forma inteligente, adiciona as dependências nos arquivos do Android e IOS, eliminando a necessidade de alterar qualquer coisa.

Layout

Os engenheiros do Facebook implementaram o flexbox, então leia sobre, busque criar alguns layouts via codepen e outros editores online. Você pode utilizar html/CSS e quando for para o RN, terá menos complicações quanto ao entendimento do código.

Outro ponto. Não se usa o HTML, o próprio RN tem suas particularidades que não são coisas do outro mundo, basta dar uma lida na documentação.

Obs: Se você não quer se preocupar com layout, pode usar o NativeBase que é um framework com diversos componentes prontos. Basta usar e focar na sua regra de negócio.

Obs: Caso precise do width e height real do device, basta usar o Dimensions.

Linguagem do RN

Como o próprio nome diz, usa-se react e JavaScript é o ES6. Você pode utilizar o ES5, mas você terá uma dificuldade para entender as documentações dos módulos que for utilizar, é uma volta sem fim, então estude ES6.

Navegação

Pra quem está acostumado com rotas na web, vai procurar pelo react-router, mas se deparará com a necessidade de criar transição para cada exibição de página, ativar o BackButton do Android e etc.

Por isso sugiro que utilize o módulo que é recomendado pelo próprio Facebook chamado react-navigation. Ele contém uma estrutura que comporta cada página, criando uma dinâmica fácil de manipular, podendo usar redirecionamento com ou sem parâmetros, e etc.

Storage

Na web utilizamos o localStorage e sessionStore, no RN é utilizado o AsyncStorage.

Testes

O RN já contém o jest em seu build, então basta rodar npm test, que executará os tests estão na pasta __tests__. Esse é o padrão do projeto, mas o jest procura arquivos que contém test no nome, exemplo app.test.js.

Mais sobre testes no RN:

Tipagem

Por ser do facebook, RN contém o flowtype em seu build, então basta rodar npm run flow, para executar o mesmo. Para quem não conhece, o flowtype é utilizado no desenvolvimento da aplicação, com ele você define tipos de dados que serão manipulados, assim diminuindo a quebra da aplicação.

Ex: recebeString = (name: String) => (), aqui você está definindo que name será do tipo string e caso receba outro tipo de dado, dará erro.

Google Play Store e Apple Store

Depois que desenvolveu seu aplicativo, você precisa seguir particularidades de cada ambiente. A documentação, stackoverflow e a comunidade do React Brasil são os melhores meios para encontrar o que você procura.

Mas antes que faça alguma pergunta no Slack do React, procure entender por meio de vídeos e tutoriais, como funciona a publicação do aplicativo. Assim podemos te ajudar da melhor forma possível.

Obs: Caso tenha gerado um release e instalou no device, quando for rodar seu ambiente de desenvolvimento para qualquer alteração, você precisa desinstalar o apk existente, pois, dará um erro.

E por fim…

Não tenha segurança somente no RN, abra seu aplicativo no ambiente que você está desenvolvendo, pois, alguns erros somente o sdk consegue lhe entregar uma solução mais viável. Caso não queira, o caminho será longo e nem sempre as soluções vão aparecer.

Se você chegou até aqui, meus agradecimentos, essa é a minha retribuição a comunidade React Brasil.

Abraços!

React Brasil

Tudo sobre o mundo React

Nicholas Eduardo

Written by

React Brasil

Tudo sobre o mundo React

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade