Criar uma programação de festival com React é um projeto prático para quem já conhece os fundamentos de React. Você transformará um catálogo de festival preparado em um plano pessoal de um dia: filtrará eventos, manterá suas escolhas e explicará por que uma nova opção entra em conflito com algo já selecionado.
Dois laboratórios guiados começam com duas escolhas normais sem conflito antes de apresentar uma opção com sobreposição. Depois, você conectará os dados derivados da programação, as verificações de horário e a persistência local. Um desafio independente transfere os mesmos mecanismos para outro dia de festival com eventos, palcos e IDs diferentes. Cada laboratório fornece seu próprio projeto e dados iniciais.
O que você aprenderá
Ao concluir o curso, você poderá:
- manter os IDs dos eventos selecionados como única fonte de estado e derivar do catálogo atual os registros correspondentes, a quantidade de escolhas e a duração total;
- filtrar o catálogo visível sem apagar escolhas existentes e distinguir eventos com o mesmo título por IDs estáveis;
- verificar intervalos de tempo semiabertos para permitir eventos exatamente adjacentes, recusar sobreposições reais indicando o evento específico em conflito e permitir adicionar novamente uma escolha removida;
- salvar somente uma lista de IDs em uma chave de
localStorageespecífica do curso, restaurar escolhas ainda válidas e avisar sobre IDs antigos ausentes sem perder os válidos; - recuperar-se de JSON malformado e usar a lógica mínima necessária de
useEffectpara lembrar escolhas após atualizar no mesmo navegador e origem, enquanto o laboratório permanecer disponível.
Para quem é este curso
Este curso é indicado para quem quer coordenar componentes React em torno de uma programação pessoal útil, em vez de manter listas sem relação entre si.
Pré-requisitos: Uso básico do terminal e de caminhos, edição de arquivos, HTML/CSS e arrays, objetos e funções de JavaScript; componentes React, JSX, props, state com useState, eventos, renderização condicional, map/filter, chaves estáveis de listas e formulários controlados. Os laboratórios guiados ensinam estado derivado, seleção por ID, comparações simples de intervalos e os conceitos necessários de useEffect e localStorage antes do desafio. Esta não é uma primeira introdução a React.
Ambiente de aprendizagem: A LabEx fornece um projeto React preparado no navegador, suas dependências, uma prévia e dados sintéticos de festival. Você trabalha no frontend. Os rótulos do site e a saída de execução permanecem em inglês; aulas traduzidas não significam uma interface traduzida.
Perguntas frequentes
O que conta como conflito de horário?
Todos os eventos usam minutos locais da mesma data. Um pode começar exatamente quando outro termina; uma sobreposição real é recusada. O curso não trata programações que atravessam a meia-noite ou fusos horários nem calcula deslocamentos entre palcos.
Minha programação será transferida para outro dispositivo ou laboratório?
Não. A recuperação se limita ao mesmo navegador, à mesma origem real e ao ambiente de laboratório ainda disponível, desde que o navegador permita o armazenamento. Se a política do navegador o negar, as escolhas só ficam utilizáveis em memória durante essa visita; não se promete restaurá-las após atualizar. localStorage não é uma conta, um backup no servidor nem uma promessa de armazenamento permanente ou entre VMs.
Vou criar um serviço completo de reservas para festivais?
Não. Você cria um plano pessoal a partir de dados sintéticos preparados. Backend, contas, mapas, arrastar e soltar, otimização de itinerário e sincronização dinâmica com o servidor estão fora do curso.
