首頁 >後端開發 >Python教學 >如何在 React.js 中使用 Shadcn/UI

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

Barbara Streisand原創: 2024-12-30 19:50:18661瀏覽

如何在 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 包裝您的應用程序，並將自訂主題作為道具傳遞。