React para Iniciantes - para quem quer aprender na prática

Name: React para Iniciantes - para quem quer aprender na prática
Rating: 4.3 (73 reviews)

Criando um jogo de perguntas e respostas com React e Firebase

Created byReginaldo Santos

Last updated 10/2018

Portuguese

What you'll learn

aprenda a criar componentes com React, usar o Firebase para conectar a banco de dados, fazer autenticação usando o Facebook e publicar o app em produção
crie um jogo divertido de perguntas e respostas com Javascript / ReactJS

Course content

7 sections • 59 lectures • 8h 50m total length

Introdução4:12
Este curso é um excelente ponto de partida para você que quer aprender programar, conhece Javascript mas ainda não conhece o React. Venha aprender na prática criando um jogo de Perguntas e Respostas no estilo Quiz. O jogo terá várias categorias de perguntas, e muitas perguntas por categorias além de um ranking dos melhores jogadores. Além disso, o sistema ainda vai contar com área administrativa, onde o usuário pode publicar novas categorias e novas perguntas para o jogo ficar ainda mais divertido.

Vamos utilizar o React.js como framework para desenvolvermos todo o aplicativo.

Vamos utilizar o Firebase para armazenarmos as informações (real time Database), como categorias, perguntas e o ranking de jogadores, controlar o acesso dos usuários administrativos e dos jogadores pelo Facebook (Authentication) e hospedagem do site (Hosting).

Vamos lidar com rotas dentro da aplicação, incluindo sub-rotas dentro da área administrativa.

Por falar em área administrativa, ela será protegida e apenas usuários cadastrados terão acesso.

O jogo em si será registrado no Facebook for Developers para habilitar o login com conta do facebook.
Ao final do curso, você terá um jogo funcional, com painel administrativo seguro, hospedado na nuvem.
Faça parte da nossa comunidade no Slack0:14
AVISO IMPORTANTE0:24
Visão Geral do jogo3:57
Nesta aula, vamos conhecer o wireframe das telas do jogo, para ter uma ideia de como será toda a 'logística' do game.
Uma tela com as categorias em diferentes áreas de conhecimento
Uma tela com as perguntas onde o jogador deverá escolher a alternativa correta
Uma tela com o resumo e o desempenho do jogador, onde ele verá as perguntas que ele acertou e as que ele errou
Uma tela com o ranking de jogadores, mostrando os melhores jogadores
A Área Administrativa.
O que é React?5:45
Props3:23
State e Virtual DOM6:29
Como instalar as ferramentas necessárias para este curso4:33

Criando o aplicativo inicial com React11:41
Vamos utilizar o create-react-app para criar o bootstrap da aplicação, com as dependências iniciais do React. Em seguida, abrimos o Visual Studio Code com o projeto e inicializamos o servidor, para ver a tela de boas vindas do React.
Passamos pelos arquivos já criados e eu explico para que cada um serve, como eles funcionam.
Organizando o conteúdo e criando a tela inicial9:15
Organizando as telas do aplicativo por Áreas (área do jogo, área administrativa, tela inicial).
Logo em seguida, iniciamos o começo da criação do componente que será responsável por renderizar a tela inicial, para os usuários que ainda não estiveram logados.
Alterando a biblioteca de leiaute do projeto6:43
Finalizando o componente Início9:21
Criando a lista de categorias22:40
Criando o componente Categoria8:31
Para facilitar na manutenção, vamos fazer reuso de um componente de Categoria para a lista de Categorias. Vamos receber props (as propriedades) passadas da Lista para cada Categoria individual e assim, personalizar cada uma das categorias de forma dinâmica.
Tornar o componente Categoria, reutilizável8:12
Criando o componente Perguntas15:28
Melhorando o visual das Perguntas4:52
Utilizamos o componente Message para tornar as Perguntas, um componente muito mais objetivo e claro para o usuário que estiver jogando.
Criando o componente Resultado13:07
Criando o componente Respostas11:48
Criando o componente Ranking5:35
Criando o componente Usuário, que é utilizado no Ranking6:52

Criando o app no Facebook11:23
Facebook Auth Provider8:23
Autenticando no jogo com o Facebook16:30
Exibindo o usuário logado7:54
Atualizando barra de navegação com usuário logado7:17
Deslogando o usuário Parte 112:39
Deslogando o usuário Parte 216:14
Corrigindo o Logout8:17
Antes de seguir em frente e começar a criar o jogo em si, vamos pegar um tempo para fazer uma limpeza e melhorar a performance do app, pois existem elementos que estamos utilizando e não temos a necessidade.
Além disso, vamos deixar a barra de navegação mais bonita.

Criando a Tabela de Categorias no Firebase6:32
Lista de Categorias conectada ao Firebase17:21
Criando perguntas no banco de dados - Parte 15:33
Criando perguntas no banco de dados - Parte 27:26
Alterando o componente Categorias5:51
Navegação com Parâmetros3:38
Utilizando o axios para retornar as perguntas do Firebase14:15
Resolvendo os dois problemas do componente Perguntas10:54
Consultando as perguntas da categoria escolhida5:13
Atualizando o componente Perguntas16:32
Finalizando o componente Perguntas10:35
Refatorando o componente Perguntas para mostrar uma pergunta por vez10:40
Progress bar nas perguntas2:17
Navegação entre Perguntas13:04
Capturando a resposta do Jogador15:26
Verificando se o jogador acertou7:18
Armazenando a pontuação do jogador no state4:48
Corrigindo o erro de respostas iguais3:17
Gravando todas as respostas no State do componente Perguntas8:22
Enviando as respostas para o componente Respostas14:08
Componente Resposta exibindo as respostas do jogador17:09
Exibindo o resultado e informando se o jogador acertou ou não as perguntas4:53
Imprimindo a quantidade de pontos que o jogador fez nesta jogada6:00
Próximos passos1:03

Requirements

Basta um computador com acesso a internet, e permissão para instalar as ferramentas que iremos utilizar

Description

Que tal aprender o framework javascript mais famoso da atualidade, em aulas práticas, de curta duração e construindo um jogo de perguntas e respostas? Este curso vai preparar você para criar e publicar aplicativos utilizando o React.js e o Firebase.

Vamos aprender:

JSX
Rotas
Autenticação
- Usando Email e senha
- Usando o Facebook
- Usando o Twitter (desafio)
Armazenamento Real Time
Hospedagem do aplicativo final

Este projeto não foi ensaiado em laboratório e, assim como na vida real, erros acontecem durante o desenvolvimento. Eu ensino a como lidar com os erros inesperados, explicando o motivo pelo qual eles ocorreram e como encontramos a solução para corrigi-los e seguir em frente.

Uma ótima oportunidade, vem aprender conosco.

Who this course is for:

Desenvolvedores Javascript com pouca experiência, que quer aprender um novo 'framework' e quer progredir na carreira de desenvolvedor web Front End.
Desenvolvedores de jogos que queiram aprender a criar um jogo utilizando javascript / ReactJS
Não cobrimos Redux neste curso, para focar bastante no React mesmo

React para Iniciantes - para quem quer aprender na prática

What you'll learn

Explore related topics

Course content

Introdução8 lectures • 29min

Criando os componentes do jogo13 lectures • 2hr 14min

Rotas e Navegação entre Telas4 lectures • 44min

O Firebase2 lectures • 22min

Autenticação do usuário pelo Facebook8 lectures • 1hr 29min

Teste: Criando a autenticação pelo Twitter0

Criando o jogo24 lectures • 3hr 32min

Requirements

Description

Who this course is for: