Nesta Imersão, o objetivo foi criar uma aplicação com React, do zero! Uma App utilizando React para você marcar e listar seus vídeos e filmes do YouTube.
- Entender a popularização do React, componentes, Create React App, Styled Components e fazer o primeiro deploy!
- Aprender sobre as páginas no estilo SPA, as vantagens do State e criação de um carrossel para os vídeos.
- Explorar a fundo a criação de componentes, reutilizar lógicas comuns com hooks e criar campos de formulários animados.
- 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.
Nesta imersão eu realizei a PleiFlix, onde coloquei os conteúdos nos quais estou estudando, ainda tem mais conteúdos para catalogar, e serão realizados com o tempo.
- HTML
- CSS
- JavaScript
- Node.JS
- React.JS
- Create React App
- styled-components
- react-router-DOM
- react-slick (carousel)
- EsLint
-
Aula 01 | O que é React e componentes
- Nessa primeira aula de React finalizamos a home! E colocamos a PleiFlix no ar com Vercel. Usamos o Create React App para iniciar nosso projeto e styled-components para cuidar da camada de estilo da nossa aplicação, ferramentas essenciais do mundo React.
-
Aula 02 | Roteamento e State
- Nessa aula aprendemos 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, exploramos bons detalhes dessa biblioteca e também aplicar uma biblioteca para fazer o nosso carousel na home chamada react-slick. A Página 404 aprensenta a tela com o jogo desenvolvido na Imersão GameDev.
-
Aula 03 | Formulários reutilizáveis e mais componentes
- Nessa aula, entendemos como trabalhar com elementos dinâmicos na tela da aplicação.
-
Aula 04 | AJAX e Validação
- Nesta aula construimos um servidor "portátil" (com json-server) e um banco de dados local. Além disso, fizemos a animação do campo de formulário no estilo Netflix!
-
Aula 05 | Formulário de cadastro e remoção de vídeos
- Pra fechar o projeto, implementamos a funcionalidade que tornará possível o cadastro de novos vídeos! E ver como atualizar a home dinamicamente de acordo com o que for cadastrado.
- Vitrine Alura
- Como funciona o React?
- Dicas de VSCode
- Como criar um projeto com React Native
- O que todo projeto deveria ter?
- Estilização CSS
- Vercel, deploy
- Como centralizar um elemento na tela, CSS
- Aprenda forEach e map
- Layout do projeto no Figma
- Criando o FlappyBird com JavaScript
- Pare de chutar CSS
- GitHub airbnb
- GitHub json-server
- Como fazer validação com React
- Plugin de gravação do Chrome
Este projeto está sob a licença MIT.