# Trilha de React ID: react Versão: 2026-10-12.b1f477e2 Versão do formato: 1 Idioma: pt-BR Licença do catálogo: MIT Para quem já praticou HTML, CSS, JavaScript, requisições e Git. Objetivo: Uma aplicação React com rotas, API, acessibilidade, testes e publicação. Entrada recomendada: [Estudar a base na trilha Frontend](https://trilha.info/roadmap/frontend) ## Antes de React ID da etapa: react.antes-de-react Percurso: Obrigatório · Fundamentos e prática Esta é uma especialização de frontend. Comece após HTML, CSS, JavaScript, módulos, async/await e Git; consulte a trilha Frontend se faltar essa base. ### Revise JavaScript ID do grupo: react.revise-javascript Pratique map/filter, objetos, destructuring, imports, promises e imutabilidade. React não substitui a base da web. Objetivos essenciais: react.revise-javascript.basics, react.revise-javascript.practice Modo simple: react.revise-javascript.basics, react.revise-javascript.practice Modo standard: react.revise-javascript.basics, react.revise-javascript.practice Modo deep: react.revise-javascript.basics, react.revise-javascript.practice, react.revise-javascript.deepening #### O básico ID: react.revise-javascript.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.revise-javascript.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.revise-javascript.basics Renderize e filtre uma lista com JavaScript e trate uma falha de requisição. Referências: - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.revise-javascript.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.revise-javascript.basics, react.revise-javascript.practice 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. Referências: - [MDN: guia de JavaScript (português)](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide) | ID: resource.js | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### TypeScript ID do grupo: curriculum.typescript Use tipos, interfaces, unions, narrowing e generics simples. Ative strict e entenda que tipos não validam dados recebidos em tempo de execução. Objetivos essenciais: curriculum.typescript.basics, curriculum.typescript.practice Modo simple: curriculum.typescript.basics, curriculum.typescript.practice Modo standard: curriculum.typescript.basics, curriculum.typescript.practice Modo deep: curriculum.typescript.basics, curriculum.typescript.practice, curriculum.typescript.deepening #### O básico ID: curriculum.typescript.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [TypeScript: handbook (inglês)](https://www.typescriptlang.org/docs/handbook/intro.html) | ID: resource.ts | Idioma: en | Gratuito: sim | Duração: não estimada - [Rodrigo Branas: masterclass de TypeScript (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/RodrigoBranas) | ID: resource.youtubeBranasTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: TypeScript na prática (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.typescript.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.typescript.basics 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. Referências: - [TypeScript: handbook (inglês)](https://www.typescriptlang.org/docs/handbook/intro.html) | ID: resource.ts | Idioma: en | Gratuito: sim | Duração: não estimada - [Rodrigo Branas: masterclass de TypeScript (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/RodrigoBranas) | ID: resource.youtubeBranasTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: TypeScript na prática (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.typescript.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.typescript.basics, curriculum.typescript.practice 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. Referências: - [TypeScript: handbook (inglês)](https://www.typescriptlang.org/docs/handbook/intro.html) | ID: resource.ts | Idioma: en | Gratuito: sim | Duração: não estimada - [Rodrigo Branas: masterclass de TypeScript (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/RodrigoBranas) | ID: resource.youtubeBranasTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [Rocketseat: TypeScript na prática (português; vídeos gratuitos no YouTube)](https://www.youtube.com/c/rocketseat) | ID: resource.youtubeRocketseatTs | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Seu assistente de estudos ID do grupo: aiLearning.seu-assistente-de-estudos 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. Objetivos essenciais: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Modo simple: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Modo standard: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria Modo deep: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria, aiLearning.seu-assistente-de-estudos.deepening IA: Desenvolvimento com IA #### Escolha uma ferramenta ID: aiLearning.escolha-uma-ferramenta Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum 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. Referências: - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: primeiros passos (inglês; documentação gratuita)](https://code.claude.com/docs/en/quickstart) | ID: resource.claude | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: primeiros passos com Codex (inglês; documentação gratuita)](https://developers.openai.com/codex/quickstart/) | ID: resource.codex | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique tutoria ID: aiLearning.pratique-tutoria Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.escolha-uma-ferramenta 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. Prompt de estudo: ```text 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. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.seu-assistente-de-estudos.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.escolha-uma-ferramenta, aiLearning.pratique-tutoria 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. Referências: - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: primeiros passos (inglês; documentação gratuita)](https://code.claude.com/docs/en/quickstart) | ID: resource.claude | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: primeiros passos com Codex (inglês; documentação gratuita)](https://developers.openai.com/codex/quickstart/) | ID: resource.codex | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Crie o primeiro projeto ID da etapa: react.crie-o-primeiro-projeto Percurso: Obrigatório · Fundamentos e prática 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 ID do grupo: react.configuracao-com-vite Create React App foi descontinuado para novos projetos. Aprenda scripts, dependências e build sem começar por configuração avançada. Objetivos essenciais: react.configuracao-com-vite.basics, react.configuracao-com-vite.practice Modo simple: react.configuracao-com-vite.basics, react.configuracao-com-vite.practice Modo standard: react.configuracao-com-vite.basics, react.configuracao-com-vite.practice Modo deep: react.configuracao-com-vite.basics, react.configuracao-com-vite.practice, react.configuracao-com-vite.deepening #### O básico ID: react.configuracao-com-vite.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: descontinuação do Create React App (inglês)](https://react.dev/blog/2025/02/14/sunsetting-create-react-app) | ID: resource.cra | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.configuracao-com-vite.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.configuracao-com-vite.basics Crie um projeto React + TypeScript e execute desenvolvimento, checagem de tipos e build. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: descontinuação do Create React App (inglês)](https://react.dev/blog/2025/02/14/sunsetting-create-react-app) | ID: resource.cra | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.configuracao-com-vite.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.configuracao-com-vite.basics, react.configuracao-com-vite.practice 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. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: descontinuação do Create React App (inglês)](https://react.dev/blog/2025/02/14/sunsetting-create-react-app) | ID: resource.cra | Idioma: en | Gratuito: sim | Duração: não estimada ## Fundamentos de componentes ID da etapa: react.fundamentos-de-componentes Percurso: Obrigatório · Fundamentos e prática ### JSX, componentes e props ID do grupo: react.jsx-componentes-e-props Construa funções de componente, composição, renderização condicional e listas com keys estáveis. Prefira composição a herança. Objetivos essenciais: react.jsx-componentes-e-props.basics, react.jsx-componentes-e-props.practice Modo simple: react.jsx-componentes-e-props.basics, react.jsx-componentes-e-props.practice Modo standard: react.jsx-componentes-e-props.basics, react.jsx-componentes-e-props.practice Modo deep: react.jsx-componentes-e-props.basics, react.jsx-componentes-e-props.practice, react.jsx-componentes-e-props.deepening #### O básico ID: react.jsx-componentes-e-props.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.jsx-componentes-e-props.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.jsx-componentes-e-props.basics Divida um catálogo em componentes e passe dados por props, sem alterar os dados recebidos. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.jsx-componentes-e-props.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.jsx-componentes-e-props.basics, react.jsx-componentes-e-props.practice 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. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Estado e eventos ID do grupo: react.estado-e-eventos Use useState, eventos e formulários controlados. Entenda snapshots, atualização funcional e estado derivado. Objetivos essenciais: react.estado-e-eventos.basics, react.estado-e-eventos.practice Modo simple: react.estado-e-eventos.basics, react.estado-e-eventos.practice Modo standard: react.estado-e-eventos.basics, react.estado-e-eventos.practice Modo deep: react.estado-e-eventos.basics, react.estado-e-eventos.practice, react.estado-e-eventos.deepening #### O básico ID: react.estado-e-eventos.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.estado-e-eventos.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.estado-e-eventos.basics Implemente busca e favoritos sem duplicar estado que pode ser calculado. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.estado-e-eventos.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.estado-e-eventos.basics, react.estado-e-eventos.practice 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. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## IA: prompting e contexto ID da etapa: aiLearning.ia-prompting-e-contexto Percurso: Obrigatório · Desenvolvimento com IA Depois dos primeiros fundamentos, pratique transformar uma dúvida em uma tarefa verificável. Use uma ferramenta por vez. ### Prompts para aprender e construir ID do grupo: aiLearning.prompts-para-aprender-e-construir 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. Objetivos essenciais: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Modo simple: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Modo standard: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice Modo deep: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice, aiLearning.prompts-para-aprender-e-construir.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.prompts-para-aprender-e-construir.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.prompts-para-aprender-e-construir.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.prompts-para-aprender-e-construir.basics Compare um pedido vago com um pedido que inclui sua tentativa e critérios. Execute os exemplos e registre qual informação melhorou a resposta. Prompt de estudo: ```text 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. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.prompts-para-aprender-e-construir.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.prompts-para-aprender-e-construir.basics, aiLearning.prompts-para-aprender-e-construir.practice 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. Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada ### Contexto útil e dados protegidos ID do grupo: aiLearning.contexto-util-e-dados-protegidos 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. Objetivos essenciais: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Modo simple: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Modo standard: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice Modo deep: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice, aiLearning.contexto-util-e-dados-protegidos.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.contexto-util-e-dados-protegidos.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.contexto-util-e-dados-protegidos.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.contexto-util-e-dados-protegidos.basics Peça ajuda para a mesma dúvida com e sem o trecho relevante. Identifique uma suposição incorreta e corrija o contexto antes de aceitar a solução. Referências: - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.contexto-util-e-dados-protegidos.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.contexto-util-e-dados-protegidos.basics, aiLearning.contexto-util-e-dados-protegidos.practice 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. Referências: - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Projeto: Interface com estado ID da etapa: react.interface-com-estado.stage Percurso: Obrigatório · Projeto: entrega prática Construa antes de avançar. Registre as decisões e peça uma revisão. ### Interface com estado ID do grupo: react.interface-com-estado Crie um catálogo com formulário, busca, favoritos e validação usando componentes funcionais. Objetivos essenciais: react.interface-com-estado.criteria, react.interface-com-estado.ai-practice, react.interface-com-estado.verification Modo simple: react.interface-com-estado.criteria, react.interface-com-estado.ai-practice, react.interface-com-estado.verification Modo standard: react.interface-com-estado.criteria, react.interface-com-estado.ai-practice, react.interface-com-estado.verification Modo deep: react.interface-com-estado.criteria, react.interface-com-estado.ai-practice, react.interface-com-estado.verification, react.interface-com-estado.deepening IA: IA aplicada #### Critérios de conclusão ID: react.interface-com-estado.criteria Tipo: criteria Percurso: Obrigatório Pré-requisitos: nenhum Use keys estáveis, mantenha estado perto de quem precisa dele e faça o formulário funcionar com teclado. Explique cada atualização de estado. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Prática de IA neste projeto ID: react.interface-com-estado.ai-practice Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: react.interface-com-estado.criteria 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. Prompt de estudo: ```text 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. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Registre sua verificação ID: react.interface-com-estado.verification Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: react.interface-com-estado.criteria 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. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.interface-com-estado.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.interface-com-estado.criteria, react.interface-com-estado.ai-practice, react.interface-com-estado.verification 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. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Sincronização e dados ID da etapa: react.sincronizacao-e-dados Percurso: Obrigatório · Fundamentos e prática ### Effects e refs ID do grupo: react.effects-e-refs 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. Objetivos essenciais: react.effects-e-refs.basics, react.effects-e-refs.practice Modo simple: react.effects-e-refs.basics, react.effects-e-refs.practice Modo standard: react.effects-e-refs.basics, react.effects-e-refs.practice Modo deep: react.effects-e-refs.basics, react.effects-e-refs.practice, react.effects-e-refs.deepening #### O básico ID: react.effects-e-refs.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [React: talvez você não precise de um Effect (português)](https://pt-br.react.dev/learn/you-might-not-need-an-effect) | ID: resource.effects | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.effects-e-refs.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.effects-e-refs.basics Remova um Effect desnecessário e demonstre a limpeza de uma assinatura ou requisição. Referências: - [React: talvez você não precise de um Effect (português)](https://pt-br.react.dev/learn/you-might-not-need-an-effect) | ID: resource.effects | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.effects-e-refs.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.effects-e-refs.basics, react.effects-e-refs.practice 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. Referências: - [React: talvez você não precise de um Effect (português)](https://pt-br.react.dev/learn/you-might-not-need-an-effect) | ID: resource.effects | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Rotas e requisições ID do grupo: react.rotas-e-requisicoes Aprenda rotas, parâmetros, loading, erro, cancelamento e cache. Comece com fetch; adote bibliotecas de dados quando houver necessidade real. Objetivos essenciais: react.rotas-e-requisicoes.basics, react.rotas-e-requisicoes.practice Modo simple: react.rotas-e-requisicoes.basics, react.rotas-e-requisicoes.practice Modo standard: react.rotas-e-requisicoes.basics, react.rotas-e-requisicoes.practice Modo deep: react.rotas-e-requisicoes.basics, react.rotas-e-requisicoes.practice, react.rotas-e-requisicoes.deepening #### O básico ID: react.rotas-e-requisicoes.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [React Router: modos e primeiros passos (inglês)](https://reactrouter.com/start/modes) | ID: resource.router | Idioma: en | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.rotas-e-requisicoes.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.rotas-e-requisicoes.basics Crie uma tela de detalhe acessível pela URL e trate resposta vazia, falha e mudanças rápidas de rota. Referências: - [React Router: modos e primeiros passos (inglês)](https://reactrouter.com/start/modes) | ID: resource.router | Idioma: en | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.rotas-e-requisicoes.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.rotas-e-requisicoes.basics, react.rotas-e-requisicoes.practice 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. Referências: - [React Router: modos e primeiros passos (inglês)](https://reactrouter.com/start/modes) | ID: resource.router | Idioma: en | Gratuito: sim | Duração: não estimada - [MDN: usando Fetch (português)](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch) | ID: resource.fetch | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Qualidade de uma aplicação ID da etapa: react.qualidade-de-uma-aplicacao Percurso: Obrigatório · Fundamentos e prática ### Acessibilidade ID do grupo: curriculum.acessibilidade Inclua semântica, teclado, foco, contraste, mensagens de erro e teste com leitor de tela desde os primeiros componentes. Objetivos essenciais: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Modo simple: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Modo standard: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Modo deep: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice, curriculum.acessibilidade.deepening #### O básico ID: curriculum.acessibilidade.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.acessibilidade.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.acessibilidade.basics 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. Referências: - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.acessibilidade.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.acessibilidade.basics, curriculum.acessibilidade.practice Conclua o fluxo usando somente teclado e leitor de tela. Introduza e corrija uma falha de foco ou anúncio de erro, registrando a evidência. Referências: - [MDN: acessibilidade (português)](https://developer.mozilla.org/pt-BR/docs/Web/Accessibility) | ID: resource.accessibility | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Testes com Testing Library ID do grupo: react.testes-com-testing-library Teste comportamento visível ao usuário com Vitest e Testing Library; cubra navegação com Playwright. Evite testes que apenas repetem a implementação. Objetivos essenciais: react.testes-com-testing-library.basics, react.testes-com-testing-library.practice Modo simple: react.testes-com-testing-library.basics, react.testes-com-testing-library.practice Modo standard: react.testes-com-testing-library.basics, react.testes-com-testing-library.practice Modo deep: react.testes-com-testing-library.basics, react.testes-com-testing-library.practice, react.testes-com-testing-library.deepening #### O básico ID: react.testes-com-testing-library.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Testing Library: testes centrados no usuário (inglês)](https://testing-library.com/docs/react-testing-library/intro/) | ID: resource.testingLibrary | Idioma: en | Gratuito: sim | Duração: não estimada - [Vitest: primeiros passos (inglês)](https://vitest.dev/guide/) | ID: resource.vitest | Idioma: en | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.testes-com-testing-library.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.testes-com-testing-library.basics Teste envio inválido, carregamento e recuperação de erro; execute um fluxo completo no navegador. Referências: - [Testing Library: testes centrados no usuário (inglês)](https://testing-library.com/docs/react-testing-library/intro/) | ID: resource.testingLibrary | Idioma: en | Gratuito: sim | Duração: não estimada - [Vitest: primeiros passos (inglês)](https://vitest.dev/guide/) | ID: resource.vitest | Idioma: en | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.testes-com-testing-library.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.testes-com-testing-library.basics, react.testes-com-testing-library.practice 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. Referências: - [Testing Library: testes centrados no usuário (inglês)](https://testing-library.com/docs/react-testing-library/intro/) | ID: resource.testingLibrary | Idioma: en | Gratuito: sim | Duração: não estimada - [Vitest: primeiros passos (inglês)](https://vitest.dev/guide/) | ID: resource.vitest | Idioma: en | Gratuito: sim | Duração: não estimada - [Playwright: testes de ponta a ponta (inglês)](https://playwright.dev/docs/intro) | ID: resource.playwright | Idioma: en | Gratuito: sim | Duração: não estimada ## Estado compartilhado e entrega ID da etapa: react.estado-compartilhado-e-entrega Percurso: Obrigatório · Fundamentos e prática ### Reducer e Context ID do grupo: react.reducer-e-context Prefira estado local. Use reducer para transições complexas e Context para dependências compartilhadas; separe estado do servidor do estado da interface. Objetivos essenciais: react.reducer-e-context.basics, react.reducer-e-context.practice Modo simple: react.reducer-e-context.basics, react.reducer-e-context.practice Modo standard: react.reducer-e-context.basics, react.reducer-e-context.practice Modo deep: react.reducer-e-context.basics, react.reducer-e-context.practice, react.reducer-e-context.deepening #### O básico ID: react.reducer-e-context.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.reducer-e-context.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.reducer-e-context.basics Implemente um carrinho com reducer e explique por que cada estado é local ou compartilhado. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.reducer-e-context.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.reducer-e-context.basics, react.reducer-e-context.practice 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. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Build e desempenho ID do grupo: react.build-e-desempenho Publique uma versão de produção com CI. Meça antes de aplicar memoização e lazy loading; aprenda os limites entre cliente e servidor. Objetivos essenciais: react.build-e-desempenho.basics, react.build-e-desempenho.practice Modo simple: react.build-e-desempenho.basics, react.build-e-desempenho.practice Modo standard: react.build-e-desempenho.basics, react.build-e-desempenho.practice Modo deep: react.build-e-desempenho.basics, react.build-e-desempenho.practice, react.build-e-desempenho.deepening #### O básico ID: react.build-e-desempenho.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [web.dev: métricas de desempenho (português)](https://web.dev/articles/vitals?hl=pt-br) | ID: resource.performance | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.build-e-desempenho.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: react.build-e-desempenho.basics Demonstre build reproduzível e uma melhoria de desempenho com evidência. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [web.dev: métricas de desempenho (português)](https://web.dev/articles/vitals?hl=pt-br) | ID: resource.performance | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.build-e-desempenho.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.build-e-desempenho.basics, react.build-e-desempenho.practice 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. Referências: - [Vite: primeiros passos (português)](https://pt.vite.dev/guide/) | ID: resource.vite | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [web.dev: métricas de desempenho (português)](https://web.dev/articles/vitals?hl=pt-br) | ID: resource.performance | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## IA: programação em parceria ID da etapa: aiLearning.ia-programacao-em-parceria Percurso: Obrigatório · Desenvolvimento com IA Use o primeiro projeto como contexto. Alterne pequenas implementações, leitura de código, depuração e testes. ### Planejar, implementar e revisar ID do grupo: aiLearning.planejar-implementar-e-revisar 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. Objetivos essenciais: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Modo simple: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Modo standard: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice Modo deep: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice, aiLearning.planejar-implementar-e-revisar.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.planejar-implementar-e-revisar.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.planejar-implementar-e-revisar.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.planejar-implementar-e-revisar.basics 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 de estudo: ```text 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. ``` Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.planejar-implementar-e-revisar.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.planejar-implementar-e-revisar.basics, aiLearning.planejar-implementar-e-revisar.practice 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. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: uso do agente (inglês; documentação gratuita)](https://cursor.com/docs/agent/overview) | ID: resource.cursor | Idioma: en | Gratuito: sim | Duração: não estimada ### Depuração com evidências ID do grupo: aiLearning.depuracao-com-evidencias 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. Objetivos essenciais: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Modo simple: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Modo standard: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice Modo deep: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice, aiLearning.depuracao-com-evidencias.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.depuracao-com-evidencias.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.depuracao-com-evidencias.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.depuracao-com-evidencias.basics Introduza um bug no laboratório, confirme uma hipótese por log, breakpoint ou teste e verifique uma correção mínima. Prompt de estudo: ```text 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. ``` Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.depuracao-com-evidencias.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.depuracao-com-evidencias.basics, aiLearning.depuracao-com-evidencias.practice 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. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada ## IA: agentes, regras e verificação ID da etapa: aiLearning.ia-agentes-regras-e-verificacao Percurso: Obrigatório · Desenvolvimento com IA 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 ID do grupo: aiLearning.instrucoes-do-projeto-e-escopo-do-agente 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. Objetivos essenciais: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Modo simple: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Modo standard: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Modo deep: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Cursor: regras do projeto (inglês; documentação gratuita)](https://cursor.com/docs/rules) | ID: resource.cursorRules | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: instruções de projeto com AGENTS.md (inglês; documentação gratuita)](https://developers.openai.com/codex/guides/agents-md/) | ID: resource.codexRules | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics 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. Referências: - [Cursor: regras do projeto (inglês; documentação gratuita)](https://cursor.com/docs/rules) | ID: resource.cursorRules | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: instruções de projeto com AGENTS.md (inglês; documentação gratuita)](https://developers.openai.com/codex/guides/agents-md/) | ID: resource.codexRules | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.instrucoes-do-projeto-e-escopo-do-agente.basics, aiLearning.instrucoes-do-projeto-e-escopo-do-agente.practice 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. Referências: - [Cursor: regras do projeto (inglês; documentação gratuita)](https://cursor.com/docs/rules) | ID: resource.cursorRules | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [OpenAI: instruções de projeto com AGENTS.md (inglês; documentação gratuita)](https://developers.openai.com/codex/guides/agents-md/) | ID: resource.codexRules | Idioma: en | Gratuito: sim | Duração: não estimada ### Validar trabalho gerado por IA ID do grupo: aiLearning.validar-trabalho-gerado-por-ia 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. Objetivos essenciais: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Modo simple: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Modo standard: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice Modo deep: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice, aiLearning.validar-trabalho-gerado-por-ia.deepening IA: Desenvolvimento com IA #### O básico ID: aiLearning.validar-trabalho-gerado-por-ia.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: aiLearning.validar-trabalho-gerado-por-ia.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: aiLearning.validar-trabalho-gerado-por-ia.basics Revise uma proposta que parece correta, mas tem um caso-limite errado. Acrescente uma verificação independente, corrija e documente a evidência. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: aiLearning.validar-trabalho-gerado-por-ia.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: aiLearning.validar-trabalho-gerado-por-ia.basics, aiLearning.validar-trabalho-gerado-por-ia.practice 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. Referências: - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada ## Projeto: Aplicação React publicável ID da etapa: react.aplicacao-react-publicavel.stage Percurso: Obrigatório · Projeto: entrega prática Construa antes de avançar. Registre as decisões e peça uma revisão. ### Aplicação React publicável ID do grupo: react.aplicacao-react-publicavel Entregue um catálogo ou painel com rotas, API, TypeScript, testes e estados de falha. Objetivos essenciais: react.aplicacao-react-publicavel.criteria, react.aplicacao-react-publicavel.ai-practice, react.aplicacao-react-publicavel.verification Modo simple: react.aplicacao-react-publicavel.criteria, react.aplicacao-react-publicavel.ai-practice, react.aplicacao-react-publicavel.verification Modo standard: react.aplicacao-react-publicavel.criteria, react.aplicacao-react-publicavel.ai-practice, react.aplicacao-react-publicavel.verification Modo deep: react.aplicacao-react-publicavel.criteria, react.aplicacao-react-publicavel.ai-practice, react.aplicacao-react-publicavel.verification, react.aplicacao-react-publicavel.deepening IA: IA aplicada #### Critérios de conclusão ID: react.aplicacao-react-publicavel.criteria Tipo: criteria Percurso: Obrigatório Pré-requisitos: nenhum Publique uma demo, automatize build e testes, valide teclado e documente decisões de estado e dados. Corrija uma issue relatada por outra pessoa. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React Router: modos e primeiros passos (inglês)](https://reactrouter.com/start/modes) | ID: resource.router | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Prática de IA neste projeto ID: react.aplicacao-react-publicavel.ai-practice Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: react.aplicacao-react-publicavel.criteria 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. Prompt de estudo: ```text 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. ``` Referências: - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada #### Registre sua verificação ID: react.aplicacao-react-publicavel.verification Tipo: practice Percurso: Obrigatório · IA aplicada Pré-requisitos: react.aplicacao-react-publicavel.criteria 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. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.aplicacao-react-publicavel.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: react.aplicacao-react-publicavel.criteria, react.aplicacao-react-publicavel.ai-practice, react.aplicacao-react-publicavel.verification 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. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [React Router: modos e primeiros passos (inglês)](https://reactrouter.com/start/modes) | ID: resource.router | Idioma: en | Gratuito: sim | Duração: não estimada - [GitHub Actions: integração contínua (português)](https://docs.github.com/pt/actions/get-started/continuous-integration) | ID: resource.actions | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [OpenAI: prompting para tarefas de código (inglês; documentação gratuita)](https://developers.openai.com/codex/prompting/) | ID: resource.codexPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Cursor: prompts e contexto (inglês; documentação gratuita)](https://cursor.com/docs/agent/prompting) | ID: resource.cursorPrompts | Idioma: en | Gratuito: sim | Duração: não estimada - [Claude Code: boas práticas (inglês; documentação gratuita)](https://code.claude.com/docs/en/best-practices) | ID: resource.claudePractices | Idioma: en | Gratuito: sim | Duração: não estimada - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Preparação para oportunidades ID da etapa: curriculum.preparacao-para-oportunidades Percurso: Obrigatório · Fundamentos e prática 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 ID do grupo: curriculum.portfolio-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. Objetivos essenciais: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Modo simple: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Modo standard: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice Modo deep: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice, curriculum.portfolio-e-candidatura.deepening #### O básico ID: curriculum.portfolio-e-candidatura.basics Tipo: concept Percurso: Obrigatório Pré-requisitos: nenhum Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.portfolio-e-candidatura.practice Tipo: practice Percurso: Obrigatório Pré-requisitos: curriculum.portfolio-e-candidatura.basics Peça feedback sobre um projeto, corrija uma issue e explique sua contribuição. Compare vagas de entrada e escolha uma lacuna concreta para estudar. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.portfolio-e-candidatura.deepening Tipo: challenge Percurso: Aprofundamento opcional Pré-requisitos: curriculum.portfolio-e-candidatura.basics, curriculum.portfolio-e-candidatura.practice 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. Referências: - [Pro Git: livro gratuito (português)](https://git-scm.com/book/pt-br/v2) | ID: resource.git | Idioma: pt-BR | Gratuito: sim | Duração: não estimada - [GitHub: como contribuir com projetos (português)](https://docs.github.com/pt/get-started/exploring-projects-on-github/contributing-to-a-project) | ID: resource.contribute | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### IA no fluxo de trabalho ID do grupo: curriculum.ia-no-fluxo-de-trabalho Use IA para explicar erros, propor testes e revisar hipóteses. Confira a documentação, o diff e os resultados. Proteja dados privados e segredos. Objetivos essenciais: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Modo simple: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Modo standard: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice Modo deep: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice, curriculum.ia-no-fluxo-de-trabalho.deepening IA: Desenvolvimento com IA #### O básico ID: curriculum.ia-no-fluxo-de-trabalho.basics Tipo: concept Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: nenhum Referências: - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: curriculum.ia-no-fluxo-de-trabalho.practice Tipo: practice Percurso: Obrigatório · Desenvolvimento com IA Pré-requisitos: curriculum.ia-no-fluxo-de-trabalho.basics Compare uma sugestão de IA com sua solução, identifique uma limitação e teste a mudança. Explique o código sem depender da ferramenta. Referências: - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: curriculum.ia-no-fluxo-de-trabalho.deepening Tipo: challenge Percurso: Aprofundamento opcional · Desenvolvimento com IA Pré-requisitos: curriculum.ia-no-fluxo-de-trabalho.basics, curriculum.ia-no-fluxo-de-trabalho.practice 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. Referências: - [GitHub: uso responsável de sugestões de IA (português)](https://docs.github.com/pt/copilot/responsible-use/copilot-code-completion) | ID: resource.ai | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ## Especialização opcional (opcional) ID da etapa: react.especializacao-opcional Percurso: Opcional · Fundamentos e prática 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 ID do grupo: react.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. Objetivos essenciais: react.frameworks-e-react-no-servidor.basics, react.frameworks-e-react-no-servidor.practice Modo simple: react.frameworks-e-react-no-servidor.basics, react.frameworks-e-react-no-servidor.practice Modo standard: react.frameworks-e-react-no-servidor.basics, react.frameworks-e-react-no-servidor.practice Modo deep: react.frameworks-e-react-no-servidor.basics, react.frameworks-e-react-no-servidor.practice, react.frameworks-e-react-no-servidor.deepening #### O básico ID: react.frameworks-e-react-no-servidor.basics Tipo: concept Percurso: Opcional Pré-requisitos: nenhum Referências: - [Next.js: curso oficial de aplicação completa (inglês)](https://nextjs.org/learn) | ID: resource.next | Idioma: en | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.frameworks-e-react-no-servidor.practice Tipo: practice Percurso: Opcional Pré-requisitos: react.frameworks-e-react-no-servidor.basics Compare uma rota renderizada no servidor com a versão cliente e explique segurança, cache e custo de complexidade. Referências: - [Next.js: curso oficial de aplicação completa (inglês)](https://nextjs.org/learn) | ID: resource.next | Idioma: en | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.frameworks-e-react-no-servidor.deepening Tipo: challenge Percurso: Opcional Pré-requisitos: react.frameworks-e-react-no-servidor.basics, react.frameworks-e-react-no-servidor.practice 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. Referências: - [Next.js: curso oficial de aplicação completa (inglês)](https://nextjs.org/learn) | ID: resource.next | Idioma: en | Gratuito: sim | Duração: não estimada - [React: criar um projeto (português)](https://pt-br.react.dev/learn/creating-a-react-app) | ID: resource.reactSetup | Idioma: pt-BR | Gratuito: sim | Duração: não estimada ### Arquitetura e recursos avançados ID do grupo: react.arquitetura-e-recursos-avancados Estude error boundaries, portais, custom hooks e profiling conforme surgirem necessidades. Mobile é uma especialização própria. Objetivos essenciais: react.arquitetura-e-recursos-avancados.basics, react.arquitetura-e-recursos-avancados.practice Modo simple: react.arquitetura-e-recursos-avancados.basics, react.arquitetura-e-recursos-avancados.practice Modo standard: react.arquitetura-e-recursos-avancados.basics, react.arquitetura-e-recursos-avancados.practice Modo deep: react.arquitetura-e-recursos-avancados.basics, react.arquitetura-e-recursos-avancados.practice, react.arquitetura-e-recursos-avancados.deepening #### O básico ID: react.arquitetura-e-recursos-avancados.basics Tipo: concept Percurso: Opcional Pré-requisitos: nenhum Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Pratique e confira ID: react.arquitetura-e-recursos-avancados.practice Tipo: practice Percurso: Opcional Pré-requisitos: react.arquitetura-e-recursos-avancados.basics Extraia um hook com responsabilidade clara e demonstre um tratamento de erro útil ao usuário. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada #### Desafio de aprofundamento ID: react.arquitetura-e-recursos-avancados.deepening Tipo: challenge Percurso: Opcional Pré-requisitos: react.arquitetura-e-recursos-avancados.basics, react.arquitetura-e-recursos-avancados.practice 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. Referências: - [React: aprenda React (português)](https://pt-br.react.dev/learn) | ID: resource.react | Idioma: pt-BR | Gratuito: sim | Duração: não estimada