Tingkatkan aplikasi React anda dengan utiliti dan komponen Shadcn

Tutorial ini membimbing anda melalui mengintegrasikan Shadcn, perpustakaan komponen React serba boleh, ke dalam projek anda. Kami akan meliputi persediaan, konfigurasi, dan penyesuaian, sesuai untuk pemula dan pemaju berpengalaman. Kod sumber lengkap boleh didapati di GitHub.

Memahami Shadcn

Shadcn menawarkan koleksi komponen dan utiliti yang telah dibina sebelum ini, menyelaraskan perkembangan React. Dibina di atas CSS Tailwind dan Radix UI, ia menyediakan kebolehcapaian yang tinggi dan integrasi lancar dengan pendekatan utiliti Tailwind.

prasyarat

Sebelum anda memulakan, pastikan anda mempunyai pemahaman javascript dan react.js, dengan Node.js dipasang. Kebiasaan dengan CSS, HTML, dan Tailwind CSS bermanfaat.

Mewujudkan aplikasi React baru

Mula dengan membuat projek React baru menggunakan Vite:

npm create vite@latest

Pilih nama projek dan pilih TypeScript (disyorkan untuk keserasian Shadcn yang optimum). Selepas penciptaan projek, navigasi ke direktori projek dan jalankan:

npm install
npm run dev

Mengintegrasikan Tailwind CSS

Shadcn Leverages Tailwind CSS untuk Styling. Pasangnya menggunakan:

Import TailWind arahan ke dalam

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

:

index.css

Konfigurasi alias jalan dalam

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

:

tsconfig.json

Pasang jenis nod dan kemas kini

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

:

vite.config.ts

3

npm i -D @types/node

Pasang 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"),
    },
  },
})

Pilih pilihan pilihan anda semasa proses pemasangan.

npx shadcn-ui@latest init

menggunakan komponen shadcn

mari kita gunakan komponen sebagai contoh. Tambahnya dengan menggunakan:

Import dan gunakannya dalam komponen React anda:

hover-card

npx shadcn-ui@latest add hover-card

Menyesuaikan komponen Shadcn

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

// ... your component ...

Gunakan kelas CSS Tailwind untuk menyesuaikan komponen Shadcn:

Kesimpulan

Mengintegrasikan Shadcn ke dalam aliran kerja React anda adalah mudah. Dengan langkah-langkah yang digariskan di atas, anda boleh memanfaatkan komponen dan utiliti yang kuat untuk membina aplikasi yang cekap dan mesra pengguna. Terokai dokumentasi Shadcn dan pertimbangkan untuk menggunakan boilerplate React Pra-dibina untuk permulaan yang lebih cepat.

Atas ialah kandungan terperinci Tingkatkan aplikasi React anda dengan utiliti dan komponen Shadcn. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!