Curso ministrado por Luiz Fernando Ribeiro
- normalize
- absolute import
- import de imagem
- imports dinâmicos
- classnames
A aplicação é um cardápio de restaurante, separados em abas de acordo com os tipos de alimentos.
Desenvolvido com react e typescript.
Create React App (CRA) é uma biblioteca que cria a estrutura inicial de um projeto React com base nos padrões comuns adotados pela comunidade, incluindo ferramentas como testes.
Há várias maneiras de estruturar projetos com React dependendo das necessidades e preferências de quem está usando a ferramenta. Para isso o CRA oferece templates, que são variações do projeto padrão.
O CRA possui dois templates por padrão:
-
cra-template que é o comum, usado quando nenhum template é definido;
-
cra-template-typescript que possui todas as características do template acima junto de configurações necessárias para usar TypeScript no projeto.
Como qualquer um pode criar seu template, é possível criar vários projetos personalizados com React, pois templates podem ser disponibilizados como pacotes do npm.
Pesquisando por cra-template-* no site do npm podemos encontrar vários templates criados pela comunidade.
O padrão adotado é sempre cra-template- seguido do nome do template.
- css-modules
- sass
O Sass é uma variação do CSS, com funcionalidades adicionais, que agiliza a criação de estilos e deve ser compilada para CSS.
O Sass oferece algumas ferramentas que facilitam a escrita, como aninhamento. É escrito em desenvolvimento e compilado para CSS puro.
O Sass é utilizado pelos componentes via CSS Modules.
O CSS Modules e o TypeScript usados em componentes são convertidos em JavaScript para a aplicação rodar nos navegadores, e o Sass é convertido para CSS.
O typescript-plugin-css-modules oferece tipagem para os estilos e facilita o uso dos estilos como módulos em componentes pois possibilita o uso do autocomplete.
Todas essas bibliotecas trabalham juntas, fazendo algum tipo de conversão para que o código escrito seja compreendido pelo navegador.
- Sass facilita a escrita de estilos
- CSS modules facilita a aplicação desses estilos.
- TypeScript ajuda na experiência de desenvolvimento dos componentes.
Para adicionar uma imagem svg, importamos ela para que o webpack entenda o source (src) como um arquivo estático e não como uma string qualquer no momento de build.
Para o import absoluto, configuramos o arquivo tsconfig.json, adicionando o atributo baseUrl
e definindo como src.
Desta forma, indicamos a url base para os imports, isso evita voltar pastas ao importar um arquivos
A fonte externa aplicada foi a italiana
, retirada do google fonts, localizada em https://fonts.google.com/
.
O normalize é uma alternativa para redefinições de css.
Ao invés de fazer o reset do css, podemos fazer o normalize utilizando a propriedade @import-normalize
que atualmente não está em funcionamento.
Ou, usar o comando npm install normalize.css
e importar na aplicação, antes do index.css principal.
É uma metodologia ou padrão css usada, essa sigla significa Block Element Modifier (Bloco de Elemento Modificador) e consiste em nomear classes para os elementos da marcação html baseado na função estrutural do elemento e não na sua função de apresentação.
O classnames é uma biblioteca, serve como uma maneira de não ficar concatenando vários nomes de classes que precisam ser condicionais no mesmo elemento, utilizando a sintaxe de objetos.
O operador typeof permite inferir a tipagem de um objeto sem a necessidade de criar uma interface.
Utilizamos [] em volta do nome da chave de um objeto quando o valor da chave é dinâmico. Ex: classNames({ [styles['ativo']] = true; })
Quando a condição é sempre true, então a sintaxe de objeto não é necessária. Ex:
<div
className={classNames({
[styles.item__tipo]: true,
[styles[`item__tipo__${category.label.toLowerCase()}`]]: true,
})}
>
{category.label}
</div>
Pode ser substituído por:
<div
className={classNames(
styles.item__tipo,
styles[`item__tipo__${category.label.toLowerCase()}`]
)}
>
{category.label}
</div>
Ao adicionar o caminho da localização das imagens no source das imagens dos itens do cardápio, o React entende que estamos passando uma string e não o caminho.
Precisamos especificar isso para ele, para isso usamos a pasta public
.
Ao gerar arquivos utilizados em produção com o comando npm run build
, podemos verificar quais arquivos estarão presentes nesse ambiente, isso pode te ajudar caso esteja perdido em relação aos caminhos de pastas.
Podemos utilizar o spread operator para não precisar passar as props manualmente quando temos total controle do componente.