Seja muito bem-vindo a mais um blog redigido por um programador sem gramática e concordância alguma! Sim, sou eu novamente, Ygor Magri, programador à mais de 10 anos e entusiasta em I.A e Ferramentas tecnológicas em geral.
Hoje eu vou abordar para vocês o meu primeiro contato com a linguagem do momento, a queridinha dos Devs mobile, sim, estamos falando de React Native.
A Ygor, então este seria um tutorial de react native? Em partes, quero abordar não só os passos para iniciar na linguagem, mas o conhecimento introdutório que todo desenvolvedor deve ter antes de decidir ingressar nessa linguagem tão moderna.
Afinal, o que é React Native?
O React Native é um framework baseado em React, desenvolvido pela equipe do Facebook, que possibilita o desenvolvimento de aplicações mobile, tanto para Android, como para iOS, utilizando apenas Javascript.
Nosso amigo Mark Zuckerberg não para meus amigos, mais uma tecnologia desenvolvida por sua equipe e que veio sim para liderar um mercado!
Minha primeira opinião sobre o Framework era que tínhamos aí mais um framework que empacotava javascript para multi-plataformas, assim como o Cordova ou o Phonegap.
Minha ignorância passou rápido após ler a biblioteca completa do React Native, notei algumas principais vantagens que gostaria de listar abaixo:
- Todo código é convertido simultaneamente para linguagem nativa do sistema operacional
- Uso de Display: flex
- Agilidade para codificar layouts UX/UI
- Backend em Node.js
- Performance incomparável
- Integrações diversas com os Smartphones
Vamos de tutorial sobre React Native então?
Primeiro e não menos importante, precisamos preparar seu ambiente de trabalho, eu particularmente utilizo MacOS e inclusive recomendo que para melhor performance em desenvolvimento de apps mobile vocês façam uso de um Mac.
Existem tutoriais bem detalhados com todas as etapas de preparação de um ambiente de desenvolvimento React Native, o pessoal da Rock Stage uma escola muito boa que recomendo inclusive desenvolveu o passo a passo para Windows e MacOS.
Ambiente configurado? Let’s Show time my friend!
Eu sempre que estou aprendendo uma linguagem de programação procuro utilizar uma técnica que nomeio como “Três pilares do aprendizado”. Esta técnica consiste em aprendermos de forma rápida e pratica uma determinada técnica, ou linguagem. Utilizo para isso três tipos de fontes de conteúdo, video, matérias e forums de discussões.
Segue recomendações para aprender de forma ágil sobre React Native:
Se você utilizar essa dica acima, com toda certeza em um curto espaço de tempo você vai dominar não só esta linguagem e sim qualquer assunto que lhe for proposto.
Bora CODAR, neste caso os códigos abaixo se aplicam para desenvolvedores que utilizam MacOS, caso tenham duvidas e precisem de ajuda no Windows me chamem via Instagram ou aqui nos comentários que terei o prazer em ajuda-los.
Criando o primeiro projeto em React Native
Abra o terminal do mac, acesse a pasta que deseja organizar seus projetos utilizando o comando de navegação entre pastas “cd/nomedapasta” e rode o comando abaixo:
react-native init PrimeiroApp
O Comando acima ira criar todos os pacotes necessários para a criação de seu projeto inicial, incluindo toda a estrutura de pastas e arquivos de manifesto.
Entenda os arquivos criados e diretórios
- Pasta nodemodules: armazena todo o Framework React Native
- index.ios.js estrutura da aplicação para IOS;
- tests: armazena os arquivos necessários para realizar testes;
- Pasta IOS: armazena arquivos necessários para criar responsividade com o IOS;
- Pasta Android armazena arquivos necessários para criar responsividade com o Android;
- App.js: arquivo principal, responsável pelas chamadas principais;
- Pasta: nodemodules: armazena todos os plugins instalados e para rodar sua aplicação;
- Pasta src: aqui é onde toda codificação acontece, subpastas assets, pages e services são responsáveis por armazenar anexos e rodar os códigos principais;
- Arquivo package.json: Manifesto de seu app, responsavel por mapear todas os includes e versionamento da aplicação.
Codando seu primeiro “Hello World” com React Native
import React from ‘react’;
import { Text, View } from ‘react-native’;
function HelloWorldApp() {
return (
<View
style={{
flex: 1,
justifyContent: “center”,
alignItems: “center”
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default HelloWorldApp;
O comando acima é bem simples, primeiro, precisamos importar o React para poder usar JSX, que será transformado nos componentes nativos de cada plataforma. Na linha 2, importamos os componentes Text & View.
Em seguida, criamos a função App, que é um componente funcional e tem a mesma estrutura do React. Esta função retorna uma View, dentro desta View estilizamos com flexbox, texto alinhado ao centro e bloco ao centro também.
OBS: A tag css flex é muito utilizada em React Native, ela é basicamente utilizada para definir o espaço utilizado por um bloco ou texto, quando utilizamos “flex: 1” estamos dizendo ao react para utilizar o espaçamento completo do componente pai, como neste caso só temos um componente, o bloco vai preencher a tela toda.
Feito isso, vamos rodar nosso código e ver se nossa “Hello World” vai aparecer?
Caso esteja utilizando MacOs, rode seu HelloWorld utilizando um simulador do Xcode rodando:
react-native run-ios –simulator “iPhone X”DDDDDDD
Caso prefira visualizar seu HelloWorld em um navegador rode:
react-native run web
Ou caso esteja prefira visualizar em Android rode:
react-native run-android
O resultado deve ser este:
Agora é com você!
Daqui em diante recomendo que utilize a regra dos “Três pilares do aprendizado” para dar sequência em seu aprendizado, busque por cursos com materiais revelastes e ponha em prática tudo que você estiver absorvendo de conteúdos. Acredito que a expertise com uma linguagem de programação vem com a pratica, então pratique pratique pratique, não tenha medo de errar pois um bom programador conhece os “bugs” comuns da linguagem que domina pois ja errou muito e consequentemente ja teve de corrigir muitos problemas.
Por se tratar de uma linguagem nova e em “Alta”, existem poucos formadores de opinião sobre, então analise os conteúdos antes de toma-los como regra, consulte sempre as bibliotecas oficiais e procure rodar aplicações completas com integrações nativas, uso de Api’s.
Gostou desse material? Deixe seu comentário abaixo e compartilhe esta matéria com seus conhecidos.
Para finalizar vale um JABÁZINHO né? A Raised conta com uma frente de desenvolvimento especializado, caso você precise de ajuda no desenvolvimento de Apps nativos conte com a nossa equipe.
Obrigado por ler está matéria até o final!
Ygor Magri,
Raised.
