28 minutos de leitura
Autor(a)
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
O React Native é um framework de código aberto para desenvolvimento mobile, criado pelo Facebook, que permite criar aplicações multiplataforma nativas para iOS e Android usando JavaScript. Empresas como Uber, Microsoft e Facebook utilizam o framework React Native em seus aplicativos, mostrando sua robustez.
No entanto, antes de decidir usar o React Native, é crucial que você entenda como ele funciona para decidir se é o mais adequado para o seu projeto.
Quais são suas principais vantagens e maiores desvantagens? Qual é a diferença de outras plataformas de desenvolvimento cruzado? O que seus desenvolvedores e desenvolvedoras precisam estar cientes antes de embarcar na jornada React Native?
Essas e outras questões serão esclarecidas ao longo deste artigo, ajudando você a decidir se o React Native é a melhor escolha para o seu projeto.
React Native (também conhecido como RN) é um framework de desenvolvimento mobile multiplataforma baseado em JavaScript, que permite criar aplicativos móveis nativos para iOS e Android com uma única base de código. O framework facilita o desenvolvimento rápido e eficiente, sendo uma escolha popular para empresas e desenvolvedores.
O React Native foi lançado em 2015 pelo Facebook como um projeto de código aberto. Em apenas alguns anos, tornou-se uma das principais soluções adotadas no desenvolvimento móvel, e hoje é utilizada por aplicativos mundialmente famosos como o Discord, Tesla, Instagram, Facebook e entre outros. Discutiremos esses e outros exemplos de aplicativos baseados em React Native mais adiante neste post.
Dentre as várias razões por trás do sucesso do React Native, a primeira delas é que as empresas podem criar o código apenas uma vez e usá-lo para alimentar seus aplicativos iOS e Android - e isso se traduz em uma enorme economia de tempo e recursos.
Chamamos de desenvolvimento mobile híbrido quando um mesmo código pode ser executado em diferentes plataformas.
Em segundo lugar, o React Native foi construído com base no React – uma biblioteca JavaScript que já era muito popular quando o framework mobile foi lançado. Veremos um pouco sobre a diferença entre eles adiante, além de compreender melhor o React JS Native.
Além disso, o React Native permitiu que profissionais de Front-end, antes limitados às tecnologias web, passassem a criar aplicativos móveis prontos para produção.
Quando o Facebook decidiu oferecer seus serviços em dispositivos móveis em vez de criar aplicativos nativos, como muitas das principais empresas de tecnologia da época, eles decidiram executar em páginas da Web móveis baseadas em HTML5.
No entanto, esta solução não resistiu ao longo do tempo, deixando muito espaço para melhorias na interface do usuário e no desempenho.
Logo depois, em 2013, o desenvolvedor do Facebook, Jordan Walke, fez uma descoberta inovadora: ele encontrou um método de gerar elementos de interface do usuário para aplicativos iOS com o JavaScript; ou seja, conseguiu desenhar uma tela de app com Javascript.
Isso provocou um incêndio e um Hackathon especial foi organizado para descobrir ainda mais quanto desenvolvimento móvel poderia ser feito usando soluções JavaScript (até agora, tradicionalmente baseadas na web).
Foi assim que o React Native ganhou vida. Inicialmente desenvolvido apenas para iOS, o Facebook rapidamente o seguiu com suporte ao Android, antes de tornar o framework público em 2015. Apenas três anos depois, o React Native já era o segundo maior projeto no GitHub, medido pelo número de contribuidores.
spotify:5aLpc4irB01uwwkin2CCT6:episode
JavaScript é uma linguagem de programação dinâmica amplamente usada no desenvolvimento web, inclusive para criar aplicativos web, jogos e outros contextos. Ela permite adicionar recursos dinâmicos às páginas, tornando-as interativas, o que não seria possível apenas com HTML e CSS.
Mas o JavaScript não se limita ao mundo Web. Ele está presente em diversos cenários, como servidores e aplicativos mobile. Com ele, podemos criar uma Web API para diversas aplicações usando o ambiente de execução do Node.js, por exemplo.
O React Native utiliza JavaScript como linguagem principal. No entanto, por ser uma linguagem de tipagem dinâmica, projetos grandes podem enfrentar desafios na manutenção do código, especialmente ao lidar com muitos dados.
Para ajudar nisso, existe o TypeScript, uma linguagem baseada em JavaScript que adiciona tipagem estática e outros recursos, tornando o desenvolvimento mais seguro e organizado.
Caso você queira saber um pouco mais sobre o JavaScript, seu potencial e funcionalidades, temos esse alura+:
Para entender melhor esta questão, é preciso considerar que as linguagens de programação se dividem nas linguagens dinâmicas (Javascript) ou nas linguagens tipadas (Typescript).
Resumindo, o TypeScript é uma linguagem de programação de código aberto desenvolvida pela Microsoft, que compila para JavaScript. Desde seu lançamento em 2012, a linguagem permaneceu em desenvolvimento ativo e continua a ganhar popularidade a cada ano.
E como assim é uma linguagem tipada? Bom, um aplicativo do mundo real terá muitas validações e verificações dinâmicas. Para esses aplicativos, o código JavaScript se tornará difícil de testar em algum momento, principalmente porque não há verificação de tipo.
TypeScript é fortemente tipado e tem um compilador que reclama se você não definir o tipo de uma variável.
É importante que você entenda: tanto em sites feitos com React quanto em apps feitos com React Native ou TypeScript, essa linguagem vai ser convertida em JavaScript no final das contas. Mas, durante o processo de desenvolvimento, ela é extremamente útil e torna nossas aplicações mais robustas.
A diferença mais importante entre TypeScript e JavaScript é que eles são duas linguagens de programação separadas, embora o TypeScript seja fortemente baseado em JavaScript.
Na verdade, TypeScript é um superconjunto de JavaScript, o que significa que todo código JavaScript válido também é código TypeScript válido. O TypeScript não altera o JavaScript, mas o expande com novos e valiosos recursos.
O TypeScript introduziu uma grande quantidade de sintaxe extraída da programação orientada a objetos, sendo eles:
O TypeScript proporciona muitos benefícios para o desenvolvimento, funcionando como uma evolução do JavaScript. Contudo, para quem está começando, a curva de aprendizado pode ser maior. Por isso, é comum iniciar estudos com JavaScript e, depois, avançar para TypeScript.
Muitas empresas hoje veem o TypeScript como um diferencial no currículo da pessoa programadora. Mas nada impede o desenvolvedor ou desenvolvedora de aprender a usar o TypeScript dentro da empresa, visto que tudo o que ele já sabe sobre JavaScript será aplicado lá também.
Se ficou curioso(a) para saber mais sobre a batalha entre o TypeScript e JavaScript, dê uma olhadinha nesse artigo: Javascript ou Typescript? que temos aqui na plataforma Alura.
A arquitetura do React Native pode ser dividida em 3 seções principais:
Nessa parte, o código é executado por um mecanismo JavaScript. O React Native usa o JavaScriptCore, um motor JavaScript de código aberto utilizado no WebKit. Ele roda dentro do aplicativo em uma das threads disponíveis, já que um app móvel pode executar múltiplas threads.
No lado nativo, as pessoas desenvolvedoras desenvolvem em Objective-C ou Swift, no caso do iOS, ou com Java/Kotlin se for para Android. Usaremos as linguagens nativas específicas da plataforma que usamos antes, e a thread principal da interface do usuário estará disponível, como de costume.
Em todas as plataformas, as alterações na interface do usuário devem ocorrer na thread principal, e outras tarefas podem ser executadas em threads secundárias, conforme necessário.
Ecossistema iOS – Hipsters Ponto Tech #306
Já se deparou com algum projeto de outra pessoa e se perdeu no meio de tanta pasta e arquivos? A organização dos nossos arquivos é importante para que futuramente a gente consiga se localizar bem e debugar fácil nosso programa.
Não existe uma regra definida de como deve ser a estrutura e organização de nossos Apps com React Native. Mas, existe um padrão que é muito utilizado pela comunidade e aqui na Alura também. Então, só reforçando que aqui é uma sugestão de organização e não a única e mais correta forma de fazer.
Normalmente, uma estrutura de um App React Native é organizada da seguinte forma:
Lembre-se: esta é apenas uma sugestão. Os nomes das pastas podem variar, mas o ideal é adotar um padrão consistente e manter uma estrutura lógica para facilitar manutenções futuras."
No projeto de Firebase feito com Expo, seguimos essa estrutura abaixo:
Na imagem, você vai perceber que dentro da pasta "telas" existem outras 3 pastas, uma para cada tela. E, dentro de cada tela, tem um arquivo `index.js`, que contém a lógica e a estrutura da página, e outro arquivo `estilos.js`, que contém os estilos da página.
Algumas pastas extras podem aparecer dentro de `scr`, como é o caso de `config`. Essa pasta contém os arquivos de configuração do Firebase.
Nosso arquivo de rotas também tem um padrão, que fica assim:
Como podemos ver, o arquivo `rotas.js` contém a importação de cada tela e fica por meio de `containers` do `react-navigation` para permitir a navegação entre as telas.
Dentro de cada tela ou componente, temos uma estrutura muito padrão, conforme o código abaixo:
Os componentes ou telas são criadas e exportadas como função e, dentro dela, temos diversos elementos do React Native, como View, Text, TouchableOpacity, entre outros.
Perceba também que cada elemento React Native contém um estilo, que vem do arquivo `estilos.js`. Esse arquivo normalmente tem essa estrutura:
Assim ficam as estruturas básicas do React Native. Mantendo esse padrão ou um semelhante, será muito mais fácil de trabalhar com a aplicação no futuro, seja em grupo ou individualmente.
Com a evolução do framework (tornando-se o padrão a partir da versão 0.76), o modelo de comunicação entre o JavaScript e o código nativo foi redesenhado para eliminar gargalos de performance. A antiga "Bridge" deu lugar a uma estrutura mais eficiente baseada em quatro pilares fundamentais:
Essa modernização, consolidada em 2026, removeu a dependência de serialização de dados, aproximando a experiência de uso do React Native à de um aplicativo desenvolvido puramente de forma nativa.
O React Native possui várias características que o tornam uma escolha poderosa para a construção de aplicativos móveis. Entre elas temos:
Desenvolvimento multiplataforma refere-se à prática de criar software que roda em mais de um sistema operacional, como Android e iOS. Por exemplo, navegadores web geralmente funcionam da mesma forma em vários tipos de dispositivos ou sistemas
A ideia aqui é facilitar ao máximo a vida da pessoa programadora, uma vez que o mesmo código que ela desenvolver poderá produzir aplicações que rodem em diferentes plataformas, sem ficar se preocupando em ter que aprender a usar ferramentas muito diferentes para um mesmo propósito.
Com isso, o React Native e outros serviços com esse propósito, ganham maior audiência da comunidade, uma vez que você não precisa decidir qual o público-alvo (usuários de iOS ou Android), pois o software multiplataforma é executado em ambos, o que lhe dá acesso a uma base de usuários mais ampla.
Existem algumas diferenças de navegação e design entre iOS e Android que, no desenvolvimento multiplataforma, são tratadas por padrão, graças à base de código compartilhada.
Isso ajuda a criar uma identidade de marca de aplicativo consistente em ambas as plataformas, com menos esforço do que se fosse construído nativo.
Sendo assim, uma das maiores vantagens do desenvolvimento multiplataforma é que você pode construir apenas uma base de código para Android e iOS ao mesmo tempo.
O desenvolvimento de aplicativos nativos requer escrever o código separadamente e, frequentemente, precisa de dois desenvolvedores de software diferentes para realizar o trabalho, um para iOS e outro para Android.
O React Native permite criar aplicativos que funcionam tanto em Android quanto em iOS, e também possibilita o uso de recursos nativos de cada sistema. Assim, é possível integrar funcionalidades específicas da programação nativa em projetos desenvolvidos com React Native
React Native vs Flutter – Hipsters Ponto Tech #267
O desenvolvimento com React Native é centrado em componentes. Isso facilita a divisão do código em partes menores, favorece a reutilização e torna a manutenção e expansão do aplicativo mais simples.
O site do NPM contém diversas bibliotecas criadas por empresas e comunidades que podem ser integradas em seus projetos como um componente comum. Isso facilita e agiliza muito a criação de aplicativos.
Apesar de suas diversas vantagens, o React Native também apresenta algumas desvantagens. Vamos analisar os principais prós e contras sob duas perspectivas: negócios e desenvolvimento.
É importante que você saiba os prós e contras para tomar decisões acertadas e bem informadas em sua carreira, então vamos lá!
O Expo é uma ferramenta de código aberto desenvolvida a partir do React Native, que auxilia na criação de aplicativos móveis multiplataforma usando JavaScript e/ou TypeScript.
Expo fornece o Expo SDK, que ajuda você a usar algumas funcionalidades nativas móveis, como BarcodeScanner, MapView, ImagePicker e muito mais, para que possamos definir a Expo como um ecossistema, mais do que uma estrutura.
Basicamente, o Expo facilita a criação de um app usando o React Native, visto que ele abstrai toda uma configuração de setup no computador para programar, e poupa a pessoa desenvolvedora de precisar de um computador potente para executar suas aplicações, visto que não há necessidade de um emulador de celular, podendo executar o projeto diretamente no seu dispositivo físico.
Mas, assim como qualquer tecnologia, temos os lados positivos e negativos.
O Expo torna mais fácil e rápido desenvolver aplicativos ao lidar com todas as alterações de configuração, conflitos de versão e certificados. O Expo GO é um aplicativo que você pode baixar nas lojas do Google ou da Apple, que permite visualizar seu aplicativo em tempo real enquanto o desenvolve.
Além disso, uma grande vantagem do Expo é permitir o desenvolvimento de aplicativos para iOS sem a necessidade de um Mac ou do Xcode, facilitando a vida de quem não possui esses equipamentos.
Ele tem recursos excelentes que você pode usar para otimizar seu tempo e custo de desenvolvimento. Logo, fica fácil entender por que o Expo ganhou muita popularidade entre os desenvolvedores e desenvolvedoras React Native nos últimos anos.
Por outro lado, o Expo tem algumas desvantagens sérias que limitam seu crescimento. Uma dessas limitações é lidar com código nativo como desenvolvedor(a), ao contrário do React Native CLI.
Ao desenvolver um aplicativo com Expo, não é possível modificar o código nativo diretamente. Isso pode ser uma limitação para quem deseja criar ou integrar módulos nativos personalizados ao aplicativo
Usar o Expo, dependendo do projeto, pode limitar o desenvolvimento. Por exemplo, se seu App precisa usar o bluetooth, então o Expo não conseguirá te ajudar nisso, visto que ele ainda não tem este suporte.
Apesar dos ótimos recursos que oferece a seus usuários, o Expo tem algumas limitações sérias que você precisa considerar ao desenvolver seu próximo aplicativo.
O React Native CLI é indicado para quem precisa integrar códigos nativos (em Java/Kotlin para Android ou Swift/Objective-C para iOS) diretamente no projeto, ou desenvolver módulos personalizados.
Nos últimos anos, o React Native teve muitas melhorias em sua infraestrutura, deixando o seu App o mais parecido com o Nativo possível. Com o React Native é possível integrar muitas funcionalidades móveis nativas, como a câmera, o gerenciador de arquivos, o Bluetooth e muito mais, graças ao excelente trabalho e apoio da enorme comunidade por trás do React Native.
Porém, o React Native CLI apresenta algumas limitações cruciais que devem ser consideradas. Uma dessas limitações é que, ao contrário do Expo, você precisa ter o equipamento certo para compilar seu aplicativo em .apk ou .ipa, para enviar seu App para produção nas duas principais plataformas móveis (iOS e Android).
É preciso ter um Mac e Xcode, no caso da Apple Store, e também um estúdio Android para a Play Store. Além disso, quando você estiver pronto para enviar seu App para produção, precisará lidar com todas as configurações, assinaturas, certificados e muitas outras coisas.
O React e React native são duas ferramentas JavaScript utilizadas para desenvolver interfaces de usuário, sendo o React utilizado para construir aplicações Web e o React Native para criação de aplicativos móveis.
A principal diferença entre React e React Native está no ambiente de execução. O React é voltado para aplicações web, rodando em navegadores, enquanto o React Native é utilizado para desenvolver aplicativos móveis executados em dispositivos e simuladores de iOS e Android.
Outra diferença está na renderização da interface: o React utiliza um DOM virtual para otimizar o desempenho de aplicações web, enquanto o React Native utiliza APIs nativas para renderizar componentes, oferecendo uma experiência mais próxima à de aplicativos desenvolvidos nativamente.
Com isso, podemos ver que ambas são ferramentas poderosas e a escolha entre elas vai depender das exigências do seu projeto. Se for uma aplicação Web, o React é mais indicado para esse caso, e se for um aplicativo móvel, o React Native é a escolha ideal.
Para começar a usar React Native, é necessário realizar algumas instalações e configurações na sua máquina. A ferramenta base é o Node.js, que traz consigo o gerenciador de pacotes NPM, indispensável para instalar e gerenciar as bibliotecas do projeto
Se você gostaria de começar com o Expo, visto que é mais tranquilo do que o React Native CLI para começar um projeto, veja Como instalar e configurar o Expo do React Native, contém links de alguns Alura+ para configurar os principais ambientes (Windows, Linux e MacOS).
React Native: Como instalar o Expo no Windows | #AluraMais
Agora, se você deseja utilizar o máximo que o React Native tem a oferecer, aprenda no nosso artigo como configurar o ambiente React Native, que contém todo o processo de instalação e configuração do ambiente.
Agora que temos nosso setup configurado na nossa máquina, vamos criar um App com Expo?
Vamos abrir o terminal, navegar até uma pasta desejada e digitar:
npx create-expo-app PrimeiroProjeto Depois, vamos navegar para o projeto criado `/PrimeiroProjeto` e podemos abrir ele em algum editor de texto de sua preferência - eu costumo usar o VSCode.
No terminal, dentro da pasta do projeto, digite:
expo start Seu projeto será executado e será listado no terminal mesmo alguns comandos para rodar o aplicativo no emulador Android, simulador iOS ou ler um QR Code no celular físico para ele ser executado também.
Você notará que dentro da pasta já tem alguns arquivos criados. Essa é uma estrutura básica do React Native com Expo. Se divirta alterando algumas informações como texto e imagem e veja o que acontece!
Com o ambiente todo configurado para rodar o React Native CLI, execute os seguintes comandos no terminal para criar seu primeiro projeto React Native:
Para criar um projeto:
npx react-native init PrimeiroProjeto Para navegar até o projeto:
cd PrimeiroProjeto Para executar o projeto:
npx react-native start Você também vai notar que algumas pastas e arquivos foram criados por padrão. Essa é uma estrutura base do React Native CLI. A grande diferença em relação ao Expo, são as pastas "ios" e "android" que aparecem. Com elas, é possível adicionar e modificar bibliotecas nativas no seu App.
Para executar a aplicação em um emulador Android:
npx react-native run-android E, para iOS, digite:
npx react-native run-ios Se quiser saber como posicionar elementos na tela e mexer com algumas unidades de medidas, confira os nossos artigos:
Finalizou seu App e quer saber como gerar um executável (apk ou ipa) para futuramente poder ser publicado nas lojas? Veja nosso artigo do React Native: Gerando o APK e o IPA, aqui ensina exatamente isso!
Nota: se você estiver usando Expo, a forma recomendada é utilizar o EAS Build (Expo Application Services), que compila seu app na nuvem sem necessidade de instalar Android Studio ou Xcode localmente. Para React Native CLI, os processos nativos permanecem os mesmos
Aprenda mais sobre React Native
Acesse gratuitamente as primeiras aulas da Formação React Native, feita pela Escola de Mobile da Alura e continue aprendendo sobre temas como:
A documentação do React Native é um recurso oficial, fornecido como fonte de referência essencial para quem trabalha com essa estrutura de desenvolvimento de aplicativos móveis.
Na documentação, você encontra informações detalhadas sobre as funcionalidades básicas e como utilizá-las. Ela ensina como preparar e configurar o ambiente em seu dispositivo para iniciar o desenvolvimento utilizando o React Native.
Além disso, explica mais sobre o uso do React Native em dispositivos físicos e simuladores.
A documentação também aborda como utilizar a funcionalidade de debugger em suas aplicações, como utilizar componentes, como fazer o roteamento da aplicação, estilização, aumentar a performance e muito mais.
Além disso, você também vai encontrar tutoriais, guias e exemplos de códigos que podem ser de grande ajuda no seu dia a dia.
A documentação oficial está sempre atualizada com as últimas novidades, incluindo o que é novo, o que já está ultrapassado e o que não funciona mais no React Native. Caso tenha interesse, deixo aqui o link para a documentação.
O mercado constantemente está mudando, e percebemos o aumento na procura por desenvolvedores e desenvolvedoras mobile. Se você quer ser um (a) dev mobile React Native ou quer se preparar mais para o mercado, essas são algumas das habilidades que as pessoas recrutadoras ficam de olho:
Aqui, na Alura, fizemos um levantamento de ferramentas interessantes que você pode aprender para se preparar melhor para o mercado. Dê uma conferida em como está o mercado para desenvolvedores e desenvolvedoras júnior com React Native.
Se você está interessado em aprender React Native em 2023, aqui estão algumas dicas de por onde você pode começar:
Essas são apenas as primeiras etapas. É importante também desenvolver projetos próprios, participar de desafios e se manter atualizado, já que o React Native evolui constantemente.
Pelas vantagens oferecidas, o React Native é uma das tecnologias favoritas pelas empresas para entregar uma experiência uniforme e de valor para os usuários em dispositivos móveis multiplataforma. A página oficial do RN lista grandes empresas:
No Brasil, há mais de 200 empresas utilizando a tecnologia, segundo um repositório no github que lista projetos desenvolvidos na ferramenta. Também, uma rápida busca no LinkedIn revela um significativo número de vagas oferecidas.
Logo, dado que o React Native é utilizado por grandes empresas internacionais e um relevante número de empresas nacionais, o mercado é favorável e existe demanda para crescer e se desenvolver na carreira de dev React Native - sem deixar outras tecnologias de lado, é claro; ser um profissional em T é importante.
Neste artigo, mergulhamos no React Native e você pôde conhecer as principais informações sobre a ferramenta!
Se você gostou desse artigo, compartilhe nas redes sociais o que você aprendeu com ele com a hashtag #AprendinoBlogdaAlura. Para conhecer mais sobre desenvolvimento mobile, veja nossa websérie sobre Mobile para conhecer mais sobre a área.
Desmistificando Mobile - Por onde eu começo? #01
Se quiser conhecer mais sobre React Native, pode acessar a Formação React Native da Alura (linkado ao fim do artigo), em que você poderá entender os fundamentos e primeiros passos do framework, desenvolver um portfólio de projetos e, é claro, técnicas e habilidades importantes com a tecnologia.
Como fazer um bom portfólio em tecnologia com Diogo Pires | #HipstersPontoTube
E, é claro, navegue e explore a documentação do React Native!
Bons estudos!
Avalie este artigo
Flutter: Tratamento de exceções com Firebase Crashlytics
Ler mais
O que é Firebase? Para que serve, principais característica e um Guia dessa ferramenta Google
Ler mais
Intent: passando objetos com campos não serializáveis
Ler mais