Devido ao COVID-19, para proteger a todos os envolvidos na gráfica, correio, na Casa do Código e você, estamos temporariamente vendendo apenas e-books.

Use o código e tenha 10% de desconto!

React Native Desenvolvimento de aplicativos mobile com React

Diego Martins de Pinho, Bruna Escudelario

Prefácio

Quando o Diego e a Bruna me convidaram para escrever estas linhas iniciais do novo livro de React Native que estão publicando, fiquei extremamente feliz. Já tive o prazer de trabalhar com ambos em empresas diferentes e o grau de comprometimento e conhecimento dos dois é algo incrível.

Com o Diego, tive a oportunidade de trabalhar no iMasters e foi uma experiência única, principalmente quando viajamos para a Campus Party de Belo Horizonte, onde palestramos para uma turma bem jovem e empolgada. Mas essa é uma história para outro momento… Já com a Bruna, trabalhamos juntos em projetos de aprendizagem corporativa em uma empresa no centro de São Paulo. É impressionante como a dedicação dos dois é parecida.

Já o meu contato com o React e o React Native aconteceu primeiro com o conceito e depois com a ferramenta, algo que não é comum. Desde que trabalho com tecnologia - e isso já faz vários anos - gosto de conhecer primeiro o motivo de usar, para depois usar e foi assim com esta tecnologia.

A ideia por trás do React, tanto a biblioteca, quanto o conceito, é sensacional. O desenvolvimento de aplicações single page consegue deixar tudo mais simples para o usuário, que no fim das contas é quem realmente importa quando estamos desenvolvendo um novo produto ou site.

Desde que o React ganhou vida, primeiro em 2011, dentro do Facebook, depois em 2013 quando foi liberado para a comunidade, o modo como os desenvolvedores passaram a ver suas aplicações mudou drasticamente, e o mesmo se aplicou ao desenvolvimento mobile com o React Native. É por isso que acredito que o conteúdo deste livro é essencial para programadores de todos os perfis e níveis.

Acredito ser tão importante que, trabalhando nos últimos meses com jovens de baixa renda, tento apresentar, até mesmo para eles que nunca tiveram contato com uma única linha de código na vida, os conceitos básicos desse modelo de programação trabalhado com tanto esforço neste livro. Claro que não é fácil para eles, mas é muito importante que vejam desde cedo o que pode ser feito para melhorar a vida deles como programadores e a dos seus futuros usuários.

Aprendi desde cedo que o conhecimento nunca é demais e as novas tecnologias, linguagens e conceitos surgem para nos ajudar a melhorar o mundo que nos cerca e isso nunca foi tão verdade quanto agora, principalmente para os programadores e desenvolvedores. Tenho absoluta certeza de que o Diego e a Bruna vão mostrar nas próximas páginas como o React e o React Native podem ser utilizados nos mais diversos tipos de projetos, principalmente nos mais complexos.

Este livro não é apenas uma leitura, mas uma coleção de conhecimentos que você vai levar para a sua vida pessoal e profissional. Aproveite cada palavra, cada linha, cada frase, cada página e cada código da forma mais intensa possível.

O mundo é do React e agora chegou a hora de suas aplicações também serem :)

Por Reinaldo Silotto - Canal TekZoom

Introdução

Um breve resumo sobre o React Native

O React Native é uma plataforma baseada no React que nos possibilita desenvolver aplicativos mobile híbridos, ou seja, que rodam tanto no iOS (Apple) quanto no Android (Google). A tecnologia é toda baseada em JavaScript, assim como a sua base, o React.

O React é a biblioteca JavaScript mais utilizada hoje no mercado de desenvolvimento web. Competindo com os frameworks Angular e Vue.js, o React se consagrou no mercado e se mantém no topo por ser:

1. Simples de aprender: o React possui poucos conceitos fundamentais e é fácil sair produzindo aplicações web com ele;

2. Desenvolvido (e mantido) pelo Facebook: o time de engenheiros do Facebook já lançou uma série de tecnologias de código aberto além do próprio React. Além de trabalharem constantemente no projeto, eles o utilizam em suas próprias aplicações, o que torna um próprio caso de sucesso da biblioteca;

3. Adota a especificação de Web Components: um dos grandes movimentos da web é pelos componentes. O React abraça esse movimento e torna possível o trabalho através de componentes (o que traz uma série de vantagens em relação ao desenvolvimento tradicional);

4. Adotado pela comunidade e grandes empresas: a comunidade e o mercado abraçaram a tecnologia, tornando-a popular e mais confiável.

Aproveitando todas essas vantagens do React, nasceu o React Native, cuja proposta é levar todos os aspectos positivos que as pessoas amam no React para o contexto do desenvolvimento mobile. Acreditamos que este livro despertará o interesse de todos que:

1. Usam o JavaScript como linguagem principal de desenvolvimento;

2. Trabalham/conhecem/estudam o React;

3. Se interessam por desenvolvimento de aplicativos mobile.

A quem se destina este livro

A proposta é que o livro seja acessível e prático para pessoas de qualquer nível de entendimento sobre o assunto, de modo que abordaremos a utilização da tecnologia de ponta a ponta (instalação, primeira aplicação, desenvolvimento, otimização etc.). Muitos dos conhecimentos que são pré-requisitos serão retomados, como é o caso dos próprios conceitos fundamentais da biblioteca React (para web).

O que vou aprender neste livro?

Nosso objetivo é que ao final deste livro, você seja capaz de:

1. Entender a terminologia e os fundamentos do React e React Native;

2. Criar aplicações mobile tanto para Android quando iOS que realmente resolvam algum problema do mundo real;

3. No processo de desenvolvimento, ser capaz de planejar e desenvolver o código seguindo padrões e recomendações adotadas pelo mercado.

Eu preciso saber JavaScript?

O React Native é uma tecnologia para desenvolvimento mobile totalmente baseada no JavaScript. Isso significa que sim, será necessário um conhecimento prévio da linguagem para conseguir aproveitar com mais profundidade esta produção. Mas antes que você se desespere e desista de continuar a leitura, indicaremos exatamente quais aspectos da linguagem são interessantes que você tenha pelo menos um conhecimento básico para conseguir acompanhar o conteúdo.

1. Sintaxe e estrutura de linguagem;

2. Controle de fluxos e condicionais;

3. Variáveis, funções e objetos.

Além destes pontos estruturantes, é bem importante estar atualizado nas constantes melhorias da linguagem, principalmente nas vindas no ECMAScript 2015 (ES6). Das várias melhorias, podemos destacar:

1. Funções auxiliares de array (ex.: map, filter, reduce);

2. Arrow functions (funções de seta);

3. Desestruturamento de Objetos e Arrays;

4. Classes e Módulos;

5. Const e Let.

O React é muito bem integrado a todas estas funcionalidades e portanto tornam o nosso desenvolvimento muito mais rápido e o código bem mais limpo e manutenível. Por coincidência (ou não), temos um trabalho prévio publicado pela Casa do Código que pode ajudar bastante no entendimento destas e outras funcionalidades do JavaScript. O livro se chama ECMAScript 6: Entre de cabeça no futuro do JavaScript, publicado em 2017.

Em resumo, não é necessário ser um especialista na linguagem, mas ter conhecimento prévio dos fundamentos da linguagem é muito bem-vindo.

Eu preciso saber React?

O React é a base de toda tecnologia por trás do React Native. Por mais desejável que seja que você tenha um conhecimento prévio da biblioteca, não é obrigatório.

Como as tecnologias funcionam de forma muito semelhante, por muitas vezes teremos que dar um passo atrás e explicar conceitos importantes do funcionamento do próprio React para entender como montar os nossos aplicativos usando o React Native. Então fique tranquilo, o essencial nós aprenderemos juntos.

Como devo estudar com este livro?

Este livro foi estruturado de modo que os tópicos apresentados se complementem e se tornem gradativamente mais complexos ao decorrer da leitura. Em todos eles, serão apresentados diversos conceitos, sempre apoiados por códigos contextualizados em caso de usos reais, seguindo as boas práticas adotadas pelo mercado e pela comunidade desenvolvedora. Você notará não somente a evolução dos conceitos, mas também a dos códigos apresentados à medida que a leitura for seguindo.

Como acreditamos que somente com a prática que aprendemos a programar e fixar o conhecimento, no repositório oficial deste livro no GitHub você encontrará uma série de exercícios elaborados pensando na prática dos tópicos apresentados. Junto aos exercícios, você encontrará o gabarito comentado. Ao final do livro, deixamos uma série de recomendações de livros, artigos e cursos para que você aprofunde os estudos.

Consulte este livro sempre que surgirem dúvidas e entre em contato sempre que sentir necessidade. Leia e releia até compreender os conceitos. Cada um tem um ritmo diferente de aprendizado, não acelere o seu e persista até conseguir fazer sozinho.

Em caso de dúvidas, estaremos sempre à disposição. Não deixe de comentar e participar das discussões sobre o livro e os exercícios no site oficial e nos nossos canais de comunicação!

Tanto o site quanto o repositório do livro continuarão sendo atualizados com novos exercícios, artigos, notícias e projetos de exemplo. Vamos aprender juntos!

E o mais importante: nunca deixe de praticar!

- Site oficial: https://livroreactnative.com.br

Autores

Bruna de Freitas Escudelario

Desenvolvedora front-end desde 2016. Fez bacharelado em Ciência da Computação pela Pontifícia Universidade Católica de São Paulo (PUC-SP) e é coautora do livro Construct 2: Crie seu primeiro jogo multiplataforma, também publicado pela Editora Casa do Código, e do livro O Básico da Modelagem 3D com o Blender, publicado pela Editora Viena.

Sempre gostou muito de ler e estuda diariamente por meio de cursos, artigos e vídeos na internet. Começou a se aventurar no desenvolvimento de jogos há pouco tempo, mas já acumulou experiência suficiente para tocar seu primeiro negócio na internet – junto com o Diego –, a Time to Play, uma iniciativa especializada em recursos para a construção de jogos digitais. Hoje atua como desenvolvedora front-end em uma grande empresa de aprendizagem corporativa de São Paulo.

Diego Martins de Pinho

Desenvolvedor de software desde 2013, tem experiência na área da educação e domínio em tecnologias web de front-end e back-end. Dentre as principais linguagens estão o Java e o JavaScript. Fez bacharelado em Ciência da Computação pela Pontifícia Universidade Católica de São Paulo (PUC-SP) e possui MBA em Gerenciamento da Tecnologia da Informação pela Faculdade de Informática e Administração Paulista (FIAP).

Tem uma grande paixão pela educação e gosta muito de ensinar. Escreve artigos sobre tecnologia na internet, faz apresentações em eventos e é entusiasta em programação para jogos, modelagem (2D e 3D) e animação. É coautor do livro Construct 2: Crie seu primeiro jogo multiplataforma e autor do livro ECMAScript 6: Entre de cabeça no futuro do JavaScript, ambos publicados pela Editora Casa do Código. Hoje atua na área da educação como Professor Especialista de Programação e Jogos na Escola Móbile Integral em São Paulo. Também é responsável pela iniciativa Code Prestige de ensino de programação a distância.

Sumário

  • 1 História do desenvolvimento do React Native
    • 1.1 O que é o React Native?
    • 1.2 História
    • 1.3 Vantangens do React Native
    • 1.4 O que vem por aí
  • 2 Instalação e configurações iniciais
    • 2.1 Explorando o Expo
    • 2.2 Instalando e usando o Expo
  • 3 Funcionamento do React Native
    • 3.1 Por debaixo dos panos - React
    • 3.2 Entendendo o arquivo App.js
    • 3.3 Componente funcional
  • 4 Criando os primeiros componentes
    • 4.1 Criando um componente e importando no App.js
    • 4.2 Acessando as propriedades do componente
    • 4.3 Propriedades em componentes de classe
  • 5 Componentes estilizados (CSS-in-JS)
    • 5.1 Aplicando estilos
    • 5.2 Utilizando arquivo externo
    • 5.3 Estilos internos ao componente
    • 5.4 Classes CSS
    • 5.5 Separando estilos genéricos - padrão
  • 6 O básico de layouts com o Flexbox
    • 6.1 Altura e largura (height e width)
    • 6.2 Contêineres e elementos flex
    • 6.3 Flex Direction
    • 6.4 Justify Content
    • 6.5 Align Items
    • 6.6 Flex-wrap
    • 6.7 Flex-grow
    • 6.8 Flex-shrink
    • 6.9 Flex-basis
  • 7 Renderização Condicional
    • 7.1 Verificando se o número é par ou ímpar
    • 7.2 Renderização condicional com função
  • 8 State, eventos e componentes controlados e não controlados
    • 8.1 Conhecendo os estados
    • 8.2 Usando as informações dos estados
    • 8.3 Atualizando o estado (componentes controlados)
    • 8.4 Componentes controlados X não controlados
  • 9 Requisições AJAX e APIs
    • 9.1 Ciclo de vida dos componentes
    • 9.2 AJAX
  • 10 Navegação
    • 10.1 React Navigation
    • 10.2 Navegação por Menu Lateral
    • 10.3 Navegação por Links
    • 10.4 Navegação por abas
  • 11 Integração com o banco de dados do Firebase
    • 11.1 Configuração
    • 11.2 Aplicativo
    • 11.3 Integração
  • 12 Trabalhando com Hooks
    • 12.1 O que são os Hooks?
    • 12.2 Hook de Estado (State Hook)
    • 12.3 Hook de Reducer (Reducer Hook)
  • 13 O futuro do React Native
  • 14 Referências

Dados do produto

Número de páginas:
185
ISBN:
978-65-86110-09-8
Data publicação:
04/2020

Compartilhe!

Compartilhe no Facebook Compartilhe no Twitter