Do Zero ao React para iniciantes - [atualizado abr/2020]
4.1 (323 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.
1,001 students enrolled

Do Zero ao React para iniciantes - [atualizado abr/2020]

React, autenticação, rotas, Redux Thunk, Logger em vários projetos
4.1 (323 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.
1,001 students enrolled
Created by Reginaldo Santos
Last updated 4/2020
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
  • 18 hours on-demand video
  • 4 articles
  • 1 downloadable resource
  • 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
  • Iremos construir um site para empresas, com área administrativa, login do administrador e que faz upload de imagens
  • 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
  • Quer entender o que é o React e o que é JSX, este é o lugar certo
  • Crie um jogo divertido de perguntas e respostas com Javascript / ReactJS
  • Utilizar Redux e seus complementos Redux-thunk e Redux-Promise
  • Criar aplicativos completos utilizando React e Redux
  • Código fonte de todos os aplicativos disponíveis em cada sessão
Course content
Expand all 140 lectures 18:08:27
+ Introdução
7 lectures 24:49

Este curso é um excelente ponto de partida para você que sabe desenvolver sites, conhece Javascript mas ainda não conhece o React. Venha aprender na prática transformando um site HTML estático em um sistema com área administrativa, onde o usuário pode publicar novos itens com imagens e o site reflete estes ítens.

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

Vamos utilizar o Firebase para armazenarmos as informações (real time Database), publicarmos as fotos (Storage), controlar o acesso dos usuários administrativos (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.

Ao final do curso, você terá um site funcional, com painel administrativo seguro, hospedado na nuvem.

Preview 01:46
Como instalar as ferramentas necessárias para este curso
04:33

Nesta curso, vamos criar passo a passo um site em React baseado em um template HTML/CSS.
Vamos trabalhar em aulas de curta duração para facilitar o entendimento.
O site terá várias páginas, com rotas para navegação, e a página de Portfolio será carregada através de uma área administrativa, com seu conteúdo gravado no Firebase.

Ao final do curso, vamos publicar o site no próprio Firebase.

Preview 02:39

Antes de colocarmos a mão na massa (no código), vamos entender um pouco de conceito:

O que é React

O que é JSX

O que são Componentes

O que é React?
05:45
Props
03:23
State e Virtual DOM
06:29
+ Criando o site
11 lectures 01:07:14

Nesta aula, vou ensinar como converter HTML para JSX, a linguagem que o React entende e é muito próximo do HTML.
Vamos entender quais ajustes são necessários e no que temos que prestar atenção durante a conversão.
Como organizar o CSS em um arquivo a parte e importar o bootstrap e duas fontes do Google Fonts, para sermos o mais fiel possível ao template original

Convertendo HTML para JSX
16:43

Após convertermos o HTML para JSX, vamos conferir o nosso componente e fazer um último ajuste, importá-lo no App e testar para vermos como ficou.

A partir de agora, já temos o nosso site totalmente convertido em React.js.

Ajustes finais no nosso primeiro componente
05:10

Nesta aula começamos a recortar o componente em pedaços menores para que eles possam ser reutilizados.

O primeiro é o Rodapé, um componente bem pequeno e simples, um candidato ideal para iniciarmos por ele.

Criando o componente Rodapé
05:48

Desta vez, criaremos o componente Cabeçalho, que vai ser responsável pela navegação do aplicativo, mas o faremos de maneira bem básica, simplesmente retirando do componente Site para o seu próprio componente. Ainda voltaremos aqui mais vezes para alterá-lo conforme criamos o restante do aplicativo.

Preview 04:40

Chegamos a Home page do nosso site, criando o componente Inicio. 

Até aqui, bastante repetição para deixar todo mundo bem a vontade com os comandos do React.

Criando o componente Inicio
05:21

Deixando a navegação para a próxima aula ainda, criaremos o componente Serviços. A partir de agora, teremos o Início (Home Page) e o Serviço, como dois componentes distintos.

Criando o componente Serviços
04:06

Chegamos na aula tão esperada, onde criaremos as primeiras rotas do aplicativo.
Já podemos, manualmente, navegar entre as páginas de Inicio e Serviços.
Nesta aula, eu explico porque precisamos usar o exact na roda raiz "/".
Daqui para frente, o site vai ganhando forma

Criando as rotas
08:08

Nesta aula, vamos implementar a navegação automática para as rotas que já criamos. Substituiremos a tag <a> , de link, pelo componente de navegação da biblioteca react-router-dom e deixaremos tudo muito mais agradável de usar.

Criando a navegação para as rotas
05:53

Nesta aula, criaremos o componente Portfolio (ainda estático, isto é, sem integração com banco de dados) e já o adicionaremos na rota.

Este componente tem papel fundamental neste curso, pois será ele o componente que será tratado na área administrativa, e receberá conteúdo do banco de dados, incluindo imagens.

Preview 04:04

Continuando o desenvolvimento do site, criaremos agora o componente de Preços, e já o adicionaremos nas rotas

Criando o componente Preços
02:38

Finalizaremos a primeira fase do curso com um site totalmente funcional, desenvolvido em React.js, adicionando o componente de Contato, o famoso Fale Conosco.

Criando o componente Contato
04:43
+ Iniciando a área administrativa
14 lectures 02:02:52

Com o site pronto e funcionando, é chegada a hora de planejarmos a Área Administrativa.

Iniciando a área administrativa
02:38

Vamos desenvolver o primeiro componente da nossa área administrativa, ele vai servir como base para todo o Painel Administrativo que virá.

Criando o component Admin
03:28

O nosso próximo componente vai gerenciar todas as opções e os links da área administrativa.

Criando o component Admin Menu
08:35

Preparando o formulário para o cadastro de itens de portfólio. Na área administrativa, cada Componente terá o seu próprio formulário para publicar itens diretamente no site.

Criando o component Admin Portfolio
06:14

Finalmente, depois de um longo percurso no desenvolvimento deste aplicativo, chegamos no Firebase.
Nesta aula, eu crio uma conta no Firebase e mostro os principais recursos, focando sempre naqueles que iremos utilizar no restante do projeto.

Apresentando o Firebase
05:44

Vamos colocar a mão na massa (ou no Firebase). Nesta aula, vamos criar o arquivo de configuração que será o responsável pelos IDs e todo o acesso, além de já configurar o acesso ao banco de dados.

Criando o config para o Firebase
09:58

Agora vamos alterar o Portfolio para conectar com o banco do Firebase e exibir todos os itens de Portfólio que foram cadastrados diretamente no banco.

Refatorando o componente Portfólio para usar o Firebase
09:24

Agora é hora de vermos o potencial do Firebase em ação na nossa aplicação. Sincronizaremos o estado (state) do componente Portfolio com o banco no Firebase e a mágica acontece.

Sincronizando o componente Portfolio com o Firebase
19:24

Para não deixar coisas para trás, vamos dar um pouco de atenção as imagens que vão representar cada item de portfolio e já carregar no banco de dados do Firebase

Imagem no banco de dados
09:34

Voltando para a área administrativa, criaremos agora o formulário de cadastro de portfólio e nos preocuparemos com o upload de imagens para o Firebase.

Criando o formulário de cadastro de portfolio
07:07

Na aula anterior, criamos o formulário de cadastro de itens de Portfólio e agora vamos preparar os itens para em seguida gravarmos no banco de dados no Firebase

Formulário de Portfolio preparando para gravar no banco de dados
10:55

Vamos trabalhar com o Storage do Firebase, fazendo upload da imagem do nosso formulário

Fazendo upload da imagem salvando no storage
14:32

Depois de bastante trabalho, finalmente chegaremos no cadastro final de itens de portfolio. A partir de agora, usaremos o nosso formulário na área administrativa para gravar novos itens, já com as imagens, diretamente no Firebase.

Salvando o portfolio no banco de dados
11:35

Nesta aula, vamos acrescentar o componente Link do react-router-dom para lidar com o link Portfólio da Área Administrativa.

Corrigindo link Portfólio Admin
03:44
+ Autenticação do usuário Administrativo
7 lectures 01:03:18

Para protegermos as rotas administrativas, teremos que ter um usuário logado no sistema, com permissão de alteração. Vamos criar agora o formulário de Login para fazermos esta proteção

Criando o formulário de Login
07:13

Uma vez o formulário criado, vamos conectar os dados de formulário com o estado do componente (state). Vamos fazer de uma maneira um pouco diferente do formulário de cadastro de novos itens de portfólio, para mostrar que existem maneiras diferentes de se lidar com formulários com o React.

Conectando o form de Login
08:56

Nesta aula, vamos voltar ao Firebase para habilitar a autenticação, e com isso, atualizar o nosso arquivo de configuração do Firebase, para ele entender que iremos trabalhar com authentication.

Habilitando Autenticação no Firebase
06:34

Após criar o formulário de Login e configurar o método de autenticação no Firebase, nesta aula vamos ligar os pontos e fazer o nosso usuário se autenticar no aplicativo.

Autenticando no React
06:56

Agora que temos o usuário logado no app e já lidamos com os erros, vamos criar um estado (state) no componente para verificar se o usuário já está logado e direcioná-lo para a rota de Admin.

Finalizando o processo de autenticação
12:03

Nesta aula, vamos proteger a rota Admin para que apenas os usuários realmente logados (autenticados) possam ter acesso a Área Administrativa.

Protegendo rota Admin
08:40

Esta aula vai ser para revisar algumas coisas que deixamos para trás, alguns ajustes no site (app) antes de publicarmos ele em produção.

Spinners e ajustes
12:56
+ Publicação do site em Produção
2 lectures 24:17

Site completo, revisto e com tudo funcionando, chegou a hora de mover para Produção. Vamos utilizar o Firebase para hospedar o site, como não poderia ser diferente, já que estamos concentrando todos os serviços nesta ferramenta incrível.

Hospedando o site em Produção
17:40

Agradecendo a participação e a paciência de todos vocês durante todo este curso, segue todo o código fonte publicado no Github.

Disponibilizando o código fonte no Github
06:37
+ Criando os componentes do jogo
13 lectures 02:14:04
Criando o aplicativo com React
11:41
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
Criando o componente Categoria
08:30
Tornar o componente Categoria, reutilizável
08:12
Criando o componente Perguntas
15:28
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
+ O Firebase
2 lectures 22:27
Firebase: visão geral
13:46
Configurando o Firebase
08:41
+ Autenticação do usuário pelo Facebook
8 lectures 01:28:36
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:53
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
Corrigindo o Logout
08:17
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 site a partir de um template HTML? Este curso vai preparar você para criar qualquer outro site ou migrar do tradicional para o React.js.

Vamos aprender:

  • JSX

  • Props

  • State (stateful & stateless)

  • Rotas

  • Autenticação

    • Usando Email e senha

    • Usando o Facebook

    • Usando o Twitter (desafio)

  • Armazenamento Real Time

  • Storage (upload de arquivos)

  • O que é o Redux

  • Redux não depende do React

  • Redux com React

  • Middlewares (logger, chrome dev tool)

  • Redux síncrono

  • Redux assíncrono com redux-thunk

  • Redux assíncrono com redux-promise

  • Hospedagem do site final

E vamos ver tudo isso através de alguns projetos, como:

  • Xumestube (criando o seu próprio Youtube)

  • Conversão de Moeda (quanto está o Dólar hoje? E o Euro?) fique por dentro (inclui conversão de Bitcoin para qualquer moeda)

Uma ótima oportunidade, vem aprender conosco.

Who this course is for:
  • Desenvolvedores Javascript que querem ter prática utilizando o React js e Firebase
  • 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
  • Quer desenvolver o seu próprio Youtube? Vamos criar um sistema de busca de videos e reproduzi-los no nosso próprio app.