learn-alura-imersao-react-00-agenda

.


Crie uma aplicação web com React, do zero!
5 aulas exclusivas e inéditas!
Totalmentegratuito De 27 a 31 de julho Crie e coloque no ar sua aplicação web com React Aviso das aulas no email e Comunidade exclusiva no Discord! Professores incríveis, dá só uma olhada mais pra baixo! Requisitos: conhecimentos em JavaScript Perguntas frequentes	TRAILER

Aulas práticas todos os dias


Dia 1	Dia 2	Dia 3
O que é React e componentes Entender a popularização do React, componentes, Create React App, Styled Components e fazer o primeiro deploy	Roteamento e State Aprender sobre as páginas no estilo SPA, as vantagens do State e criação de um carrossel para os vídeos	Formulários reutilizáveis e mais componentes Explorar a fundo a criação de componentes, reutilizar lógicas comuns com hooks e criar campos de formulários animados

Dia 4	Dia 5
AJAX e Validação Entender o protocolo HTTP, aprender como enviar e buscar dados de um back-end, adicionar suporte de validação em nossos campos e colocar a cópia do seu projeto no ar	Formulário de cadastro e remoção de vídeos Finalizar o cadastro de vídeos, configurar remoções e conhecer melhor o mercado de React

Lives


24 de julho	29 de julho	4 de agosto
Analisando o front-end do Netflix, do Spotify e do Ifood	TypeScript no nosso projeto React, com Lucas Santos da Microsoft	Analise dos desafios propostos em React e fechamento

Speedrun que vai do zero ao projeto com DevSoutinho

Assista o Hipsters.Tube sobre React

Ouça o podcast sobre Guia do Iniciante em React

Ouça o podcast sobre Angular vs React

Recursos

Aula 05

Gerenciamento de videos com React e JavaScript

Assista a Quinta Aula agora mesmo!

Pra fechar nosso projeto, vamos implementar a funcionalidade que tornará possível o cadastro de novos vídeos! E ver como atualizar a nossa home dinamicamente de acordo com o que for cadastrado :)

Desafios

Implementar a funcionalidade de edição e de exclusão também!

Conteúdo detalhado dessa aula

Cadastro de vídeos
Reuso para reuso de lógicas de state
Deixando a Home dinâmica
Fazendo as categorias aparecerem
Cadastrando vídeos

Links importantes para você acompanhar

Embed dos videos

http://localhost:8080/categorias?_embed=videos

Delete

Via terminal:

$ curl -X DELETE "http://localhost:8080/categorias/6"

Via app:

Aula 04

Ajax, validação e o back-end

Assista a Quarta Aula agora mesmo!

Você estava com vontade de ouvir as palavras back-end e fullstack, não é? Bem, tem muitas surpresas nessa aula!

Nós vamos construir um servidor "portátil" e um banco de dados local: nossa aplicação agora vai ficar muito parecido com uma do mundo real.

Além disso, iremos fazer a animação do nosso campo de formulário no estilo Netflix!

Conteúdo detalhado dessa aula

Garantindo padrões de código com EsLint
Configurando o nosso servidor portátil com json-server

Desafios dessa aula!

Variar a animação do form com a propriedade transform
Tentar cadastrar uma categoria

Links importantes para você acompanhar a aula

Como compartilhar sua própria AluraFlix

plugin do Chrome

Desafio extra: API Alura

Ei, a Alura tem diversas APIs. Uma pública e outra para alunos. Que tal criar algo muito bacana e mostrar seus cursos favoritos, ou talvez só os concluídos, além do video da primeira aula? Pode até virar uma ideia de implementação de dashboard extensível na Alura!

Cadastro

Via terminal:

$ curl -X POST -H "Content-Type: application/json" -d '{
	"titulo": "Nasa",
	"cor": "6BD1FF",
	"link_extra": {
    "text": "Nasa Docet",
    "url": "https://www.nasa.gov/"
  }
}' "http://localhost:8080/categorias"

Via app:

const handleSubmit = (e) => {
    e.preventDefault();

    const dataToSend = {
      titulo: values.titulo,
      cor: values.cor,
      link_extra: {
        text: values.description,
        url: values.url,
      },
    };

    const URL = window.location.hostname.includes('localhost')
      ? 'http://localhost:8080/categorias'
      : 'heroku or whatever';
    fetch(URL, {
      method: 'POST', // or 'PUT'
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(dataToSend),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log('Success:', data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
    setCategorias([
      ...categorias,
      values,
    ]);
  };

Uploading JSON data Using Fetch

Aula 03

Formulários reutilizáveis e mais components

Assista a Terceira Aula agora mesmo! Conteúdo para esta aula<

Nessa aula, nós vamos entender como trabalhar com elementos dinâmicos na tela da nossa aplicação.

Links importantes para você acompanhar

Aula 02

Roteamento e state

Assista a Segunda Aula agora mesmo! Conteúdo para esta aula

Nessa aula aprenderemos a lidar com o state do React e entender o que é uma `SPA` (Single Page Application) além de dar mais vida para nossa `home` com mais efeitos visuais como o `carousel` de vídeos.

São poucos os casos que não precisamos da biblioteca react-router-dom em projetos feito com React, vamos explorar bons detalhes dessa bliblioteca e também aplicar um biblioteca para fazer o nosso carousel na home chamada react-slick.

Conteúdo detalhado dessa aula

Entender o que é um SPA;
Utilizaremos a react-router-dom para - controlar as rotas;
Entender a diferença entre a tag a e o component Link;
Como lidar com caminhos paths que não - existe, famoso 404;
Carousel com a react-slick;
Criaremos um template com o cabelho e o rodapé;
Como deixar sempre o footer embaixo na página;
Criação do formulário para casdastrar categoria;
E sempre faremos deploy da sua AluraFlix na Vercel.

Desafios dessa aula!

Colocar algo legal na página 404 (jogo da ImersaoGameDev ou Flappy Bird do Mario);

Links importantes para você acompanhar a aula

Links citados nessa aula

Conteúdos extras

Tire dúvidas ao vivo com Marco Bruno às 18:33 na twitch.tv

Aula 01

Aula 1 | React Components e AluraFlix

Assista a Primeira Aula agora mesmo! Conteúdo para esta aula

Na primeira aula, faremos o setup do nosso ambiente deixando o computador configuradinho para trabalhar com React e vamos entender porque essa ferramenta se tornou tão popular entre devs e o mercado de tecnologia.

Você vai aprender a usar a ferramenta Create React App, criar seu primeiro componente web e entender as vantagens de se trabalhar com os tais Styled Components.

No final da aula, você vai fazer o deploy da nossa aplicação web e terá o seu site publicado na internet!