Introdução ao React Native em 2019: crie seu primeiro aplicativo

Aprenda a criar seu primeiro aplicativo React Native com conceitos básicos importantes e para onde ir a partir daqui!

Aman Mittal Segue 4 de janeiro · 15 min ler Crédito: https://unsplash.com/@nateggrant

Vivemos no mundo de uma variedade de dispositivos móveis dominados principalmente por duas plataformas, iOS e Android. É uma corrida de dois cavalos e estou certo de que todos podemos concordar com isso. Construir uma aplicação móvel não é uma tarefa fácil.

Para iOS, você escreve código usando o Objective-C ou o Swift e, para o Android, você se verá utilizando o Java. Além das diferentes linguagens de programação usadas para criar um dispositivo móvel que pode ser executado em cada uma das duas plataformas, as caixas de ferramentas são totalmente diferentes também para essas duas plataformas móveis.

Muitos desenvolvedores modernos usam um conjunto específico de tecnologia usado para criar aplicativos da Web: HTML, CSS e JavaScript. Existem diferentes estruturas que se enquadram na categoria comumente conhecida como aplicativos híbridos. Você pode usar quase um conjunto de códigos-fonte para desenvolver o aplicativo para as plataformas iOS e Android.

Nos últimos anos, as estruturas híbridas evoluíram a partir da visualização da Web para usar APIs nativas. Esta abordagem multi-plataforma de desenvolvimento de uma aplicação móvel vem com suas próprias vantagens e desvantagens. Prós, como consumir menos tempo e custo-benefício, incluem problemas de desempenho.

Uma ótima opção que cai sob a égide do desenvolvimento de plataformas cruzadas é o React Native. Desenvolvido e usado pelo Facebook, bem como outros, como Tesla, Walmart, Uber Eats, Instagram, Discórdia, Wix e assim por diante. O React Native é baseado na biblioteca da web do Facebook ReactJS.

O que você vai aprender?

Neste tutorial, você aprenderá as seguintes coisas:

  • O que é Reagir Nativo?
  • Configurando o ambiente de desenvolvimento
  • Use o React Native CLI
  • Executar um aplicativo nativo de Reação
  • O que é o App.js?
  • Recarregamento a Quente
  • AppRegistry
  • Crie seu primeiro aplicativo nativo React
  • Aprenda sobre diferentes componentes da interface do usuário
  • View componente
  • Objeto StyleSheet
  • Componente de Text
  • Crie uma lista com FlatList
  • Caminho de Aprendizagem para Reagir Nativa

O que é Reagir Nativo?

Resumindo, o React Native permite que você crie aplicativos móveis que parecem, sentem e funcionam muito mais como aplicativos nativos. Ele usa os mesmos blocos de construção fundamentais da interface do usuário dos aplicativos iOS e Android comuns. Você apenas coloca esses blocos de construção juntos usando JavaScript e React. Boa coisa para os desenvolvedores é que eles podem usar quase os mesmos conceitos que estão sendo usados para construir aplicativos da web.

Se você estiver familiarizado com o Reactjs ou vir de um plano de fundo de desenvolvimento front-end, o React usa um DOM virtual que funciona como uma sombra para o DOM real disponível. Quando um elemento é alterado, essa alteração é refletida no DOM real por DOM Virtual usando um nó que corresponde a cada elemento.

No entanto, no React Native, não há DOM, em vez de Native Components, que são fornecidos por plataformas como iOS e Android. Não há visualizações da Web aqui. Reagir Nativo tem uma instância de JavaScriptCore para executar o código JS quando um aplicativo é iniciado. Reagir O Native usa o RCTBridgeModule para estabelecer uma conexão entre o código nativo e o código JavaScript.

Em palavras simples, o React Native traz o React para o desenvolvimento de aplicativos móveis. Seu objetivo não é escrever o código uma vez e executá-lo em qualquer plataforma. O principal objetivo aqui é aprender uma vez e escrever em qualquer lugar. Uma distinção importante a fazer. Reagir Nativo ainda é relativamente novo, como no momento de escrever este post, é na sua versão 0.57 .

Pré-requisitos: Configurando o ambiente de desenvolvimento

Para mergulhar profundamente no ecossistema do React Native, precisamos instalar algumas coisas primeiro para começar. Vamos passar por um deles.

Nodejs e Watchman

Reagir O Native usa o Node.js, um tempo de execução do JavaScript, para criar seu código JavaScript. Se você ainda não tem o Node.js instalado, é hora de obtê-lo do seu site oficial aqui Eu recomendo instalar LTS ( suporte de longo prazo ) versão 10.xx que também estou usando pessoalmente.

Watchman é uma ferramenta desenvolvida pelo Facebook para assistir a mudanças de arquivos. É altamente recomendável que você o instale para um melhor desempenho. Para usuários de Mac, você precisará do pacote macOS do homebrew para instalar o watchman : brew install watchman .

Para usuários do Windows, não há watchman então você pode pular este passo, mas você precisa ter o Nodejs e o python2 como a versão recente do React Native requer.

Por fim, todos (independentemente do SO que você esteja usando) precisam instalar o Java SE Development Kit (JDK) que pode ser encontrado aqui . Certifique-se de que a versão instalada seja pelo menos ou maior que >= 8 .

SDKs nativos

Para desenvolvedores do macOS, você pode instalar o Xcode, que é livre para desenvolver aplicativos para iOS.

Se você deseja desenvolver para Android, configurar seu ambiente de desenvolvimento pode ser um pouco entediante se você for novo nisso. Você estará instalando o Android Studio, que é uma ferramenta totalmente gratuita para desenvolver aplicativos Android em seu idioma nativo. Você instalará uma lista de utilitários para esse processo e, em seguida, configurará as variáveis de caminho pela primeira vez, por isso estou recomendando que você passe pelo link exato aqui que são instruções oficiais de configuração fornecidas pelo Facebook.

Reagir CLI nativo

Quando terminar o processo de configuração do ambiente de desenvolvimento e as ferramentas necessárias, você poderá respirar fundo agora mesmo. Vamos começar a construir nosso primeiro APP NATIVO REAGIDO. Para começar, precisamos de mais uma ferramenta. Usando o npm (um gerenciador de pacotes, que você instalou usando o Node.js ), você irá instalar o react-native-cli . Abra seu terminal e execute o seguinte comando.

Esta ferramenta CLI é usada para criar um projeto inicial contendo tudo o que você precisa para criar e executar um aplicativo React Native. npm instala esta ferramenta CLI como um módulo global .

Para verificar se o processo de instalação foi bem-sucedido, você pode executar o comando abaixo e obterá a versão atual da ferramenta CLI.

Executando um aplicativo nativo de Reagir

Para começar, precisamos criar um diretório de projeto usando a ferramenta CLI recém-instalada. Abra o seu terminal e execute o seguinte.

Você pode nomear o que quiser. Quando o processo estiver concluído, atravesse dentro do diretório do projeto. Você será recebido por um conjunto de arquivos como abaixo.

De cima, vamos agora dar uma breve olhada nos arquivos ou diretórios que são essenciais para entendermos:

  • App.js o primeiro arquivo em qualquer aplicativo React Native que seja o ponto de entrada do processo de desenvolvimento do aplicativo. O que quer que você escreva dentro deste arquivo, ele será exibido no dispositivo móvel.
  • node_modules / é uma pasta que contém todas as dependências ( ou pacotes ) que são usadas para desenvolver e executar este aplicativo.
  • index.js é o ponto de entrada para acionar o aplicativo em um dispositivo ou simulador
  • ios é a pasta que contém um projeto Xcode e o código necessário para inicializar este aplicativo para dispositivos iOS
  • android é a pasta que contém o código relacionado android para iniciar este aplicativo para dispositivos Android
  • package.json onde cada dependência instalada é listada

Você pode ignorar os outros arquivos a partir de agora.

Executando o aplicativo

A ferramenta react-native-cli vem com alguns trechos de código padrão. Para vê-lo em ação, você terá que executar o aplicativo usando um terminal. Eu vou usar um simulador de iOS e um emulador de Android para essa finalidade. Os desenvolvedores do Windows podem ignorar a parte do iOS.

Observe que não fizemos nenhuma alteração no código-fonte do aplicativo. Para executar o aplicativo, precisamos acionar o comando abaixo primeiro.

Isso iniciará o bundler metropolitano para observar as alterações de arquivo em um arquivo .js em seu projeto. Certifique-se de que este comando esteja sendo executado em uma janela de terminal separada ou em uma guia quando você estiver construindo seu projeto para iOS ou Android .

Correndo no iOS

Para executar o aplicativo com qualquer conteúdo atual em um simulador do iOS, você pode executar o seguinte comando abaixo na segunda janela do terminal.

Este comando constrói seu aplicativo e o inicia no simulador do iOS. Esse processo consome uma boa quantidade de tempo ao criar os arquivos iOS necessários pela primeira vez para qualquer aplicativo React Native. Ele também irá abrir um dispositivo de simulação para você como abaixo quando o processo é feito.

Este simulador do iOS é o padrão com a versão atual do Xcode que você possui. No entanto, você pode executar qualquer dispositivo sim adicionando um sinalizador. Ao executar o comando: xcrun simctl list devices você pode conferir quais dispositivos você tem disponíveis como simuladores.

A última Booted ou Shutdown contra cada dispositivo listado na imagem acima informa quais dispositivos estão sendo executados no momento. Para construir e executar para outro dispositivo, você pode executar o seguinte comando.

onde "iPhone 8 Plus" é o valor que você pode procurar no último comando que mencionei.

Correndo no Android

Você precisará de um dispositivo Android para executar seu aplicativo React Native Android. Pode ser um dispositivo Android físico ou, mais comumente, você pode usar um dispositivo virtual Android, que permite emular um dispositivo Android em seu computador.

Se você deseja executá-lo em um dispositivo real, siga o conjunto completo de instruções aqui . Para executar em um emulador do Android, abra o Android Studio e escolha a opção "abrir um projeto / pasta existente". Quando o projeto for aberto e indexado, você verá um ícone exatamente como a imagem abaixo no canto direito.

Esta é uma opção para ativar um dispositivo virtual Android ( AVD ). Se você acabou de instalar o Android Studio, provavelmente precisará criar um novo AVD. Depois que o dispositivo virtual estiver em execução, você poderá executar o comando react-native run-android partir da sua janela de terminal para abrir o aplicativo.

Como modificar o App.js?

Para ver o aplicativo em ação nos dois dispositivos, vamos modificar o App.js com o código abaixo.

O resultado da seguinte modificação pode ser visto se você pressionar Cmd + R no iOS e duplo R no Android.

Ativar Recarregamento a Quente

Hot Recarregando recurso no reagir aplicativo nativo ajuda a exibir quaisquer atualizações ocorrem na interface do usuário, sempre que você salvar qualquer coisa em reagir código do aplicativo nativo. Ao ativar esse recurso, você não precisa pressionar Cmd + R no iOS e R duplo no Android novamente para ver as alterações na interface de usuário que acabou de criar.

Para ativar esse recurso, tudo o que você precisa fazer é pressionar Ctrl + M/Cmd + M dependendo do seu sistema operacional, e selecionar Ativar Recarregamento a Quente no menu pop-up exibido conforme mostrado acima.

O que é o AppRegistry?

O arquivo que renderiza esse componente App é index.js no diretório raiz que possui o código a seguir.

AppRegistry é o ponto de entrada para executar um aplicativo React Native. O componente de aplicativo ou qualquer outro componente raiz no aplicativo deve se registrar usando AppRegistry.registerComponent modo que o sistema nativo possa carregar o pacote do aplicativo e executar o aplicativo iniciando AppRegistry.runApplication .

Você pode ler mais sobre o AppRegistry em detalhes aqui .

Etapas do bebê: Primeiro Reagir App Nativo

Nesta seção, você construirá seu primeiro aplicativo React Native. Para começar, já geramos um projeto React Native usando a ferramenta cli. A única coisa que você tem que entender agora é o que são componentes?

Componentes são os elementos visuais que você vê na tela em um aplicativo React Native. Existem vários componentes disponibilizados para você usar pelo núcleo React Native. Para entender isso melhor, podemos categorizar esses componentes em seis categorias amplas:

  • Componentes básicos ou principais, como View , Text , Image , ScrollView , TextInput , StyleSheet
  • Listar componentes como FlatList e SectionList
  • Componentes de Interface do Usuário ou Controle de Formulários, como Picker , Controle Slider , Button , Switch
  • Componentes específicos do iOS, como ActionSheetIOS , SegmentedControlIOS , AlertIOS , PushNotificationsIOS
  • Componentes específicos do Android, como DatePickerAndroid , TimePickerAndroid , ViewPagerAndroid , ToastAndroid , PermissionsAndroid
  • Outros / Diversos componentes, como Alert , Animated , CameraRoll , Dimensions , Clipboard , StatusBar , Linking , Keyboard , ActivityIndicator , WebView e Modal

Obter detalhes sobre cada um deles está fora do escopo deste artigo e será uma maneira tediosa de aprender as coisas inicialmente. Em vez disso, vamos usar uma abordagem baseada em projeto para aprender o seu caminho através deles. Existem muitos outros componentes e APIs disponíveis no núcleo React Native que você pode consultar na documentação oficial e, de tempos em tempos, precisará.

O que estamos construindo?

Você vai criar um pequeno aplicativo para se familiarizar apenas com os componentes básicos. O aplicativo é mostrado na imagem abaixo vai ser o resultado final.

O acima não é nada, mas uma lista de texto vinda diretamente do estado do componente. Crie um novo diretório src/components na raiz do projeto e dentro de components/ crie um novo arquivo chamado EmojiDict.js com o seguinte trecho de código.

Assim, temos que modificar o arquivo App.js para exibir o resultado desse componente.

Agora, se você der uma olhada na tela do simulador, verá o seguinte resultado.

O que está acontecendo? Dê uma olhada no arquivo EmojiDict primeiro. Estamos importando componentes básicos do React Native. Começamos declarando um componente View , que é o bloco de construção básico no arquivo React Native. Ele mapeia para componentes fundamentais do iOS nativo ( UIView ) e Android ( View ), daí o nome. Você pode pensar esse componente como um mero elemento div do HTML, onde todos os outros elementos são colocados dentro dele. Portanto, um componente de View pode conter componentes aninhados.

Componente View coloca um elemento container que suporta estilo de layout com flexbox e outros estilos através de CSS. Estamos fornecendo estilos para visualizar via StyleSheet . Portanto, você pode dizer que os componentes do View são usados principalmente para estilização e layout de elementos filhos.

StyleSheet in React Native fornece uma API para criar estilos dentro do arquivo do componente. Ele pega um objeto JavaScript como acima, e retorna um novo objeto Stylesheet dele. Não há classes ou ids no React Native como no desenvolvimento web. Para criar um novo objeto de estilo, use o método StyleSheet.create() .

A maneira como definimos estilos criando um objeto é o caminho preferido. Além de ajudar você a organizar estilos e mantê-los separados, esses estilos, quando definidos dessa maneira, também são enviados pela ponte de renderização nativa apenas uma vez.

O componente Text é, em muitos aspectos, semelhante ao componente View , exceto que está especificamente disponível para exibir texto. Além disso, como o componente View , ele suporta estilo. No momento, estamos usando o flexbox para estilizar e centralizar o que estiver dentro do componente View . Flexbox é um algoritmo para especificar o layout de um componente para seus filhos seguirem o mesmo padrão. Suponha que, se nós modificá-lo como abaixo:

Você obterá o seguinte resultado ao atualizar o simulador.

A forma como estamos criando uma lista de emojis não é uma abordagem pragmática para manipular dados, seja de uma API de terceiros ou gerenciada pelo estado do componente e processada como uma lista, como fazemos acima. Vamos converter nossa visão simples em FlatList .

FlatList é multi-plataforma, por padrão vertical para exibir uma lista de itens de dados. Requer dois adereços: data e renderItem . data são a fonte de informações para a lista. renderItem pega um item da origem e retorna um componente formatado para renderizar. Os estilos que podem ser aplicados a um componente FlatList são feitos pelo prop contentContainerStyle que aceita o valor do objeto Stylesheet . O que temos acima é a versão mais simples da flatlist. Além disso, o FlatList in React Native tem suporte para extrair para atualizar a interação e o modo de exibição horizontal.

Isso conclui nosso primeiro aplicativo nativo React. Tenho certeza que você pode ter aprendido uma coisa ou duas. É apenas um componente básico que renderiza uma lista de itens.

Mais sobre a aprendizagem Reagir Native

Com a falta de recursos atualizados ou não muitos recursos que você encontrará na React Native concretamente, eu recomendo ficar com você aprender fazendo o processo e obter o máximo de experiência prática neste campo, como você pode. Eu me esforcei quando comecei a aprender React Native, vindo de um background de Desenvolvimento Web.

Aqui está o que eu acho que você pode fazer para avançar com o desenvolvimento do React Native.

Comece com o básico

Este artigo fornece uma visão geral do que é dentro do processo de desenvolvimento do aplicativo React Native e como as coisas funcionam nos bastidores, resumidamente. Muitas vezes me deparo (especialmente através # 100DaysOfCode campanha) desenvolvedores que lutam para aprender um novo framework com pouca experiência em linguagem de programação específica. Meu conselho, antes de você pular para fazer projetos gigantescos, comece com o básico. Aprenda os conceitos como cada componente específico para a curva, certifique-se de aplicá-los tanto quanto você puder e construir pequenas coisas.

Por exemplo, hoje aprendemos sobre o uso do componente FlatList neste artigo. Tente criar uma lista com seu próprio conjunto de dados ou encontre um conjunto de dados falso / falso na Internet e tente criar um pequeno aplicativo a partir dele. Lembre-se sempre da sensação que você teve ao criar seu primeiro programa Hello World . Você se lembra desse sentimento de realização?

Dê pequenos passos, construa pequenas coisas primeiro antes de mergulhar fundo na complexidade das bibliotecas de gerenciamento de estado, como Redux e Mobx, ou persistência de dados, usando APIs de terceiros, usando TypeScript ou Flow, e assim por diante. Estas são apenas ferramentas, você não precisa conhecê-las no primeiro dia ( mas eu não estou dizendo que você nunca deve aprender sobre elas. A palavra-chave aqui é que elas são FERRAMENTAS ). Se você é novo em JavaScript, certifique-se de estar livre dos recursos básicos do ES6, como classes, funções de seta, etc. Em seguida, você deve passar pelos conceitos básicos do ReactJS, como componentes props, state e stateless em geral.

Em resumo, dê uma olhada em:

  • Recursos do ES6
  • API dos componentes ReactJS
  • Configurando um ambiente de desenvolvimento para o Reagir Nativo
  • Flexbox

Avance seu caminho

Uma vez que você tenha conceitos básicos claros em sua mente e tenha jogado um pouco para obter alguma experiência prática, é hora de avançar mais. Comece a criar aplicativos maiores que funcionem ou se comportem como um aplicativo real e interajam com dados em tempo real. Aqui está uma lista de coisas que você pode aprender para avançar em sua jornada.

  • Armazenamento de dados offline com o AsyncStorage
  • Trabalhando com APIs de terceiros
  • Mapas
  • Telas de Respingo
  • Navegação
  • Redux (para gerenciamento do estado)
  • Redux Saga e Persistir
  • Testes e TDD
  • Notificações via push
  • Animações da interface do usuário
  • Crie e publique seu aplicativo
  • Entrega contínua ou CI

Observe que esses são apenas tópicos abrangentes para você começar. Há muitas outras coisas que você aprenderá ao longo do caminho. Não fique sobrecarregado com isso.

Desafios pessoais: o que você quer com isso?

Talvez você se torne um desenvolvedor React Native profissional e trabalhe em uma organização que usa essa estrutura de tecnologia ou talvez queira criar aplicativos para seus clientes / clientes. Definir seus próprios desafios pessoais no caminho é uma ótima maneira de aprender. Faça um compromisso consigo mesmo e trabalhe nisso. Encontre aplicativos em seu telefone ou em lojas que você deseja clonar ou adicionar um recurso extra como uma funcionalidade ou saiba mais sobre a interface do usuário.

Não fique sobrecarregado pelo número de erros que você faz ou pelos erros que você recebe. Ficar frustrado e reclamar sobre a Internet durante todo o dia é fácil, mas entenda que isso não resolverá seus problemas nem o tornará um desenvolvedor melhor. Tudo isso faz parte da sua jornada. Lembre-se disso.

Conclusão

Se você está começando no desenvolvimento do React Native, vamos fazer isso juntos. Estou disponível no Twitter ( onde você pode me escrever) ?

Aman Mittal ??? (@amanhimself) | Twitter

Os últimos Tweets de Aman Mittal @ (@amanhimself). ??? # Desenvolvedor #Fullstack #Nodejs #ReactNative | Blog # Blogger…

twitter.com

Introdução ao React Native em 2019: crie seu primeiro aplicativo

Aprenda a construir seu primeiro aplicativo React Native com conceitos básicos importantes e para onde ir a partir daqui!

Aman Mittal Blocked Unblock Seguir Seguindo 4 de janeiro Crédito: https://unsplash.com/@nateggrant

Vivemos no mundo de uma variedade de dispositivos móveis dominados principalmente por duas plataformas, iOS e Android. É uma corrida de dois cavalos e estou certo de que todos podemos concordar com isso. Construir uma aplicação móvel não é uma tarefa fácil.

Para iOS, você escreve código usando Objective-C ou Swift e, para Android, você se verá usando Java. Além das diferentes linguagens de programação usadas para criar um dispositivo móvel que pode ser executado em cada uma das duas plataformas, as caixas de ferramentas também são totalmente diferentes para essas duas plataformas móveis.

Muitos desenvolvedores modernos usam um conjunto específico de tecnologia usado para criar aplicativos da Web: HTML, CSS e JavaScript. Existem diferentes estruturas que se enquadram na categoria comumente conhecida como aplicativos híbridos. Você pode usar quase um conjunto de códigos-fonte para desenvolver o aplicativo para as plataformas iOS e Android.

Nos últimos anos, as estruturas híbridas evoluíram a partir da visualização da Web para usar APIs nativas. Esta abordagem multi-plataforma de desenvolvimento de uma aplicação móvel vem com suas próprias vantagens e desvantagens. Prós, como consumir menos tempo e custo efetivo, incluem questões de desempenho.

Uma ótima opção que cai sob a égide do desenvolvimento de plataforma cruzada é o React Native. Desenvolvido e usado pelo Facebook, bem como outros, como Tesla, Walmart, Uber Eats, Instagram, Discórdia, Wix e assim por diante. O React Native é baseado na biblioteca da web do Facebook ReactJS.

O que você vai aprender?

Neste tutorial, você aprenderá as seguintes coisas:

  • O que é Reagir Nativo?
  • Configurando o ambiente de desenvolvimento
  • Use o React Native CLI
  • Executar um aplicativo nativo de Reação
  • O que é o App.js?
  • Recarregamento a Quente
  • AppRegistry
  • Crie seu primeiro aplicativo nativo React
  • Aprenda sobre diferentes componentes da interface do usuário
  • View componente
  • Objeto StyleSheet
  • Componente de Text
  • Crie uma lista com FlatList
  • Caminho de Aprendizagem para Reagir Nativa

O que é Reagir Nativo?

Resumindo, o React Native permite que você crie aplicativos móveis que parecem, sentem e funcionam muito mais como aplicativos nativos. Ele usa os mesmos blocos de construção fundamentais da interface do usuário dos aplicativos iOS e Android comuns. Você apenas coloca esses blocos de construção juntos usando JavaScript e React. O bom para os desenvolvedores é que eles podem usar quase os mesmos conceitos que estão sendo usados para construir aplicativos da web.

Se você estiver familiarizado com o Reactjs ou vier de segundo plano de desenvolvimento de front-end, o React usa um DOM virtual que atua como uma sombra para o DOM real disponível. Quando um elemento é alterado, essa alteração é refletida no DOM real por DOM Virtual usando um nó que corresponde a cada elemento.

No entanto, no React Native, não há DOM, em vez de Native Components, que são fornecidos por plataformas como iOS e Android. Não há visualizações da Web aqui. Reagir Nativo tem uma instância de JavaScriptCore para executar o código JS quando um aplicativo é iniciado. Reagir O Native usa o RCTBridgeModule para estabelecer uma conexão entre o código nativo e o código JavaScript.

Em palavras simples, o React Native traz o React para o desenvolvimento de aplicativos móveis. Seu objetivo não é escrever o código uma vez e executá-lo em qualquer plataforma. O principal objetivo aqui é aprender uma vez e escrever em qualquer lugar. Uma distinção importante a fazer. Reagir Nativo ainda é relativamente novo, pois no momento em que este post foi escrito, ele está em sua versão 0.57 .

Pré-requisitos: Configurando o ambiente de desenvolvimento

Para mergulhar profundamente no ecossistema do React Native, precisamos instalar algumas coisas primeiro para começar. Vamos passar por um deles.

Nodejs e Watchman

Reagir O Native usa o Node.js, um tempo de execução do JavaScript, para criar seu código JavaScript. Se você ainda não tem o Node.js instalado, é hora de obtê-lo do seu site oficial aqui Eu recomendo instalar LTS ( suporte de longo prazo ) versão 10.xx que também estou usando pessoalmente.

Watchman é uma ferramenta desenvolvida pelo Facebook para assistir a mudanças de arquivos. É altamente recomendável que você o instale para um melhor desempenho. Para usuários de Mac, você precisará do pacote macOS do homebrew para instalar o watchman : brew install watchman .

Para usuários do Windows, não há watchman então você pode pular esta etapa, mas você precisa ter o Nodejs e o python2 como a versão recente do React Native requer.

Por fim, todos (independentemente do SO que você esteja usando) precisam instalar o Java SE Development Kit (JDK) que pode ser encontrado aqui . Certifique-se de que a versão instalada seja pelo menos ou maior que >= 8 .

SDKs nativos

Para desenvolvedores do macOS, você pode instalar o Xcode, que é livre para desenvolver aplicativos para iOS.

Se você deseja desenvolver para Android, configurar seu ambiente de desenvolvimento pode ser um pouco entediante se você for novo nisso. Você instalará o Android Studio, que é uma ferramenta totalmente gratuita para desenvolver aplicativos Android em seu idioma nativo. Você instalará uma lista de utilitários para esse processo e, em seguida, configurará as variáveis de caminho pela primeira vez. Por isso, estou recomendando que você passe pelo link exato aqui. quais são as instruções oficiais de configuração fornecidas pelo Facebook.

Reagir CLI nativo

Quando terminar o processo de configuração do ambiente de desenvolvimento e as ferramentas necessárias, você poderá respirar fundo agora mesmo. Nós vamos começar a construir nosso primeiro APP REACT NATIVE. Para começar, precisamos de mais uma ferramenta. Usando o npm (um gerenciador de pacotes, que você instalou usando o Node.js ), você irá instalar o react-native-cli . Abra seu terminal e execute o seguinte comando.

Essa ferramenta CLI é usada para criar um projeto inicial que contenha tudo o que você precisa para criar e executar um aplicativo React Native. npm instala esta ferramenta CLI como um módulo global .

Para verificar se o processo de instalação foi bem-sucedido, você pode executar o comando abaixo e obterá a versão atual da ferramenta CLI.

Executando um aplicativo nativo de Reagir

Para começar, precisamos criar um diretório de projeto usando a ferramenta CLI recém-instalada. Abra o seu terminal e execute o seguinte.

Você pode nomear o que quiser. Quando o processo estiver concluído, atravesse dentro do diretório do projeto. Você será recebido por um conjunto de arquivos como abaixo.

De cima, vamos agora dar uma breve olhada nos arquivos ou diretórios que são essenciais para entendermos:

  • App.js o primeiro arquivo em qualquer aplicativo React Native que seja o ponto de entrada do processo de desenvolvimento do aplicativo. O que quer que você escreva dentro deste arquivo, ele será exibido no dispositivo móvel.
  • node_modules / é uma pasta que contém todas as dependências ( ou pacotes ) que são usadas para desenvolver e executar este aplicativo.
  • index.js é o ponto de entrada para acionar o aplicativo em um dispositivo ou simulador
  • ios é a pasta que contém um projeto Xcode e o código necessário para inicializar este aplicativo para dispositivos iOS
  • android é a pasta que contém código relacionado android para iniciar este aplicativo para dispositivos Android
  • package.json onde cada dependência instalada é listada

Você pode ignorar os outros arquivos a partir de agora.

Executando o aplicativo

A ferramenta react-native-cli vem com alguns trechos de código padrão. Para vê-lo em ação, você terá que executar o aplicativo usando um terminal. Eu vou usar um simulador iOS e um emulador Android para esse fim. Os desenvolvedores do Windows podem ignorar a parte do iOS.

Observe que não fizemos nenhuma alteração no código-fonte do aplicativo. Para executar o aplicativo, precisamos acionar o comando abaixo primeiro.

Isso iniciará o bundler metropolitano para observar qualquer alteração de arquivo em um arquivo .js em seu projeto. Certifique-se de que este comando esteja sendo executado em uma janela de terminal separada ou em uma guia quando você estiver construindo seu projeto para iOS ou Android .

Correndo no iOS

Para executar o aplicativo com qualquer conteúdo atual que ele tenha em um simulador do iOS, você pode executar o seguinte comando abaixo na segunda janela do terminal.

Esse comando cria seu aplicativo e o inicia no simulador do iOS. Esse processo consome uma boa quantidade de tempo ao criar os arquivos iOS necessários pela primeira vez para qualquer aplicativo React Native. Ele também irá abrir um dispositivo de simulação para você como abaixo quando o processo é feito.

Este simulador do iOS é o padrão com a versão atual do Xcode que você possui. No entanto, você pode executar qualquer dispositivo sim adicionando um sinalizador. Ao executar o comando: xcrun simctl list devices você pode verificar quais dispositivos você tem disponíveis como simuladores.

A última Booted ou Shutdown contra cada dispositivo listado na imagem acima informa quais dispositivos estão sendo executados no momento. Para construir e executar para outro dispositivo, você pode executar o seguinte comando.

onde "iPhone 8 Plus" é o valor que você pode procurar no último comando que mencionei.

Correndo no Android

Você precisará de um dispositivo Android para executar seu aplicativo React Native Android. Isso pode ser um dispositivo Android físico ou, mais comumente, você pode usar um dispositivo virtual Android que permite emular um dispositivo Android no seu computador.

Se você deseja executá-lo em um dispositivo real, siga o conjunto completo de instruções aqui . Para executar em um emulador Android, abra o Android Studio e escolha a opção "abrir um projeto / pasta existente". Quando o projeto for aberto e indexado, você verá um ícone exatamente como a imagem abaixo no canto direito.

Esta é uma opção para ativar um dispositivo virtual Android ( AVD ). Se você acabou de instalar o Android Studio, provavelmente precisará criar um novo AVD. Depois que o dispositivo virtual estiver em execução, você poderá executar o comando react-native run-android partir da sua janela de terminal para abrir o aplicativo.

Como modificar o App.js?

Para ver o aplicativo em ação nos dois dispositivos, vamos modificar o App.js com o código abaixo.

O resultado da seguinte modificação pode ser visto se você pressionar Cmd + R no iOS e duplo R no Android.

Ativar Recarregamento a Quente

Hot Recarregando recurso no reagir aplicativo nativo ajuda a exibir qualquer atualização ocorrer na interface do usuário, sempre que você salvar qualquer coisa em reagir código do aplicativo nativo. Ao ativar esse recurso, você não precisa pressionar Cmd + R no iOS e R duplo no Android novamente para ver as alterações na interface de usuário que acabou de criar.

Para ativar esse recurso, tudo o que você precisa fazer é pressionar Ctrl + M/Cmd + M dependendo do seu sistema operacional, e selecionar Ativar Recarregamento a Quente no menu pop-up exibido conforme mostrado acima.

O que é o AppRegistry?

O arquivo que renderiza esse componente App é index.js no diretório raiz que possui o código a seguir.

AppRegistry é o ponto de entrada para executar um aplicativo React Native. O componente de aplicativo ou qualquer outro componente raiz no aplicativo deve se registrar usando AppRegistry.registerComponent modo que o sistema nativo possa carregar o pacote do aplicativo e executar o aplicativo iniciando AppRegistry.runApplication .

Você pode ler mais sobre o AppRegistry em detalhes aqui .

Passos para bebês: primeiro aplicativo nativo de reação

Nesta seção, você criará seu primeiro aplicativo React Native. Para começar, já geramos um projeto React Native usando a ferramenta cli. A única coisa que você tem que entender agora é o que são componentes?

Componentes são os elementos visuais que você vê na tela em um aplicativo React Native. Existem vários componentes disponibilizados para você usar pelo núcleo React Native. Para entender isso melhor, podemos categorizar esses componentes em seis categorias amplas:

  • Componentes básicos ou principais, como View , Text , Image , ScrollView , TextInput , StyleSheet
  • Listar componentes como FlatList e SectionList
  • Componentes da interface do usuário ou do controle de formulários, como Picker , Controle Slider , Button , Switch
  • Componentes específicos do iOS, como ActionSheetIOS , SegmentedControlIOS , AlertIOS , PushNotificationsIOS
  • Componentes específicos do Android, como DatePickerAndroid , TimePickerAndroid , ViewPagerAndroid , ToastAndroid , PermissionsAndroid
  • Outros / Diversos componentes, como Alert , Animated , CameraRoll , Dimensions , Clipboard , StatusBar , Linking , Keyboard , ActivityIndicator , WebView e Modal

Obter detalhes sobre cada um deles está fora do escopo deste artigo e será uma maneira tediosa de aprender as coisas inicialmente. Em vez disso, vamos usar uma abordagem baseada em projetos para aprender o seu caminho através deles. Existem muitos outros componentes e APIs disponíveis no núcleo React Native que você pode consultar na documentação oficial e, de tempos em tempos, precisar.

O que estamos construindo?

Você vai criar um pequeno aplicativo para se familiarizar apenas com os componentes básicos. O aplicativo é mostrado na imagem abaixo vai ser o resultado final.

O acima não é nada, mas uma lista de texto vindo diretamente do estado do componente. Crie um novo diretório src/components na raiz do projeto e dentro dos components/ crie um novo arquivo chamado EmojiDict.js com o seguinte trecho de código.

Assim, temos que modificar o arquivo App.js para exibir o resultado desse componente.

Agora, se você der uma olhada na tela do simulador, verá o seguinte resultado.

O que está acontecendo? Dê uma olhada no arquivo EmojiDict primeiro. Estamos importando componentes básicos do React Native. Começamos declarando um componente View , que é o bloco de construção básico no arquivo React Native. Ele mapeia para componentes fundamentais do iOS nativo ( UIView ) e Android ( View ), daí o nome. Você pode pensar esse componente como um mero elemento div do HTML, onde todos os outros elementos são colocados dentro dele. Portanto, um componente de View pode conter componentes aninhados.

Componente View coloca um elemento container que suporta estilo de layout com flexbox e outros estilos através de CSS. Estamos fornecendo estilos para visualizar via StyleSheet . Portanto, você pode dizer que os componentes do View são usados principalmente para estilização e layout de elementos filhos.

StyleSheet in React Native fornece uma API para criar estilos dentro do arquivo do componente. Ele pega um objeto JavaScript como acima, e retorna um novo objeto Stylesheet dele. Não existem classes ou ids no React Native como no desenvolvimento web. Para criar um novo objeto de estilo, use o método StyleSheet.create() .

A maneira como definimos estilos criando um objeto é o caminho preferido. Além de ajudar você a organizar estilos e mantê-los separados, esses estilos, quando definidos dessa maneira, também são enviados pela ponte de renderização nativa apenas uma vez.

O componente Text é, em muitos aspectos, semelhante ao componente View , exceto que está especificamente disponível para exibir texto. Além disso, como o componente View , ele suporta estilo. No momento, estamos usando o flexbox para estilizar e centralizar o que estiver dentro do componente View . Flexbox é um algoritmo para especificar o layout de um componente para seus filhos seguirem o mesmo padrão. Suponha que, se nós modificá-lo como abaixo:

Você obterá o seguinte resultado ao atualizar o simulador.

A forma como estamos criando uma lista de emojis não é uma abordagem pragmática para manipular dados, seja ela proveniente de uma API de terceiros ou gerenciada pelo estado do componente e renderizada como uma lista, como fazemos acima. Vamos converter nossa visão simples em FlatList .

FlatList é multi-plataforma, por padrão vertical para exibir uma lista de itens de dados. Requer dois adereços: data e renderItem . data são a fonte de informações para a lista. renderItem pega um item da origem e retorna um componente formatado para renderizar. Os estilos que podem ser aplicados a um componente FlatList são feitos pelo prop contentContainerStyle que aceita o valor do objeto Stylesheet . O que temos acima é a versão mais simples da flatlist. Além disso, o FlatList in React Native tem suporte para extrair para atualizar a interação e o modo de exibição horizontal.

Isso conclui nosso primeiro aplicativo nativo React. Tenho certeza que você pode ter aprendido uma coisa ou duas. É apenas um componente básico que renderiza uma lista de itens.

Mais sobre Aprendendo Reação Nativa

Com a falta de recursos atualizados ou não muitos recursos que você encontrará na React Native concretamente, eu recomendo ficar com você aprender fazendo o processo e obter o máximo de experiência prática neste campo, como você pode. Eu me esforcei quando comecei a aprender React Native, vindo de um background em Desenvolvimento Web.

Aqui está o que eu acho que você pode fazer para avançar com o desenvolvimento do React Native.

Comece com o básico

Este artigo fornece uma visão geral do que é dentro do processo de desenvolvimento do aplicativo React Native e como as coisas funcionam nos bastidores, resumidamente. Muitas vezes me deparo (especialmente através # 100DaysOfCode campanha) desenvolvedores que lutam para aprender um novo framework com pouca experiência em linguagem de programação específica. Meu conselho, antes de você pular para fazer projetos gigantescos, comece com o básico. Aprenda os conceitos como cada componente específico para a curva, certifique-se de aplicá-los tanto quanto você puder e construir pequenas coisas.

Por exemplo, hoje aprendemos sobre o uso do componente FlatList neste artigo. Tente criar uma lista com seu próprio conjunto de dados ou encontre um conjunto de dados falso / falso na Internet e tente criar um pequeno aplicativo a partir dele. Lembre-se sempre da sensação que você teve ao criar seu primeiro programa Hello World . Você se lembra desse sentimento de realização?

Dê pequenos passos, construa pequenas coisas primeiro antes de mergulhar fundo na complexidade das bibliotecas de gerenciamento de estado, como Redux e Mobx, ou persistência de dados, usando APIs de terceiros, usando TypeScript ou Flow, e assim por diante. Estas são apenas ferramentas, você não precisa conhecê-las no primeiro dia ( mas eu não estou dizendo que você nunca deve aprender sobre elas. A palavra-chave aqui é que elas são FERRAMENTAS ). Se você é novo em JavaScript, certifique-se de estar livre dos recursos básicos do ES6, como classes, funções de seta, etc. Em seguida, você deve passar pelos conceitos básicos do ReactJS, como componentes props, state e stateless em geral.

Em resumo, dê uma olhada:

  • Recursos do ES6
  • API dos componentes ReactJS
  • Configurando um ambiente de desenvolvimento para o Reagir Nativo
  • Flexbox

Avance seu caminho

Uma vez que você tenha conceitos básicos claros em sua mente e tenha jogado um pouco para obter alguma experiência prática, é hora de avançar mais. Comece a criar aplicativos maiores que funcionem ou se comportem como um aplicativo real e interajam com dados em tempo real. Aqui está uma lista de coisas que você pode aprender para avançar em sua jornada.

  • Armazenamento de dados offline com o AsyncStorage
  • Trabalhando com APIs de terceiros
  • Mapas
  • Telas de Respingo
  • Navegação
  • Redux (para gerenciamento do estado)
  • Redux Saga e Persistir
  • Testes e TDD
  • Notificações via push
  • Animações da interface do usuário
  • Crie e publique seu aplicativo
  • Entrega Contínua ou CI

Observe que esses são apenas tópicos amplos para você começar. Há muitas outras coisas que você aprenderá ao longo do caminho. Não fique sobrecarregado com isso.

Desafios pessoais: o que você quer com isso?

Talvez você se torne um desenvolvedor React Native profissional e trabalhe em uma organização que usa essa estrutura de tecnologia ou talvez queira criar aplicativos para seus clientes / clientes. Definir seus próprios desafios pessoais no caminho é uma ótima maneira de aprender. Faça um compromisso consigo mesmo e trabalhe nisso. Encontre aplicativos em seu telefone ou em lojas que você deseja clonar ou adicionar um recurso extra como uma funcionalidade ou saiba mais sobre a interface do usuário.

Não fique sobrecarregado pelo número de erros que você faz ou pelos erros que você recebe. Ficar frustrado e reclamar sobre a Internet durante todo o dia é fácil, mas entenda que isso não resolverá seus problemas nem o tornará um desenvolvedor melhor. Tudo isso faz parte da sua jornada. Lembre-se disso.

Conclusão

Se você está começando no desenvolvimento do React Native, vamos fazer isso juntos. Estou disponível no Twitter ( onde você pode me escrever) ?

Aman Mittal ??? (@amanhimself) | Twitter
Os últimos Tweets de Aman Mittal @ (@amanhimself). ??? # Desenvolvedor #Fullstack #Nodejs #ReactNative | Blog # Blogger… twitter.com

Costumo escrever sobre tecnologias da web, mas minha principal preocupação é fornecer conteúdo no React Native. Você pode me seguir no Medium ou inscrever-se no meu boletim informativo semanal abaixo para receber todos os meus tutoriais diretamente na sua caixa de entrada .

O código completo deste tutorial está disponível aqui?.

amandeepmittal / react-native-workspace
?? + ? Reagir as coisas nativas. Contribuir para o desenvolvimento de uma tarefa de resposta / reação-nativo criando uma conta em… github.com