• Blog
    • Tecnologia
    • Carreira e Cultura
  • Materiais Gratuitos
  • Podcast
  • Nossas vagas
  • Site Movile
Menu
  • Blog
    • Tecnologia
    • Carreira e Cultura
  • Materiais Gratuitos
  • Podcast
  • Nossas vagas
  • Site Movile
  • Backend, Movile, Technology, Tecnologia

React Native Series: O que é React Native? Como usar e instalar?

Compartilhe

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

O que é React Native?

O React Native é um framework em JavaScript voltado para desenvolvimento Mobile e sendo ele baseado em React.

Desenvolvido pela equipe do Facebook, a grande pegada do React Native é  que ele possibilita o Desenvolvimento Mobile Multiplataforma para Android e iOS, utilizando apenas JavaScript.

Existem outros parecidos no mercado, porém o diferencial dele, é que mesmo sendo Multiplataforma, ele compila em código nativo (Swift, Java) e não em uma Webview.

Como usar e instalar?

A seguir, vou ensinar como funciona  a instalação React Native no macOS :

  1. Instalar o node e Watchman

Para instalar o node e watchman, iremos usar o Homebrew.

brew install node
brew install watchman

view raw
06
hosted with ❤ by GitHub

2 . Instalar o React Native CLI

Iremos instalar ele via npm.

npm install -g react-native-cli

view raw
02
hosted with ❤ by GitHub

3 . Instalar o Xcode e a Ferramentas de linha de comando

Na App Store do seu macOS, procure o Xcode e instale ele.

Depois de instalado o Xcode, abra ele, aceite as licenças que ele solicita, depois disso, com ele ainda aberto, na barra superior do Xcode, vá em Preferências, com a janela aberta, vá na opção Localizações, nela, vá na opção Ferramentas de linha de comando, ao clicar nela, selecione a opção do seu Xcode (Ex: Xcode 10.2.1).

4 . Instalar o Android Studio e JDK

Para utilizar o Android é necessário instalar algumas coisa, porém você instalando o Android Studio, grande parte dele já vem com ele, já o JDK, seria para ter o Java no seu macOS.

Para baixar o Android Studio é necessário baixar ele nesse link:

https://developer.android.com/studio/index.html

Para baixar o JDK é necessário baixar ele nesse link:

https://www.oracle.com/technetwork/pt/java/javase/downloads/jdk8-downloads-2133151.html

5 . Configurando a variável de ambiente do ANDROID_HOME

É necessário configurar essa variável, para que no momento que for executar o android no seu macOS ele saiba onde está seu SDK, por exemplo.

No seu terminal, execute o seguinte comando:

nano ~/.bash_profile

view raw
02
hosted with ❤ by GitHub

No arquivo aberto, iremos adicionar as seguintes linhas:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

view raw
gistfile1.txt
hosted with ❤ by GitHub

Salve e feche o arquivo, depois disso é necessário um “reload” no bash_profile, executando esse comando:

source ~/.bash_profile

view raw
04
hosted with ❤ by GitHub

6 . Criando um projeto React Native

Depois de realizar as configurações acima, teoricamente, já é possível criar um projeto em React Native sem dor de cabeça.

Abra o seu terminal em uma pasta de sua preferência e execute os seguintes códigos em seu terminal:

react-native init MyNewProject
cd MyNewProject
react-native run-ios

view raw
05
hosted with ❤ by GitHub

Para iOS, execute:

react-native run-ios

view raw
08
hosted with ❤ by GitHub

Para Android, faça os seguintes passos:

  • Abra o seu Android Studio
  • Crie qualquer projeto
  • Depois do projeto criado, man barra superior, procure pela opção AVD Manager e clique nela
  • Aberta a janela de AVD’s, click Play do emulador já criado default. Caso não tenha nenhum emulador, crie um em Criar novo Device.
  • Com o emulador do device aberto, no  raiz do seu projeto, pelo terminal, execute: 
react-native run-android

view raw
09
hosted with ❤ by GitHub

Esse processo pode levar um tempo, apenas aguarde.

Se tudo saiu certo, conforme o esperado, no caso do iOS, será aberto o simulador do iOS  e nele depois de um tempo será aberto o seu App em React Native, no caso do Android, com o emulador já aberto do Android, será aberto o seu App em React Native.

O React Native pega apenas no macOS?

Não, não, também pega em Windows e Linux, porém para executar o simulador do iOS real, apenas no macOS.

Existe um modo de usar o simulador do iOS no Windows e Linux, usando Expo, mas no caso, para usar Expo, esse tutorial não atende a ele, pois seria de outro modo bem diferente.

Os próximos passos …

O React Native Series será uma série onde irei ensinar um passo a passo de como fazer uma aplicação simples em React Native.

Qual seria essa aplicação? Isso vocês vão saber nos próximos capítulos dessa série, então não deixem de acompanhar, toda semana sairá uma parte.

Valeu! Até mais o/

Compartilhe isso:

  • Tweet

Curtir isso:

Curtir Carregando...
Samuel Matias

Samuel Matias

Deixe um comentário

Categorias

Categorias
  • Android
  • Backend
  • Banco de Dados
  • BI
  • Carreira
  • Carreira e Cultura
  • Carreira e Cultura
  • Ciência de Dados
  • Cultura
  • Data Specialist
  • Design
  • Diversidade
  • Front-end
  • Frontend
  • Fundação 1Bi
  • Grupo Movile
  • Histórias
  • iFood
  • Infraestrutura
  • Inteligência Artificial
  • iOS
  • iOS App Development
  • Kotlin
  • kubernetes
  • LeaderShift
  • Material
  • Mobile
  • Mobile Dream
  • Movile
  • Movilian@s
  • News
  • PlayKids
  • Podcast
  • Produto
  • Projetos
  • React
  • RESPECT
  • Software Architecture
  • Software Engineering
  • Solid
  • Swift
  • SwiftUI
  • Sympla
  • Technology
  • Tecnologia
  • testes
  • UX
  • Vagas
  • Wavy
  • Zoop

Posts relacionados

Whitepaper: API’s no iFood

Leia mais »
Swift

Swift: Princípio da Segregação de Interface [Artigo 4]

Leia mais »
Um primer em CRM para times de Data

Um primer em CRM para times de Data

Leia mais »

Dart Extension Methods na prática

Leia mais »
Tags
Agile Android Apache api App Apps Arquitetura Autoconhecimento Backend Banco de Dados BI Blog bot Bots Cache Carreira Carreira e Cultura Cloud code containers Continuos integration Cultura Dados Dados Probabilísticos data Data Center Data Science Desenvolvimento Design devs digital diversidade DSL Entrevista Evento eventos Experiências Facebook front Front-end Frontend Full-stack Fundação 1Bi Gestão GO google Groovy grupo Grupo Movile histórias home iFood Infraestrutura Inteligencia artificial iOS Java jetpack Json Kotlin kubernetes layout Liderança linguagem loadview Machine Learning marketplace Mobile Movile Movilianos news Objective-C PlayKids podcast produto Projetos pwa python Rapiddo react Reativas Redis research review RH Room spark Spring stack storyboards Superplayer Swift Sympla Talentos tdd Tecnologia Testes transformação digital Unity ux vagas Valores view viewcode viewcontroller viper Voxel vue wavy web Widget Zoop

Siga-nos

Facebook-f
Linkedin
Instagram
Youtube
Twitter

Baixe nosso e-book!

Receba conteúdos exclusivos em seu email!

Seus dados estão protegidos conosco.

Menu

  • Tecnologia
  • Carreira e Cultura
  • Materiais Gratuitos
  • Podcast
Menu
  • Tecnologia
  • Carreira e Cultura
  • Materiais Gratuitos
  • Podcast

principais categorias

  • Tecnologia
  • Carreira e Cultura
  • News
  • Movile
  • Backend
  • Android
Menu
  • Tecnologia
  • Carreira e Cultura
  • News
  • Movile
  • Backend
  • Android

FEED RSS

RSS Feed RSS - Posts

RSS Feed RSS - Comentários

redes sociais

  • Facebook
  • LinkedIn
  • Instagram
  • Youtube
  • Twitter

Copyright 2021 © Todos os direitos reservados. Criação de Site por UpSites & Weblab

  • Novas Vagas!

  • Último Podcast!

%d blogueiros gostam disto: