Este desafio é o Stage 1, parte do conteúdo do evento NWL Return organizado pela Rocketseat, na trilha Impulse.
- Criando com Vite, dê o nome, escolha o tipo
react-ts
para utilizar o projeto do React com Typescript.
npm create vite@lates
- Rodando comandos complementares
-
Vite
-
Commit do projeto
https://github.com/deyvsonaguiar/desafio-1/commit/8d910645db80d4006cf35280bbc7355d45261d6e
- Instalação do Tailwind e inicialização do projeto com a biblioteca postcss
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Siga a documentação para fazer as configurações finais
Installation: Using PostCSS - Tailwind CSS
- Configurando as configurações de path para todos os seus templates para trabalhar com arquivos
.tsx
- Adicionando as diretivas para trabalhar com layers no seu arquivo CSS
-
Commit do projeto
https://github.com/deyvsonaguiar/desafio-1/commit/998c90c64b318ef1bd6a4a92323785c453c7a1bc
- Instalando a biblioteca
npm install --save phosphor-react****
- Importando a biblioteca de ícones dentro do componente Widget.tsx
import { ChatTeardropDots } from "phosphor-react";
- Após importar qualquer ícone necessário, adicione-o onde você precisa dentro do seu método render.
-
Documentação Phosphor
-
Commit do projeto
https://github.com/deyvsonaguiar/desafio-1/commit/5577d530d23c40e66dceda018901640d02531be6
- Reescreva seus elementos com acessibilidade através do Headless, que trás entre outros componentes prontos e que empregam conceitos de acessibilidade como
aria-expanded
em nossos elementos HTML, sem a necessidade de codar do zero.
Aqui utilizamos component Popover encapsulando nosso botão que irá automaticamente abrir/fechar mostrando nosso elemento Popover.Panel que é nosso texto a ser exibido. Sem a necessidade de implementar condicionais e evento click, por exemplo.
-
Documentação Popover
-
Commit do projeto
https://github.com/deyvsonaguiar/desafio-1/commit/854841171d5dfcdb8cc9e4c4ef561db2bcae2d7e