https://github.com/adrianemaciel/aluratube

Evento disponibilizado pela Alura para desenvolver o AluraTube, um projeto em React
https://github.com/adrianemaciel/aluratube

imersaoreact reactjs

Last synced: 2 days ago
JSON representation

Evento disponibilizado pela Alura para desenvolver o AluraTube, um projeto em React

• Host: GitHub
• URL: https://github.com/adrianemaciel/aluratube
• Owner: adrianemaciel
• License: mit
• Created: 2022-11-08T02:23:59.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-11T00:47:14.000Z (about 2 years ago)
• Last Synced: 2024-11-11T10:45:58.292Z (2 months ago)
• Topics: imersaoreact, reactjs
• Language: JavaScript
• Homepage:
• Size: 38.1 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# IMERSÃO REACT - AluraTube

## AULA 01: A WEB, OS COMPONENTES E O DEPLOY.

- Criamos o projeto inicial com NextJS;

- Vimos NPM scripts;

- Entendemos como checar a versão do Node e que o NPM vem junto com o projeto;

- Utilizamos o npx gitignore node para gerar o gitignore do projeto;

- Vimos a criação de um componente com React;

- Vimos como trabalhar com estilos no React;

- Como trabalhar com StyledComponents;

- Vimos como usar Props no React;

- Vimos sobre o children do React;

- Ao final pegamos o CSS já pré-criado pelo DevSoutinho, adicionamos no nosso projeto e seguimos com os desafios.

## AULA 02: ENTENDENDO STATE E FAZENDO A BUSCA DO ALURATUBE

- Criamos o nosso search.js;

- Aprendemos sobre State;

- Vimos o conceito de Prop-drilling;

- No final, criamos o banner utilizando Styled Components e passando Props por ele.

## AULA 03: IMPLEMENTANDO DARK MODE COM CONTEXTAPI

- Começamos olhando o Design Systems;

- Falamos sobre a importância de ter contratos de cores e valores de Design;

- Criamos o componente Dark Mode Switch;

- Criamos um state local no nosso componente de Dark Mode Switch;

- Começamos a trabalhar esse state para não fazer Prop Drilling e sim ter um contexto que nos permite acessar os dados de forma "global";

- E por fim, um Provider que configura quais dados vão estar disponíveis no contexto.