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

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.

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

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

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: ./emulador -avd nomedoemulador.

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.

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

Não criou um projeto ainda?

Execute react-native init nomedoprojeto 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 react-native run-android. 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.

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.

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.

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.

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.

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.

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

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:

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.

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!