Breve Apresentação do Curso
  • Apresentação
Sobre o Curso
  • Objetivos
  • Formato
  • Pré-requisitos
Conceitos Fundamentais do React
  • O que é o React
  • O que é o React Native
  • Elementos de HTML e Componentes de React
  • Convenções do React (vs HTML)
  • ECMAScript 2015
  • Novas Características do ES6
  • Características do ES6 em Exemplo
  • O que é JSX
  • JSX e React.createElement()
  • O Método render()
  • O Conceito de Props
  • O Conceito de State
  • LikeButton e seu Estado
  • Tipos de Componentes
  • Links dos Exemplos no Codesandbox
Guia de Instalação (Node e Expo no Dispositivo)
  • Guia de Instalação (Node e Expo no Dispositivo)
  • Aviso: expo-cli substitui o create-react-native-app
  • [macOS] Instalando o Node com o NVM
  • [macOS] create-react-native-app
  • [macOS] Rodando o Servidor de Desenvolvimento
  • [macOS] Expo no Próprio Dispositivo Móvel
  • [Windows] Instalando o Node com o nvm-windows
  • [Windows] create-react-native-app
  • [Windows] Rodando o Servidor de Desenvolvimento
  • [Windows] Expo no Próprio Dispositivo Móvel
  • Guia de Instalação para Linux (Ubuntu)
Guia de Instalação (Emulador do Android)
  • Guia de Instalação (Emulador do Android)
  • [macOS] Rodando Emulador do Android (watchman, react-native-cli)
  • [macOS] Instalando JDK e Android Studio
  • [macOS] Configurando Android Studio e Instalando Pacotes
  • [macOS] ANDROID_HOME e Gerando Projeto com react-native init
  • [macOS] Criando um AVD
  • [macOS] Rodando App no Emulador (create-react-native-app)
  • [macOS] Rodando App no Emulador (react-native)
  • [macOS] Rodando o Emulador Usando Terminal
  • [Windows] Guia Para Rodar Emulador do Android
  • [Windows] Instalando o Python2 e JDK 8
  • [Windows] Instalando o Android Studio
  • [Windows] Configurando o Android Studio
  • [Windows] Setando o ANDROID_HOME
  • [Windows] Instalando o react-native-cli
  • [Windows] Abrindo Projeto no Android Studio e Criando um AVD
  • [Windows] Rodando o Emulador do Android
Projeto 1: Arco-íris
  • Introdução
  • Link Para o Repositório do Projeto 1
  • Geração do Projeto
  • Visão Geral do Projeto de Amostra
  • Componente App do Zero
  • Cor de Fundo Vermelha
  • Folha de Estilos com o StyleSheet.create
  • Retornando Dois Componentes
  • Número de Flex
  • O Método Map do JavaScript
  • Gerando Componentes Multicoloridos
  • As Sete Cores do Arco-Íris
  • Estado Inicial do Componente
  • Modificando o Estado de um Componente
  • O Método setInterval do JavaScript
  • Método de Ciclo de Vida: componentDidMount
  • Revisão Geral do Projeto
Bônus: Projeto 1 - Arco-íris
  • Nota Sobre Bonus - Projeto 1
  • Projeto 1 - Usando Folha de Estilo Dinamicamente
  • Link Para o Repositório do Bônus Projeto 1
Flexbox
  • Introdução (Flexbox)
  • Snack
  • Revisão de Style - Visão Geral
  • Revisão de Style - Exemplos
  • Dimensões Fixas - Visão Geral
  • Dimensões Fixas - Exemplo
  • Dimensões Flex - Visão Geral
  • Dimensões Flex - Exemplo
  • O Componente Text
  • A Direção Flex
  • Alinhamento ao Longo do Eixo Principal (Parte 1)
  • Alinhamento ao Longo do Eixo Principal (Parte 2)
  • Alinhamento ao Longo do Eixo Transversal
  • Alinhamento de Ítens
  • Link dos Exemplos no Snack
Projeto 2: Revvista Nativva
  • Introdução (Revvista Nativva)
  • Link Para o Repositório do Projeto 2
  • Visão Geral da Implementação
  • Início do Desenvolvimento
  • Maneiras de Rodar o App
  • Rodando o Aplicativo (iOS)
  • (Opcional) Rodando no iOS (Debug o Problema do Expo)
  • Rodando o Aplicativo (Android)
  • Vista Exterior