Olá, Gabriel. Como vai?
É muito bacana ver o seu interesse em construir a base do projeto do zero antes de aplicar o gerenciamento de estados. Essa iniciativa de entender a estrutura de componentes e o HTML/CSS por trás do app ajuda muito a fixar onde o Redux e a Context API realmente entram para resolver os problemas de arquitetura.
Para te situar sobre a origem desse repositório: o projeto React Study Planner (um organizador de estudos) foi desenvolvido especificamente para servir de base prática para este curso de Redux e Context API. Ou seja, não existe um curso anterior na Alura onde este projeto exato tenha sido construído passo a passo.
A equipe de instrução criou a estrutura visual dele previamente para que o foco do curso atual fosse 100% voltado para a arquitetura de dados globais, evitando gastar tempo de tela com estilização ou criação de componentes simples.
Como fazer o projeto "do zero" mesmo assim?
Se você deseja praticar a criação dele antes de entrar no Redux, uma excelente estratégia é usar o próprio repositório inicial como o seu "gabarito design". Você pode fazer o seguinte:
- Analise os Componentes: Abra a pasta
src/components do repositório. Lá você verá como componentes como o formulário, as listas e os cartões de tarefas foram divididos. - Crie uma nova aplicação: Rode o comando de inicialização do React na sua máquina (utilizando o Vite ou a ferramenta de sua preferência) e tente recriar esses componentes olhando o código do repositório apenas como referência para o HTML e o CSS.
- Pratique Prop Drilling primeiro: Uma ótima dica de estudo é tentar fazer esse projeto funcionar usando apenas o estado local do React (
useState) passando as informações de pai para filho via props.
Quando o seu projeto estiver funcionando com props, você começará a notar o quanto o código fica poluído quando precisamos enviar dados para componentes muito distantes. Esse será o momento perfeito para você voltar para as aulas de Redux e Context API, pois você sentirá na pele a dor que essas ferramentas foram criadas para resolver!
Cursos Recomendados para Base
Caso você sinta que precisa passar por um curso passo a passo de criação de componentes e estilização com React antes de avançar, os cursos que servem de alicerce para essa estrutura são:
- React: desenvolvendo em JavaScript (onde é construído o projeto Organo do zero).
- React: como os componentes funcionam (focado no ciclo de vida e organização de pastas).
Qualquer uma dessas duas jornadas vai te dar exatamente a bagagem necessária para entender como toda a estrutura do Study Planner foi montada.
Espero que possa ter lhe ajudado!
