Curso
React: Modificando o comportamento da página com State Hook e evento onClick
Uma das tarefas mais comuns que você vai se deparar durante sua carreira de programador front-end é fazer com que a página modifique seu comportamento após o clique do usuário em algum elemento. Já temos todo o conhecimento técnico necessário para implementar esse comportamento: basicamente, precisamos usar o React com useState, evento onClick e um pouco de JavaScript. Vamos botar a mão na massa nesse curso e produzir diversos exemplos práticos de páginas que respondem ao clique do usuário.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
7 horas
Curso de React (7 aulas)
Aula 1 - Introdução
Nesta aula veremos alguns exemplos reais de mudança do comportamento de uma página web, em resposta a ação de clique do usuário.
Aula 2 - Revisão useState e evento onClick
Antes de novos desafios, vamos revisar o conteúdo de useState e onClick que foi aprendido no curso anterior.
Aula 3 - Alterando o estilo de um elemento
esta aula veremos um exemplo em que você poderá alterar o estilo de um elemento com o uso do Hook State mais o evento de clique.
Aula 4 - JavaScript + useState
Nesta aula aprenderemos como aplicar o JavaScript com o useState para alterar o estilo de um elemento a cada novo evento de clique. O uso da condicional IF do JavaScript aliado ao useState em conjunto com o evento onClick vai nos permitir criar praticamente qualquer tipo de alteração visual.
Aula 5 - Evoluindo o código
Aprenda uma nova forma de aplicar o JavaScript junto com o useState hook para alterar o estilo de um elemento a cada novo evento de clique. O uso do IF ternário do JavaScript aliado ao operador booleano dentro do código React proporciona a capacidade de escrever um código mais limpo e performático.
Aula 6 - Criando um exemplo de menu sanduíche
Nesta aula vamos criar um exemplo prático, que servirá como base para aplicar o que aprendemos até aqui sobre o State Hook, evento onClick e como aplicar lógica no código de interface. Criaremos uma aplicação que exibe um menu quando um botão for clicado.
Aula 7 - Criando um exemplo com dark mode
Nesta aula vamos criar mais um exemplo prático para aplicar todo o conhecimento adquirido até agora. Criaremos uma aplicação que alterna entre os temas dark mode e light mode sempre que um botão for clicado.
Veja outros cursos de React
React: Trabalhando com coleções de dados
React: Componentização de aplicações com Props + useState
React.js: Introdução