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:

<code class="language-bash">npm create vite@latest</code>

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:

<code class="language-bash">npm install
npm run dev</code>

Integrieren von Rückenwind -CSS

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

<code class="language-bash">npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p</code>

Richtlinien importieren index.css

Konfigurieren Sie Pfad -Aliase in

<code class="language-css">@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";</code>

:

tsconfig.json

Knotentypen installieren und 🎜>:

<code class="language-json">/* Path resolution */
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}</code>

aktualisieren

vite.config.ts

<code class="language-bash">npm i -D @types/node</code>

Installieren und Konfigurieren von Shadcn

<code class="language-javascript">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"),
    },
  },
})</code>

shadcn installieren:

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

<code class="language-bash">npx shadcn-ui@latest init</code>

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:

<code class="language-bash">npx shadcn-ui@latest add hover-card</code>

<code class="language-javascript">import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

// ... your component ...</code>

Anpassen von Shadcn -Komponenten

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

<code class="language-javascript"><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></code>

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!