React na Prática - Veja em 1 minuto como utilizar Css Modules, Hooks, Cliques, If Ternário, para Criar Componentes Estilizados Dinâmicos
- #JavaScript
- #React
Fala, Dev. Para este projeto, apenas utilizei os comandos no NodeJs:
- npx create-react-app site (para criar o projeto)
- npm start (para inicializar o projeto).
Para ver o resultado no formato de vídeo, acesse: https://www.youtube.com/watch?v=oak_rG294BE
Apenas alterei o arquivo gerado automaticamente, App.js para:
import './App.css';
import BotaoEstilo from './components/BotaoEstilo';
function App() {
return (
<div className="App">
<h1>Meu App React</h1>
<BotaoEstilo />
</div>
);
};
export default App;
Em seguida, criei a pasta components, onde adicionais os arquivos:
- BotaoEstilo.js (Componente que gerencia a mudança de cor do componente botão dinamicamente, utilizando o hook useState, if ternário e função onClick)
- BotaoEstilo.module.css (Para estilizar o botão, seguindo o padrão Css Module).
Abaixo deixo o código do arquivo BotaoEstilo.js
import styles from './BotaoEstilo.module.css';
import {useState} from 'react';
const BotaoEstilo = () => {
const [opcao, setOpcao] = useState(true);
return (
<div>
<button className={opcao ? styles.temaClaro : styles.temaEscuro} onClick={() => {
if (opcao)
setOpcao(false)
else
setOpcao(true)
}}>Mudar Tema</button>
</div>
);
};
export default BotaoEstilo;
Por fim, deixo o código do arquivo BotaoEstilo.module.css:
.temaClaro {
background-color: white;
color: black;
}
.temaEscuro {
background-color: black;
color: white;
}
Gostou da visão?
