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:

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

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

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

Mengintegrasikan Tailwind CSS

Shadcn Leverages Tailwind CSS untuk Styling. Pasangnya menggunakan:

Import TailWind arahan ke dalam

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

:

index.css

Konfigurasi alias jalan dalam

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

:

tsconfig.json

Pasang jenis nod dan kemas kini

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

:

vite.config.ts

3

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

Pasang 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>

Pilih pilihan pilihan anda semasa proses pemasangan.

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

menggunakan komponen shadcn

mari kita gunakan komponen sebagai contoh. Tambahnya dengan menggunakan:

Import dan gunakannya dalam komponen React anda:

hover-card

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

Menyesuaikan komponen Shadcn

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

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

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!