使用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中文网其他相关文章！