Primeiras aulas do curso React Native: Trabalhando com Function components

React Native: Trabalhando com Function components

Iniciando o projeto - Introdução

Boas vindas ao curso de React Native: trabalhando com function components!

Em nossas aulas, desenvolveremos a aplicação InstAlura como projeto final, onde adicionaremos algumas imagens a partir do próprio Instagram oficial da Plataforma Alura e aplicaremos algumas funcionalidades.

Para isso, utilizaremos o React Native, aprenderemos a buildar o aplicativo pelo PowerShell e instalá-lo no Android Studio.

Ao longo do curso, encontraremos vários desafios e alguns erros durante o desenvolvimento ou execução, e aprenderemos a resolvê-los.

O React Native ainda está na versão 0.6 até o momento desta aula, mas é amplamente utilizado em produção mesmo com algumas instabilidades.

Nossa aplicação nos permitirá curtir as fotos postadas, escrever e postar comentários com nosso nome, inserir avisos sobre o desenvolvimento, entre outras funcionalidades.

Quando criarmos um projeto de React Native no Visual Studio Code, encontraremos uma série de documentos gerados automaticamente na lista lateral.

Conforme avançamos, entenderemos o funcionamento de cada elemento; o primeiro arquivo de criação da aplicação será o Apps.js, onde também iremos componentizar nosso layout, retirando as funcionalidades de um único arquivo e separando responsabilidades.

Criaremos os componentes Cabecalho, Foto e Comentarios que receberão muitas coisas por properties, relembrando outros conteúdos de cursos sobre React Native.

Ainda para separarmos o nosso código daquele que foi gerado automaticamente, nosso código-fonte src terá três pastas para os três elementos citados; Cada componente é separado em três outros arquivos .js, sendo o primeiro com a renderização de fato, o segundo contendo o estilo e o terceiro index.js terá seu uso discutido mais adiante.

Desta forma, facilitaremos a navegação pelo projeto durante o desenvolvimento.

Também faremos sua API e conectaremos com servidores externos para pegarmos informações importantes para a aplicação. No servidor, teremos um array com três itens contendo as imagens que veremos no aplicativo, e cada um será um objeto com uma série de dados que serão usados durante o curso.

Comentários, quantidade de likes, descrição, url de cada imagem, e etc. serão montados passo-a-passo para entendermos bem o processo de criação de aplicativo em React Native.

Vamos lá!

Iniciando o projeto - Criando o projeto

Com o React Native devidamente instalado em nosso ambiente de produção, começaremos a desenvolver nosso aplicativo. Nos passos anteriores, disponibilizamos orientações traduzidas para instalação em vários sistemas operacionais, as quais podem ser encontradas em inglês também na parte "React Native CLI Quickstart"neste link.

Aqui em nossa aula, usaremos o Windows com emulador do Android.

Depois de termos instalado o Node, Python2 e JDK além do React Native, iniciaremos nosso trabalho de fato.

Abriremos o PowerShell com o caminho da pasta onde o projeto será criado. Em seguida na mesma linha, escreveremos react-native com init para iniciarmos o projeto Instalura na versão 0.60.4 específica, pois é interessante trabalharmos com a mesma para não termos problemas, afinal algumas alterações podem acontecer ao longo das atualizações.

react-native init Instalura - -version 0.60.4

Ao executarmos, o sistema começará a baixar as dependências. Não usaremos o yarn que acelera esse download por enquanto, mas não é essencial utilizá-lo.

Terminado este processo, o PowerShell fará várias operações e baixará diversos pacotes para nosso projeto. Ao final, apresentará instruções de execução para iOS e Android.

Primeiro, ao executarmos o comando ls na linha seguinte e criaremos o diretório Instalura. Também precisaremos do emulador do Visual Studio Code aberto, depois escreveremos cd Instalura para entrarmos na pasta, e, depois de limparmos a tela, por fim rodaremos o react-native com run-android.

Com isso, começaremos a executar e buildar o nosso aplicativo zerado. Em seguida, o sistema instanciará alguns processos e subirá o servidor Node que fará a comunicação entre nosso código e o emulador.

Uma nova janela se abrirá indicando a execução do Metro Bundler na porta 8081. Desta forma, não precisaremos recompilar o aplicativo sempre que atualizarmos nosso texto direto no emulador, pois o servidor conseguirá assimilar as novas pastas, informações e arquivos.

O deixaremos rodando minimizado por enquanto. Sempre que fizermos o comando run-android ou run-ios, o sistema subirá o Bundler.

No PowerShell, veremos a mensagem de sucesso do build de nosso aplicativo, e poderemos iniciá-lo no simulador. Inclusive, poderemos ver seu ícone escrito "Instalura" na tela inicial do emulador.

Abrindo o aplicativo, receberemos uma mensagem de boas vindas ao React com algumas instruções; o primeiro passo é editar o arquivo App.js para mudarmos esta página inicial.

Para vermos as alterações, bastará apertarmos a letra "R" do teclado duas vezes para darmos reload. Assim, o BUNDLE fará a leitura de index.js e pegará as informações do Node.

Se fecharmos a janela do servidor e apertarmos "R + R" novamente, o simulador dará um erro, pois tentará pegar os dados de um local que não existe.

Para conseguirmos dar continuidade, não precisaremos fechar a aplicação e todos os outros programas para buildarmos de novo, bastará apenas escrevermos react-native com start dentro do diretório do projeto para subirmos o servidor novamente e lermos as dependências.

Com isso, conseguiremos atualizar o emulador apertando duas vezes a tecla "R" do teclado.

Abriremos uma nova instância do PowerShell, visto que o atual está rodando o servidor Node com Metro Bundler e não poderá ser alterado agora.

Na nova janela, escreveremos cd apenas. Depois, abriremos o Explorador de Arquivos, encontraremos o diretório "Instalura", clicaremos sobre a pasta do projeto e a arrastaremos até à nova instância do PowerShell.

Com isso, traremos o caminho exato para a linha de comando. Dentro, digitaremos code . para abrirmos o trabalho no Visual Studio Code.

A seguir, começaremos a entender as alterações no servidor.

Iniciando o projeto - Entendendo o ambiente de desenvolvimento

Abriremos nosso projeto do Visual Studio Code, mas poderemos usar outro editor se preferirmos.

Na lista lateral chamada "Explorer", encontraremos a estrutura de pastas gerada automaticamente.

Nosso primeiro passo será editar o arquivo App.js; acessando-o, teremos a chamada da arrow function const`App` que retornará nossa visualização.

Neste código, veremos tags já conhecidas em cursos anteriores, como <Fragment>. Porém, há outras relacionadas ao desenvolvimento de aplicações mobile que talvez ainda não tenhamos aprendido, pois o React não trabalha com HTML.

Por exemplo, a <StatusBar> representa a barra superior contendo informações sobre o sinal, porcentagem de bateria, notificações, horário e etc., e a <ScrollView> nos permite deslizar na tela.

Logo, é uma linguagem de marcação mas não trabalha com HTML em si, apesar de algumas semelhanças.

Começaremos traduzindo Step One como Primeiro passo. Salvaremos e atualizaremos o emulador com "R + R". Feito isso, a tela simulada exibirá o escrito "Primeiro passo" após "Welcome to React".

Então poderemos alterar nossa aplicação conforme manipulamos as Views do código dentro de App.js. Se apagássemos todo o primeiro bloco intermediário de <View> com style igual a {styles.sectionContainer} por exemplo, e depois atualizássemos o emulador, veríamos a tela simulada sem a primeira parte do texto.

Porém, pode ser cansativo o percurso constante de ficarmos indo e voltando do editor para a simulação com "Alt + Tab" todas as vezes que alterarmos algo.

Mas caso queiramos, poderemos clicar no menu button do próprio celular emulado e selecionar a opção "Enable Live Reload". Com isso, acionaremos o recarregamento ativo e, sempre que salvarmos o arquivo com as alterações no código, o emulador atualizará a visualização automaticamente.

Nesta aula, continuaremos utilizando o atalho "Alt + Tab" para podermos escolher o momento de visualizarmos as mudanças, pois lidaremos com bastante código. Para desativar o recurso automático e consumir menos processamento, bastará acessarmos o mesmo botão do emulador e escolher "Disable Live Reload".

Continuando, não queremos usar o aplicativo padrão fornecido pelo React e sim criar o Instalura de fato.

Portanto, apagaremos toda o retorno de App com a visualização do bloco de <Fragment>, e consequentemente não retornaremos nada. Não usaremos os styles presentes no bloco de código seguinte, então o excluiremos também. Por fim, não utilizaremos nenhum dos import automáticos por enquanto, deixando somente a importação de React.

import React, {Fragment} from 'react';

const App = () => {
    return (
    )
};

export default App;

Retornaremos o cabeçalho do nosso texto com <Text>, mas se adicionarmos qualquer palavra, o emulador atualizado acusará um erro, pois apagamos todas as importações.

Portanto, importaremos a tag Text a partir de "react-native".

import React, {Fragment} from 'react';
import {Text} from "react-native";

const App = () => {
    return (
        <Text>Teste</Text>
    )
};

export default App;

Feito isso, exibiremos a palavra na tela simulada após salvarmos o arquivo e atualizarmos o emulador. Poderemos ter usuárias ou usuários fictícios, como Ricardo e Marina por exemplo.

import React, {Fragment} from 'react';
import {Text} from "react-native";

const App = () => {
    return (
        <Text>Ricardo</Text>
        <Text>Marina</Text>
    )
};

export default App;

Receberemos uma tela de erro 500 do servidor ao atualizarmos o emulador, afinal o App é uma marcação que está com duas entradas. Da mesma forma que em React, não conseguiremos retornar mais de uma tag, pois se trata de uma function component, ou seja, não é uma classe, mas sim uma função que retorna um componente.

Logo, precisaremos de um Pai que encapsule as duas linhas de <Text>, como o próprio <Fragment>. Dentro deste, inseriremos as palavras.

import React, {Fragment} from 'react';
import {Text} from "react-native";

const App = () => {
    return (
        <Fragment>
            <Text>Ricardo</Text>
            <Text>Marina</Text>
        </Fragment>
    )
};

export default App;

Com isso, veremos os dois nomes impressos na tela simulada. Poderemos ter quantas tags quisermos dentro do componente Pai.

Em JavaScript, é bastante comum termos o arquivo index.js, o qual está na raiz do projeto e é o ponto de entrada do React Native quando criamos um aplicativo.

Neste código, temos o AppRegistry que registra as aplicações e componentes por meio de .registerComponent() recebendo appName, o qual foi importado name da ./app.json.

import {AppRegistry} from 'react-native';
importa App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Acessando o arquivo app.json, veremos a propriedade "name" sendo igual a "Instalura" que foi importada para o código de index.js como appName.

Com isso, o appName será o ponto de entrada como uma arrow function que será executada e retornará o App a partir de App.js. Portanto, o arquivo index.js monta o início da execução da aplicação com o App.js por padrão.

A seguir, continuaremos a manipular o aplicativo Instalura a partir desses código.

Sobre o curso React Native: Trabalhando com Function components

O curso React Native: Trabalhando com Function components possui 143 minutos de vídeos, em um total de 44 atividades. Gostou? Conheça nossos outros cursos de Multiplataforma em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda Multiplataforma acessando integralmente esse e outros cursos, comece hoje!

  • 1247 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1247 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1247 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1247 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas