如何在 React.js 中使用 Shadcn/UI-Python教程-PHP中文网

如何在 React.js 中使用 Shadcn/UI

了解如何利用 React.js 中的 Shadcn/UI 来构建可定制的轻量级界面。了解如何将其与 EchoAPI 集成以实现高效的 API 管理和测试。非常适合希望增强 React.js 项目的开发人员！

How to Use Shadcn/UI in React.js

使用 Shadcn/UI 构建现代界面

创建时尚的用户界面是前端开发人员的首要目标。随着组件库的兴起，这项任务变得更加简化。今天，让我们深入了解 Shadcn/UI，一个强大的、可定制的 React.js 组件库。无论您是 React.js 新手还是经验丰富的开发人员，Shadcn/UI 都可以增强应用程序的设计，而不会因大型框架而变得臃肿。此外，我们还将探索如何集成 API 和 EchoAPI 等工具，使开发更加顺利。

Shadcn/UI是什么？

在开始设置之前，让我们先澄清一下 Shadcn/UI 是什么以及为什么它是您的 React.js 项目的绝佳选择。

How to Use Shadcn/UI in React.js

Shadcn/UI 是为 React.js 构建的可定制组件库。与 Material UI 或 Bootstrap 等大型框架不同，Shadcn/UI 可以更好地控制组件的外观和感觉。它提供了核心构建块，允许您创建独特的界面，而不受预定义主题的限制。

为什么选择Shadcn/UI？

轻量级：与捆绑大量未使用组件的庞大库不同，Shadcn/UI 仅提供您需要的内容。
可定制：定制组件以满足您项目的独特要求。
针对 React.js 进行了优化：无缝集成让您专注于编码而不是配置。
API 就绪： 与 EchoAPI 等工具兼容，简化 React 应用程序中 API 端点的管理和测试。

将 Shadcn/UI 集成到您的 React.js 项目中

现在您已经了解了 Shadcn/UI 是什么，让我们逐步了解将其集成到 React.js 项目中的过程。本指南假设您对 React 有基本的了解，并且您的计算机上安装了 Node.js。

第 1 步：创建一个新的 React.js 项目

如果你已经有React.js项目，可以跳过这一步。否则，使用以下命令创建一个新项目：

npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start

登录后复制

这将创建一个名为 my-shadcn-ui-app 的新 React.js 项目并启动开发服务器。您现在应该看到默认的 React 应用程序正在运行。

第二步：安装Shadcn/UI

要手动添加必要的依赖项，请按照以下步骤操作：

添加 Tailwind CSS： Shadcn/UI 组件使用 Tailwind CSS 进行样式设置。请按照 Tailwind CSS 安装指南开始。
添加依赖项：

npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start

登录后复制

添加图标库：
- 对于默认样式：npm install lucide-react
- 纽约风格：npm install @radix-ui/react-icons
配置路径别名：
在 tsconfig.json 中，根据首选配置路径别名。这是使用 @ 别名的示例：

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

登录后复制

您现在可以开始向项目添加组件。

第三步：导入并使用Shadcn/UI组件

让我们向您的 React.js 应用添加一些 Shadcn/UI 组件。在您的 src/App.js 文件中，导入并使用像 Button 这样的组件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

登录后复制

Button 组件在 App 组件中导入并使用。使用各种道具对其进行自定义 - 在本例中，variant="primary" 用于主要样式。

第4步：自定义Shadcn/UI主题

Shadcn/UI 的最佳功能之一是它的可定制性。您可以调整组件以匹配您的应用程序的设计语言。

a) 创建自定义主题文件

在 src 目录中创建一个 theme.js 文件：

import React from 'react';
import { Button } from 'shadcn-ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Shadcn/UI App</h1>
        <Button variant="primary">Click Me!</Button>
      </header>
    </div>
  );
}

export default App;

登录后复制

b) 将主题应用到您的组件

使用 ThemeProvider 组件应用您的主题。按如下方式更新您的 src/App.js：

const theme = {
  colors: {
    primary: '#ff6347', // Tomato color
    secondary: '#4caf50', // Green color
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Georgia, serif',
  },
};

export default theme;

登录后复制

在此更新的代码中，ThemeProvider 包装您的应用程序，并将自定义主题作为道具传递。