├── .gitignore ├── Capítulo 03 - Funcionamento do React Native ├── exercicios.md └── gabarito.md ├── Capítulo 04 - Criando os primeiros componentes ├── exercicios.md └── gabarito.md ├── Capítulo 05 - Componentes estilizados (CSS-in-JS) ├── exercicio1.jpg ├── exercicios.md └── gabarito.md ├── Capítulo 06 - O básico de layouts com Flexbox ├── exercicios.md ├── gabarito.md └── imagens │ ├── exercicio1.jpg │ └── exercicio2.jpg ├── Capítulo 07 - Renderização Condicional ├── exercicios.md └── gabarito.md ├── README.md ├── cover.png └── logo.png /.gitignore: -------------------------------------------------------------------------------- 1 | */node_modules/ 2 | */_build -------------------------------------------------------------------------------- /Capítulo 03 - Funcionamento do React Native/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | ## questoes[0].titulo = "JS eu conheço, mas JSX? Isso é um jogo?" 4 | 5 | O React trabalha com uma estrutura de arquivos chamada de JSX. 6 | Quais as vantagens desta estrutura? Por que precisamos dela? 7 | 8 | ## questoes[1].titulo = "SPA? Eu quero uma massagem..." 9 | 10 | Dizemos que o React/React Native são tecnologias Single Page Application (SPA). 11 | Na prática, o que isso significa? 12 | 13 | ## questoes[2].titulo = "Se exibindo para todos" 14 | 15 | Crie um componente funcional que exibe na tela do celular a frase: `Eu estou aprendendo React Native.` 16 | Use o componente nativo ``. 17 | 18 | 19 | ## questoes[3].titulo = "Cuidado com esse retorno!" 20 | 21 | Um desenvolvedor escreveu o seguinte trecho de código para o seu aplicativo em React Native. 22 | 23 | ``` js 24 | import React from 'react'; 25 | import { Text } from 'react-native'; 26 | 27 | export default function App() { 28 | return ( 29 | Olá mundo! 30 | Este é o meu primeiro aplicativo! 31 | ) 32 | } 33 | ``` 34 | 35 | No entanto, na hora de executá-lo no Expo, o seguinte erro é exibido. 36 | 37 | ``` bash 38 | Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>... 39 | ``` 40 | 41 | Qual é a causa deste problema? Como resolvê-lo? 42 | 43 | ## questoes[4].titulo = "Classes? Mas isso é escola, por acaso!?" 44 | 45 | No React podemos trabalhar com dois formatos de componentes: classe e funcional. No uso dos componentes de classe, dois desenvolvedores entraram em debate. O primeiro acredita que os componentes de classe devem ser inicializados da seguinte maneira: 46 | 47 | ``` js 48 | import React from 'react'; 49 | 50 | class Componente extends React.Component { 51 | //... 52 | } 53 | 54 | export default Componente; 55 | ``` 56 | 57 | Ou segundo acredita que o código correto é este: 58 | 59 | 60 | ``` js 61 | import {Component} from 'react'; 62 | 63 | class Componente extends Component { 64 | //... 65 | } 66 | 67 | export default Componente; 68 | ``` 69 | 70 | Quem está certo? 71 | -------------------------------------------------------------------------------- /Capítulo 03 - Funcionamento do React Native/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## questoes[0].resposta 4 | 5 | A interface gráfica tanto do React como do React Native são desenvolvidas em JSX, uma extensão da sintaxe do JavaScript que lembra HTML/XML, porém é uma mistura dos dois. Nesta estrutura, conseguimos escrever HTML, CSS e JavaScript em um único arquivo. Como os componentes devem ser estruturas independentes, ou seja, seu código HTML, CSS e JavaScript devem funcionar de forma autônoma; o JSX se faz extretamente necessário. Caso contrário, teríamos que voltar a divisão tradicional de arquivos, o que não é vantajoso neste paradigma de desenvolvimento. 6 | 7 | ## questoes[1].resposta 8 | 9 | SPA é a sigla para Single Page Application que, em tradução livre, significa Aplicação de Página Única. Na prática isso não significa que os aplicativos possuem apenas uma tela, muito pelo contrário, podem ter várias. O que acontece por debaixo dos panos é que apenas uma página é criada e seu conteúdo é trocado de forma a parecer para o usuário que são páginas diferentes, mas não são. 10 | 11 | 12 | ## questoes[2].resposta 13 | 14 | ``` javascript 15 | export default function() { 16 | return Eu estou aprendendo React Native. 17 | } 18 | ``` 19 | 20 | ## questoes[3].resposta 21 | 22 | O problema está no retorno desta função. O código escrito tenta devolver dois componentes que são adjacentes (ou seja, irmãos) e o React não consegue lidar com isso. O React oferece várias maneiras de resolvermos isso, mas o importante é saber que por via de regra a função render deve retornar sempre apenas um componente. Tendo isso em mente, conseguiríamos arrumar o código do exercício encapsulando tudo dentro do componente ``. 23 | 24 | ``` js 25 | import React from 'react'; 26 | import { Text, View } from 'react-native'; 27 | 28 | export default function App() { 29 | return ( 30 | 31 | Olá mundo! 32 | Este é o meu primeiro aplicativo! 33 | 34 | ) 35 | } 36 | ``` 37 | 38 | ## questoes[4].resposta 39 | 40 | Sabe aquele tipo de discussão inútil entre devs? Este é um bom exemplo. Dentro do contexto, os dois desenvolvedores estão certos, é somente uma questão de preferência. 41 | -------------------------------------------------------------------------------- /Capítulo 04 - Criando os primeiros componentes/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercícios 2 | 3 | ## questoes[0].titulo = "Cheio de classe" 4 | 5 | Crie um componente de classe com o nome que renderize na tela a frase: `Eu estou aprendendo React Native cheio de classe.` 6 | 7 | ## questoes[1].titulo = "Classe para quê?" 8 | 9 | Cite 3 diferenças entre componentes funcionais e de classe. 10 | 11 | -------------------------------------------------------------------------------- /Capítulo 04 - Criando os primeiros componentes/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## questoes[0].resposta 4 | 5 | Insira o código abaixo no seu arquivo principal (`App.js`) 6 | 7 | ``` javascript 8 | class ClassReact extends React.Component { 9 | render() { 10 | return ( 11 | Isso é um componente de classe. 12 | ) 13 | } 14 | } 15 | ``` 16 | ## questoes[1].resposta 17 | 18 | Três diferenças que podem ser citadas são que nos componentes de classe: 19 | 1 - É necessário implementar o método `render()`; 20 | 2 - Precisamos extender a classe `Component` do React; 21 | 3 - Para usar as propriedades é preciso acessar o objeto `this`. -------------------------------------------------------------------------------- /Capítulo 05 - Componentes estilizados (CSS-in-JS)/exercicio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/react-native/e5794938eb6f2503142073f56b637053fc698fa1/Capítulo 05 - Componentes estilizados (CSS-in-JS)/exercicio1.jpg -------------------------------------------------------------------------------- /Capítulo 05 - Componentes estilizados (CSS-in-JS)/exercicios.md: -------------------------------------------------------------------------------- 1 | ## Exercício 1 - Tá me copiando!? 2 | 3 | Crie um componente de função que renderize a seguinte tela. 4 | 5 | ![Imagem do Exercício 1](exercicio1.jpg) 6 | 7 | Não se esqueça de usar o StyleSheet para estilizar o componente. 8 | -------------------------------------------------------------------------------- /Capítulo 05 - Componentes estilizados (CSS-in-JS)/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Tá me copiando!? 4 | 5 | ``` js 6 | export default function() { 7 | return ( 8 | 9 | React Native 10 | 11 | ) 12 | } 13 | 14 | const styles = StyleSheet.create({ 15 | box: { 16 | flex: 1, 17 | backgroundColor: '#fff', 18 | alignItems: 'center', 19 | justifyContent: 'center', 20 | backgroundColor: 'black' 21 | 22 | }, 23 | frase: { 24 | backgroundColor: 'red', 25 | color: 'white', 26 | fontSize: 25, 27 | fontWeight: 'bold', 28 | paddingVertical: 10, 29 | paddingHorizontal: 20, 30 | borderRadius: 10 31 | } 32 | }) 33 | ``` -------------------------------------------------------------------------------- /Capítulo 06 - O básico de layouts com Flexbox/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercício 1 - Usando os poderes de mais de 8000 do Flexbox 2 | 3 | Crie um componente funcional que renderize a seguinte tela usando o Flexbox para posicionar os elementos. 4 | 5 | ![Imagem do Exercício 1](imagens/exercicio1.jpg) 6 | 7 | # Exercício 2 - Usando os poderes de mais de 8000 do Flexbox pela segunda vez 8 | 9 | Crie um componente de classe com o nome de FlexboxPower que renderize a seguinte tela usando o Flexbox para posicionar os elementos. 10 | 11 | ![Imagem do Exercício 2](imagens/exercicio2.jpg) -------------------------------------------------------------------------------- /Capítulo 06 - O básico de layouts com Flexbox/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Usando os poderes de mais de 8000 do Flexbox 4 | 5 | ``` js 6 | export default function() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ) 14 | } 15 | 16 | const styles = StyleSheet.create({ 17 | box1: { 18 | flex: 1, 19 | flexDirection: 'column', 20 | justifyContent: 'center', 21 | alignItems: 'stretch', 22 | }, 23 | box2: { 24 | width: 50, 25 | height: 50, 26 | backgroundColor: 'powderblue’, 27 | }, 28 | box3: { 29 | height: 50, 30 | backgroundColor: 'skyblue'. 31 | }, 32 | box4: { 33 | height: 100, 34 | backgroundColor: 'steelblue' 35 | } 36 | }) 37 | ``` 38 | 39 | # Exercício 2 - Usando os poderes de mais de 8000 do Flexbox pela segunda vez 40 | 41 | ``` js 42 | class FlexBoxPower extends React.Component { 43 | render() { 44 | return ( 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | } 53 | 54 | const styles = StyleSheet.create({ 55 | container: { 56 | flex: 1, 57 | flexDirection: 'column', 58 | justifyContent: 'center', 59 | alignItems: 'stretch' 60 | }, 61 | box1: { 62 | width: 60, 63 | height: 60, 64 | backgroundColor: 'powderblue' 65 | }, 66 | box2: { 67 | width: 60, 68 | height: 60, 69 | backgroundColor: 'skyblue' 70 | }, 71 | box3:{ 72 | height: 60, 73 | backgroundColor: 'steelblue' 74 | } 75 | }) 76 | 77 | ``` 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /Capítulo 06 - O básico de layouts com Flexbox/imagens/exercicio1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/react-native/e5794938eb6f2503142073f56b637053fc698fa1/Capítulo 06 - O básico de layouts com Flexbox/imagens/exercicio1.jpg -------------------------------------------------------------------------------- /Capítulo 06 - O básico de layouts com Flexbox/imagens/exercicio2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/react-native/e5794938eb6f2503142073f56b637053fc698fa1/Capítulo 06 - O básico de layouts com Flexbox/imagens/exercicio2.jpg -------------------------------------------------------------------------------- /Capítulo 07 - Renderização Condicional/exercicios.md: -------------------------------------------------------------------------------- 1 | # Exercício 1 - Divide ou não divide? 2 | 3 | Crie um componente funcional que verifica se um número é divisível por 3. 4 | 5 | # Exercício 2 - Divide entre vários? 6 | 7 | Crie um componente funcional que verifica se um número é divisível por 2 e 3. -------------------------------------------------------------------------------- /Capítulo 07 - Renderização Condicional/gabarito.md: -------------------------------------------------------------------------------- 1 | # Gabarito 2 | 3 | ## Exercício 1 - Divide ou não divide? 4 | 5 | ``` js 6 | export default props => 7 | 8 | {verificaDivisivel3(props.num)} 9 | 10 | 11 | function verificaDivisivel3(num) { 12 | return numero % 3 == 0 13 | ? O número é divisível por 3 14 | : O número não é divisível por 3 15 | } 16 | ``` 17 | 18 | ## Exercício 2 - Divide entre vários? 19 | 20 | Crie um componente funcional que verifica se um número é divisível por 2 e 3. 21 | 22 | ``` js 23 | export default props => 24 | 25 | {verificaDivisivel2e3(props.num)} 26 | 27 | 28 | function verificaDivisivel2e3(num) { 29 | return numero % 2 == 0 && numero % 3 == 0 30 | ? O número é divisível por 2 e 3 31 | : O número não é divisível por 2 e 3 ao mesmo tempo 32 | } 33 | ``` -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | logo 3 | 4 | 5 | React Native - Desenvolvimento de aplicativos mobile com React 6 | ====================== 7 | Repositório oficial do livro: React Native - Desenvolvimento de aplicativos mobile com React 8 | 9 | cover 10 | 11 | Seja muito bem-vindo a era do React! Hoje não utilizamos o React somente para escrever aplicações web, mas também para criar ambientes tridimensionais imersivos (react360), aplicações desktop robustas e, é claro, aplicações mobile através do React Native! Neste repositório, você encontrará todos os recursos disponíveis para acompanhar a leitura do livro "React Native - Desenvolvimento de aplicativos mobile com React". 12 | 13 | Como estudar 14 | ------ 15 | Este repositório está dividido da mesma maneira que o livro. Cada diretório corresponde a um capítulo do livro e possui pelo menos dois arquivos: 16 | * exercicios.md 17 | * gabarito.md 18 | 19 | Após ler o capítulo no livro, acesse os exercícios do capítulo correspondente e tente resolvê-los. Você pode desenvolvê-los preferencialmente na sua máquina local em um aplicativo específico para os exercícios. Se conseguir resolver, continue treinando! Caso trave ou tenha algum problema, você pode consultar o gabarito. Lá você encontrará a solução recomendada para o problema (normalmente existem inúmeras soluções para um único problema, colocamos apenas uma sugestão de solução que segue as boas práticas apresentadas no livro). 20 | 21 | Bons códigos! 22 | 23 | Obrigado! 24 | 25 | Dados do livro 26 | ------ 27 | **Número de páginas:** 185 28 | 29 | **ISBN:** 978-65-86110-09-8 30 | 31 | ------ 32 | Tendo algum dúvida, crítica, sugestão ou até mesmo encontrar um erro, não hesite em entrar em contato! Também fique a vontade para fazer um fork neste projeto e fazer sugestões de exercícios. 33 | 34 | **React Native - Desenvolvimento de aplicativos mobile com React** © 2020, Diego Martins de Pinho e Bruna de Freitas Esculedario. Publicado pela editora [Casa do Código](https://www.casadocodigo.com.br/). Todos os direitos reservados. 35 | 36 | > Site oficial [livroreactnative.com.br](https://livroreactnative.com.br/)  ·  37 | -------------------------------------------------------------------------------- /cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/react-native/e5794938eb6f2503142073f56b637053fc698fa1/cover.png -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DiegoPinho/react-native/e5794938eb6f2503142073f56b637053fc698fa1/logo.png --------------------------------------------------------------------------------