React-App – Setup

von

Setup:

  • Projektordner anlegen
  • im Projekt Ordner das App-Template mit Vite bauen:
npm create vite@latest

  • überflüssige Bilder und Dateien entfernen bzw. ungenutzten Code löschen

Hilfreiche Plugins:

Installation TailwindCSS

npm install tailwindcss @tailwindcss/vite

  • vite.config.js erweitern:
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [ tailwindcss() ],
})

  • tailwind im Haupt-CSS-File importieren
@import "tailwindcss"

Tailwind Class Sorter for Prettier

npm install -D prettier prettier-plugin-tailwindcss

  • .prettierrc erweitern:
{ "plugins": ["prettier-plugin-tailwindcss"] }

Javascript Imports Sorter for Prettier

npm i @trivago/prettier-plugin-sort-imports

  • .prettierrc erweitern:
{ "plugins": ["@trivago/prettier-plugin-sort-imports"] }