使用ShadCN實用程序和組件增強您的React應用程序

>該教程通過將一種多功能的React組件庫將ShadCN集成到您的項目中。 我們將介紹適用於初學者和經驗豐富的開發人員的設置，配置和自定義。完整的源代碼可在GitHub上找到。

>

理解shadcn

ShadCN提供了豐富的預製組件和實用程序，這些集合簡化了反應開發。它基於尾風CSS和Radix UI，提供了高可定制性和與Tailwind的效用優點方法的無縫集成。

先決條件 在開始之前，請確保對JavaScript和React.js進行堅實的掌握，並安裝了Node.js。 熟悉CSS，HTML和Tailwind CSS是有益的。

創建一個新的React應用程序

首先使用VITE創建一個新的React項目：

>選擇一個項目名稱並選擇打字稿（建議用於最佳SHADCN兼容性）。 創建項目後，導航到項目目錄並運行：

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

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

>整合尾風CSS

shadcn利用尾風CSS進行樣式。使用：安裝它

>將尾風指令導入您的

：

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

>

index.css在

中配置路徑別名：

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

tsconfig.json安裝節點類型和更新

：

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

vite.config.ts

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

>安裝和配置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：

在安裝過程中選擇您的首選選項。

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

使用shadcn組件

>讓我們以組件為例。使用：

添加它

hover-card導入並在您的React組件中使用它：>

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

>自定義shadcn組件

>使用tailwind CSS類自定義shadcn組件：>

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

結論

>將ShadCN集成到您的React工作流程中很簡單。 通過上面概述的步驟，您可以利用其功能強大的組件和實用程序來構建高效且用戶友好的應用程序。探索ShadCN文檔，並考慮使用預構建的React鍋板進行更快的啟動。

以上是使用ShadCN實用程序和組件增強您的React應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！