Verbessern Sie Ihre React -Apps mit Shadcn -Dienstprogrammen und Komponenten

Dieses Tutorial führt Sie durch die Integration von Shadcn, einer vielseitigen React -Komponentenbibliothek, in Ihre Projekte. Wir werden Setup, Konfiguration und Anpassung abdecken, die sowohl für Anfänger als auch für erfahrene Entwickler geeignet sind. Der vollständige Quellcode ist auf Github verfügbar.

Shadcn

verstehen

Shadcn bietet eine reichhaltige Sammlung vorgefertigter Komponenten und Dienstprogramme, die die Entwicklung der Reaktierung entwickeln. Aufbauend auf Rückenwind-CSS und Radix UI bietet sie eine hohe Anpassbarkeit und eine nahtlose Integration in den Utility-First-Ansatz von Tailwind.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie ein solides Verständnis für JavaScript und React.js haben, wobei Node.js installiert ist. Vertrautheit mit CSS, HTML und Rückenwind -CSS ist von Vorteil.

Erstellen einer neuen React -Anwendung

Beginnen Sie mit dem Erstellen eines neuen React -Projekts mit VITE:

npm create vite@latest

Wählen Sie einen Projektnamen und wählen Sie TypeScript (empfohlen für optimale Shadcn -Kompatibilität). Navigieren Sie nach der Projekterstellung zum Projektverzeichnis und rennen Sie:

npm install
npm run dev

Integrieren von Rückenwind -CSS

Shadcn nutzt das Styling -CSS -CSS. Installieren Sie es mit:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Richtlinien importieren index.css

Konfigurieren Sie Pfad -Aliase in

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

:

tsconfig.json

Knotentypen installieren und 🎜>:

/* Path resolution */
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

aktualisieren

vite.config.ts

npm i -D @types/node

Installieren und Konfigurieren von Shadcn

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

shadcn installieren:

Wählen Sie Ihre bevorzugten Optionen während des Installationsprozesses aus.

npx shadcn-ui@latest init

Verwenden Sie Shadcn -Komponenten

verwenden wir die -Komponente als Beispiel. Fügen Sie es mit:

hinzu

hover-card importieren und verwenden Sie es in Ihrer React -Komponente:

npx shadcn-ui@latest add hover-card

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

// ... your component ...

Anpassen von Shadcn -Komponenten

Verwenden Sie den Tailwind -CSS -Klassen, um Shadcn -Komponenten anzupassen:

<HoverCard>
  <HoverCardTrigger className="rounded-xl text-white py-2 px-4 bg-slate-500">First Shadcn Component</HoverCardTrigger>
  <HoverCardContent className="font-bold text-slate-500 w-max">My first of many components</HoverCardContent>
</HoverCard>

Schlussfolgerung

Shadcn in Ihren React -Workflow integrieren ist unkompliziert. Mit den oben beschriebenen Schritten können Sie seine leistungsstarken Komponenten und Dienstprogramme nutzen, um effiziente und benutzerfreundliche Anwendungen zu erstellen. Erkunden Sie die Shadcn-Dokumentation und überlegen Sie sich, ob Sie vorgefertigte React-Kesselkessel für einen schnelleren Start verwenden.

Das obige ist der detaillierte Inhalt vonVerbessern Sie Ihre React -Apps mit Shadcn -Dienstprogrammen und Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!