- React
- GraphQL
- Apollo (client pra GraphQL)
- GraphCMS
- 1 - Começando o projeto:
- 2 - Começando o projeto:
- 3 - Começando o projeto:
- 4 - Começando o projeto:
- 5 - Começando o projeto:
Primeiro, instalar a versão mais recente do NODEJS LTS no site: https://nodejs.org/en/download/
node -v
npm create vite@latest
npm install
É preciso selecionar react-ts para criar o projeto, ir até a pasta criada do projeto e em seguida rodar o servidor.
npm run dev
npm i tailwindcss postcss autoprefixer -D
npx tailwindcss init -p
No arquivo tailwind.config.js na seção Content, é preciso passar os arquivos pro tailwind e dentro dos colchetes botar:
'./src/**/*.tsx'
O que isso significa dizer que:
- ./src -> na pasta source
- /** -> em qualquer pasta
- /*.tsx -> Arquivos que terminarem com TSX
Feito isso, remover de dentro da pasta src, os arquivos .css e .svg que não utilizaremos, e dentro do arquivo App.tsx, remover tudo dentro de return e emcima remover também o count assim como os imports.
No arquivo Main.tsx, remover nos imports o arquivo .css, e na pasta src, criar uma outra pasta chamada styles com o arquivo global.css dentro.
No arquivo global.css, inserir as seguintes linhas:
@tailwind base;
@tailwind components;
@tailwind utilities;
inserir no arquivo main.css:
import './style/global.css'
No arquivo main.css, as tags podem possuir um className, que é uma classe estilizada.