IMERSÃO REACT AULA 03: IMPLEMENTANDO DARK MODE COM CONTEXTAPI

AULA 03: IMPLEMENTANDO DARK MODE COM CONTEXTAPI

Links, dicas e notas de aula

Boas-vindas! Mergulhe em React durante à terceira aula da Imersão!

Você prefere Light ou Dark Mode no seus devices? Se você queria o Dark Mode na Imersão, seus problemas acabaram! Vamos implementar essa feature utilizando a ContextAPI do React, o Styled Components para nos auxiliar e muito mais. Vamos lá?

Resumo da aula

• Começamos olhando o Design Systems;

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

• Criamos o componente Dark Mode Switch;

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

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

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

Código da Aula

• Clique aqui para acessar o código completo da aula.

• Basta ir olhando os diffs, onde as linhas vermelhas são as que alteramos e as verdes o que adicionamos.

• Colinha do DevSoutinho.

• Importante: todo código está no diff, basta olhá-lo ou navegar no projeto através deste link.