Publicado em: 17/03/2025
últimos vídeos
veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.
veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.
Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.
Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.
Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.
Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.
Criar um cabeçalho funcional e estilizado contendo:
ProductSubHeader (Container Principal)
Select (Componente Reutilizável)
RangePriceFilter (Específico para Produtos)
Button (Componente Reutilizável)
Organização de arquivos:
1src/
2 components/ # Componentes genéricos
3 ├── Select/
4 └── Button/
5 pages/
6 └── products/
7 ├── components/ # Componentes específicos
8 └── RangePriceFilter/
9 └── ProductSubHeader.tsx1import styles from "./ProductSubHeader.module.css";
2import Select from "../../components/Select";
3import RangePriceFilter from "./components/RangePriceFilter";
4import Button from "../../components/Button";
5const ProductSubHeader = () => (
6 <div className={styles.container}>
7 <h1 className={styles.title}>Produtos</h1>
8 <div className={styles.filters}>
9 <Select />
10 <RangePriceFilter />
11 </div>
12 <Button variant="primary">Novo Produto</Button>
13 </div>
14);Arquivo ProductSubHeader.module.css:
1.container {
2 display: flex;
3 align-items: center;
4 justify-content: space-between;
5 padding: 1rem 2rem;
6 background: white;
7 border-bottom: 1px solid var(--border-color);
8}
9.title {
10 color: var(--text-primary);
11 font-size: 1.5rem;
12}
13.filters {
14 display: flex;
15 gap: 2rem;
16 align-items: center;
17}Técnicas avançadas de estilização:
1/* Reset do estilo nativo */
2select {
3 -webkit-appearance: none;
4 -moz-appearance: none;
5 appearance: none;
6 border: 1px solid var(--border-color);
7 border-radius: 4px;
8 padding: 0.5rem 2rem 0.5rem 1rem;
9 background-color: white;
10 background-image: url("data:image/svg+xml;utf8,<svg...>");
11 background-repeat: no-repeat;
12 background-position: right 0.7rem center;
13 background-size: 1rem;
14 cursor: pointer;
15 transition: border-color 0.3s ease;
16}
17/* Estilo para o container do select */
18.selectContainer {
19 display: flex;
20 align-items: center;
21 gap: 0.5rem;
22}
23.selectContainer label {
24 color: var(--text-secondary);
25 font-size: 0.9rem;
26}Definição no arquivo global:
1:root {
2 --text-primary: #2d3748;
3 /* Azul escuro */
4 --text-secondary: #718096;
5 /* Cinza médio */
6 --border-color: #e2e8f0;
7 /* Cinza claro */
8 --primary-color: #4299e1;
9 /* Azul principal */
10}1display: flex; justify-content: space-between; align-items: center;