React para Iniciantes - para quem quer aprender na prática
4.5 (64 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
412 students enrolled

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

Criando um jogo de perguntas e respostas com React e Firebase
4.5 (64 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
412 students enrolled
Created by Reginaldo Santos
Last updated 10/2018
Portuguese
Current price: $16.99 Original price: $24.99 Discount: 32% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9 hours on-demand video
  • 2 articles
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Expand all 59 lectures 08:50:37
+ Introdução
8 lectures 28:57

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.


Preview 04:12

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.

Preview 03:57
O que é React?
05:45
Props
03:23
State e Virtual DOM
06:29
Como instalar as ferramentas necessárias para este curso
04:33
+ Criando os componentes do jogo
13 lectures 02:14:05

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.

Criando o aplicativo inicial com React
11:41

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.

Organizando o conteúdo e criando a tela inicial
09:15
Alterando a biblioteca de leiaute do projeto
06:43
Finalizando o componente Início
09:21
Criando a lista de categorias
22:40

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.

Criando o componente Categoria
08:31
Tornar o componente Categoria, reutilizável
08:12
Criando o componente Perguntas
15:28

Utilizamos o componente Message para tornar as Perguntas, um componente muito mais objetivo e claro para o usuário que estiver jogando.

Melhorando o visual das Perguntas
04:52
Criando o componente Resultado
13:07
Criando o componente Respostas
11:48
Criando o componente Ranking
05:35
Criando o componente Usuário, que é utilizado no Ranking
06:52
+ Rotas e Navegação entre Telas
4 lectures 44:16
Criando as rotas
11:38
Implementando a navegação entre Telas
12:46
Organizando a navegação entre as telas do jogo
07:16
Criando o menu externo
12:36
+ Autenticação do usuário pelo Facebook
8 lectures 01:28:37
Criando o app no Facebook
11:23
Facebook Auth Provider
08:23
Autenticando no jogo com o Facebook
16:30
Exibindo o usuário logado
07:54
Atualizando barra de navegação com usuário logado
07:17
Deslogando o usuário Parte 1
12:39
Deslogando o usuário Parte 2
16:14

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.

Corrigindo o Logout
08:17
+ Teste: Criando a autenticação pelo Twitter
0 lectures 00:00
Agora que já temos autenticação com o Facebook, faça o mesmo com o Twitter.
Crie a autenticação com o Twitter
1 question
+ Criando o jogo
24 lectures 03:32:15
Criando a Tabela de Categorias no Firebase
06:32
Lista de Categorias conectada ao Firebase
17:21
Criando perguntas no banco de dados - Parte 1
05:33
Criando perguntas no banco de dados - Parte 2
07:26
Alterando o componente Categorias
05:51
Navegação com Parâmetros
03:38
Utilizando o axios para retornar as perguntas do Firebase
14:15
Resolvendo os dois problemas do componente Perguntas
10:54
Consultando as perguntas da categoria escolhida
05:13
Atualizando o componente Perguntas
16:32
Finalizando o componente Perguntas
10:35
Refatorando o componente Perguntas para mostrar uma pergunta por vez
10:40
Navegação entre Perguntas
13:04
Capturando a resposta do Jogador
15:26
Verificando se o jogador acertou
07:18
Armazenando a pontuação do jogador no state
04:48
Corrigindo o erro de respostas iguais
03:17
Gravando todas as respostas no State do componente Perguntas
08:22
Enviando as respostas para o componente Respostas
14:08
Componente Resposta exibindo as respostas do jogador
17:09
Exibindo o resultado e informando se o jogador acertou ou não as perguntas
04:53
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