Escolha uma decisão de Revise JavaScript no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Tipifique os dados do projeto sem any e valide a resposta de uma API antes de usá-la. Peça à IA que explique um erro de tipo e confira a correção com o compilador, preservando strict.
Modele estados de carregamento, sucesso e falha com uma union discriminada. Valide dados externos em tempo de execução e demonstre um caso que o compilador sozinho não detecta.
Aprenda programação e uso de IA em paralelo. Escolha uma ferramenta a que já tenha acesso; os exercícios também funcionam em um chat, compartilhando trechos pequenos. Documentação gratuita não significa serviço gratuito: consulte os limites da sua conta. Você não precisa assinar nem dominar três ferramentas.
Escolha uma ferramenta
Obrigatório · Desenvolvimento com IA
Experimente uma opção neste momento. Para concluir esta etapa, basta abrir um exercício em uma ferramenta e localizar como conversar, fornecer contexto e revisar uma mudança.
Cursor: abra um projeto no editor, converse sobre um arquivo e forneça trechos ou arquivos como contexto. Peça uma alteração pequena, examine o diff e execute o exemplo.
Claude: use o chat com trechos fornecidos por você, ou Claude Code para trabalhar no projeto por terminal ou integrações de editor, se já tiver acesso. Siga o quickstart e peça uma explicação do repositório antes da primeira mudança.
Codex: consulte o quickstart e escolha a superfície disponível para sua conta, como aplicativo, editor ou terminal. Peça que explique o projeto e como executar o exercício; depois experimente uma mudança pequena.
Se ainda não tiver acesso a uma IA, siga os exercícios de programação e retome estas práticas quando uma opção estiver disponível.
Faça uma tentativa, peça uma explicação ou pista e confira o resultado executando o exemplo. Solicite perguntas e exercícios de revisão. Quando a IA gerar código, leia, altere e teste esse código. Conclua esta etapa após responder uma pergunta sobre o exemplo e resolver uma pequena variação.
Estou aprendendo [conceito] na trilha [nome].
Meu objetivo é [resultado pequeno e observável].
Já tentei [tentativa] e observei [resultado ou erro].
Use este trecho como contexto: [código ou exemplo sem dados privados].
Explique a ideia com um exemplo curto e faça uma pergunta para conferir minha compreensão.
Depois proponha uma variação do exercício. Aguarde minha tentativa antes de dar feedback.
Escolha uma decisão de Seu assistente de estudos no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Para estudar componentes, use React com TypeScript e Vite. Em um produto, avalie também um framework conforme as necessidades de roteamento e servidor.
Configuração com Vite
Create React App foi descontinuado para novos projetos. Aprenda scripts, dependências e build sem começar por configuração avançada.
Escolha uma decisão de Configuração com Vite no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Escolha uma decisão de JSX, componentes e props no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Escolha uma decisão de Estado e eventos no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Depois dos primeiros fundamentos, pratique transformar uma dúvida em uma tarefa verificável. Use uma ferramenta por vez.
Prompts para aprender e construir
Desenvolvimento com IA
Expresse objetivo, contexto, limites e como conferir o resultado. Mostre sua tentativa e exemplos de entrada/saída. Peça uma resposta no nível de quem está aprendendo e faça perguntas quando algo não estiver claro. Ajuste o prompt a partir do resultado, sem decorar fórmulas.
Prompt para estudar Prompts para aprender e construir
Estou aprendendo [conceito] na trilha [nome].
Meu objetivo é [resultado pequeno e observável].
Já tentei [tentativa] e observei [resultado ou erro].
Use este trecho como contexto: [código ou exemplo sem dados privados].
Explique a ideia com um exemplo curto e faça uma pergunta para conferir minha compreensão.
Depois proponha uma variação do exercício. Aguarde minha tentativa antes de dar feedback.
Escolha uma decisão de Prompts para aprender e construir no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Forneça os arquivos relevantes, o erro completo sanitizado, a versão usada e o comportamento esperado. Diferencie conversar sobre código de permitir edição e execução. Use dados de laboratório; não compartilhe senhas, tokens ou dados pessoais.
Escolha uma decisão de Contexto útil e dados protegidos no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Planeje e explique o primeiro recorte antes de implementar. Adapte o prompt ao que você já construiu nesta etapa. Acrescente uma interação ao componente e explique onde o estado deve ficar.
Projeto: Interface com estado.
Objetivo: investigar estado duplicado ou um Effect desnecessário e propor uma mudança pequena no componente.
Contexto: [componente, props, fluxo de eventos e teste ou reprodução do comportamento].
Nesta etapa: Planeje e explique o primeiro recorte antes de implementar.
Limites: apenas este projeto de laboratório; use as ferramentas já escolhidas, dados públicos ou sintéticos e não exponha segredos.
Critérios: estado e eventos permanecem corretos, Effects necessários têm cleanup e o teste cobre comportamento visível.
Mostre as hipóteses e como verificá-las. Informe o que foi executado e o que ainda falta conferir.
Registre um prompt sanitizado, uma sugestão aceita ou corrigida, a verificação executada e seu resultado. Explique a mudança com suas palavras. Conclua o projeto após demonstrar os critérios, mesmo quando parte do código vier de IA.
Escolha uma decisão de Interface com estado no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Use useEffect para sincronizar com sistemas externos, com cleanup. Eventos e valores derivados normalmente dispensam Effects. Use refs para DOM e valores que não renderizam.
Escolha uma decisão de Effects e refs no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Escolha uma decisão de Rotas e requisições no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Peça à IA que sugira uma lista de verificações. Conclua uma tarefa apenas com teclado e confira labels, foco e anúncios de erro com leitor de tela; a revisão do código não confirma sozinha a acessibilidade.
Escolha uma decisão de Testes com Testing Library no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Prefira estado local. Use reducer para transições complexas e Context para dependências compartilhadas; separe estado do servidor do estado da interface.
Escolha uma decisão de Reducer e Context no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Escolha uma decisão de Build e desempenho no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Use o primeiro projeto como contexto. Alterne pequenas implementações, leitura de código, depuração e testes.
Planejar, implementar e revisar
Desenvolvimento com IA
Defina um recorte pequeno e peça um plano. Decida o que implementar você e o que delegar. Revise cada diff, rode a aplicação e confira o comportamento antes de seguir para outra tarefa. A IA pode gerar código, testes e documentação, mas a evidência precisa ser executada.
Implemente uma pequena mudança em parceria. Explique o diff, rejeite ou ajuste uma sugestão e acrescente um caso de teste que não veio da mesma proposta.
Prompt para estudar Planejar, implementar e revisar
Quero implementar [mudança pequena] neste projeto.
Contexto: [arquivos relevantes, comportamento atual e versão].
Resultado esperado: [exemplo de entrada e saída].
Limites: [arquivos que podem mudar e requisitos que devem ser preservados].
Primeiro proponha um plano curto e a verificação. Depois trabalharemos uma etapa por vez.
Ao implementar, mostre o diff, explique as decisões e informe os comandos executados e seus resultados.
Escolha uma decisão de Planejar, implementar e revisar no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Reproduza o problema e registre esperado versus observado. Peça hipóteses e uma forma de distinguir entre elas antes de tentar correções. Não confunda uma explicação plausível com uma causa confirmada.
Problema reproduzível: [passos].
Esperado: [resultado]. Observado: [resultado ou erro sanitizado].
Contexto: [trecho, configuração e versões relevantes].
Liste até três hipóteses e uma verificação para distinguir cada uma.
Primeiro vamos confirmar a causa. Depois proponha a menor correção e um teste de regressão.
Escolha uma decisão de Depuração com evidências no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Depois de conseguir ler diffs, depurar e testar, delegue uma tarefa limitada no repositório de laboratório.
Instruções do projeto e escopo do agente
Desenvolvimento com IA
Documente como rodar, testar e organizar o projeto. Pratique regras do Cursor, CLAUDE.md ou AGENTS.md conforme a ferramenta escolhida. Defina arquivos, tarefa, limites e permissões. Comece com uma branch e uma alteração pequena; deixe MCP, múltiplos agentes e automações amplas para aprofundamento.
Escreva instruções curtas com comandos reais do projeto. Peça uma alteração pequena e confira que as instruções foram usadas e que o diff respeita o escopo.
Escolha uma decisão de Instruções do projeto e escopo do agente no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Confira comportamento e requisitos além dos testes produzidos pelo próprio agente. Verifique casos negativos, dependências, documentação da versão e o resultado dos comandos. Para interface, faça inspeção visual e por teclado; para dados, use uma amostra com resultado conhecido.
Escolha uma decisão de Validar trabalho gerado por IA no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Delegue uma tarefa pequena e revise o diff e a evidência de execução. Adapte o prompt ao que você já construiu nesta etapa. Acrescente uma interação ao componente e explique onde o estado deve ficar.
Projeto: Aplicação React publicável.
Objetivo: investigar estado duplicado ou um Effect desnecessário e propor uma mudança pequena no componente.
Contexto: [componente, props, fluxo de eventos e teste ou reprodução do comportamento].
Nesta etapa: Delegue uma tarefa pequena e revise o diff e a evidência de execução.
Limites: apenas este projeto de laboratório; use as ferramentas já escolhidas, dados públicos ou sintéticos e não exponha segredos.
Critérios: estado e eventos permanecem corretos, Effects necessários têm cleanup e o teste cobre comportamento visível.
Mostre as hipóteses e como verificá-las. Informe o que foi executado e o que ainda falta conferir.
Registre um prompt sanitizado, uma sugestão aceita ou corrigida, a verificação executada e seu resultado. Explique a mudança com suas palavras. Conclua o projeto após demonstrar os critérios, mesmo quando parte do código vier de IA.
Escolha uma decisão de Aplicação React publicável no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Comece a buscar estágio ou vagas compatíveis com seus projetos. Ajuste o estudo aos requisitos recorrentes da sua região; concluir a trilha não garante contratação.
Portfólio e candidatura
Publique projetos com problema, instruções de execução, testes, decisões e limitações. Prepare currículo conciso, uma demonstração e exemplos de colaboração. Pratique leitura de documentação em inglês aos poucos.
Escolha uma decisão de Portfólio e candidatura no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Escolha uma decisão de IA no fluxo de trabalho no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Aprofunde depois de entregar a aplicação. Componentes de classe, HOCs e render props são úteis para manutenção de código legado.
Frameworks e React no servidor
Explore SSR, geração estática, Server Components, Actions, formulários e fronteiras cliente/servidor em um framework. Use a documentação compatível com a versão escolhida.
Escolha uma decisão de Frameworks e React no servidor no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.
Escolha uma decisão de Arquitetura e recursos avançados no seu projeto. Construa uma segunda solução, compare os resultados com um caso de teste e explique os limites de cada abordagem. Use as referências para verificar sua conclusão.