🤿 Imersão ReactJS 🤿
Alura

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.

👨‍💻 Tecnologias utilizadas

• HTML
• CSS
• JavaScript
• Node.JS
• React.JS
  • Create React App
  • styled-components
  • react-router-DOM
  • react-slick (carousel)
  • EsLint

🚀 O que foi visto nas aulas

• 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.

📑 Vídeos e Conteúdos extras das aulas

• 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

📝 Licença

Este projeto está sob a licença MIT.

Made with by Pleiterson Amorim