DevExtreme React 應用程序模板可幫助您創建一個簡單的 React 應用程序，其中包含一個導航菜單和響應式布局中的幾個示例視圖。

DevExtreme v21.2.3最新版下載

添加自定義工具欄項

應用程序模板使用 DevExtreme Toolbar 組件，Toolbar 是 Header 組件的一部分，其配置位于 src\components\header\header.js 文件中。 要添加自定義工具欄項目，請打開此文件并在工具欄內添加一個 Item 元素。

以下代碼向工具欄添加了一個搜索按鈕：

header.js

// ...
export default ({ ..., search }) => (
<header className={'header-component'}>
<Toolbar className={'header-toolbar'}>
{/* ... */}
<Item location="after">
<Button icon="search" onClick={search} />
</Item>
{/* ... */}
</Toolbar>
</header>
)

side-nav-outer-toolbar.js

// ...
export default function ({ title, children }) {
// ...
const search = useCallback(() => {
console.log("search");
}, []);

return (
<div className={'side-nav-outer-toolbar'}>
<Header ...
search={search}
/>
{/* ... */}
</div>
);
}

在上面的代碼中，按鈕單擊處理程序在 SideNavOuterToolbar 組件中聲明。 當使用外部工具欄布局時，此組件適用。 如果應用程序使用內部工具欄布局，請將相同的代碼添加到 SideNavInnerToolbar 組件。

配置主題

切換主題

DevExtreme React 模板為視圖內容使用一個主主題，為導航菜單使用一個附加主題（色板）。 要切換到另一個主題，請打開 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 文件并為 baseTheme 字段指定一個主題名稱：

metadata.base.json

{
// ...
"baseTheme": "material.blue.light",
// ...
}

運行以下命令來重建主題：

npm run build-themes

創建自定義主題

您可以使用 DevExtreme ThemeBuilder 基于預定義的主題創建自定義主題，請按照以下步驟操作：

1. 將 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 導入 ThemeBuilder。

2. 自定義主題。

3. 將主題元數據導出到初始文件。

運行以下命令來重建主題：

npm run build-themes

應用色板

色板是與主要配色方案一起使用的輔助配色方案。

在 DevExtreme React 模板中，顏色樣本應用于導航菜單并在 src\themes\metadata.additional.json 文件中配置。 要將這個色板應用到一個元素，添加 dx-swatch-additional 類到這個元素：

JSX

<div className={'dx-swatch-additional'}>
<!-- Your content here -->
</div>

將主題變量應用于自定義元素

主題變量在 src\themes\generated\variables.base.scss 和 src\themes\generated\variables.additional.scss 文件中定義，將它們應用于自定義元素，以便元素與應用程序的其余部分具有統一的外觀。

以下代碼應用 $base-accent 變量作為 my-element 的背景顏色：

SCSS

// Your SCSS file
@import "../../../themes/generated/variables.base.scss";

#my-element {
background-color: $base-accent;
}

驗證

DevExtreme React 應用程序包括身份驗證 UI 和 API。 配置客戶端路由，以便未經身份驗證的用戶只能導航到身份驗證頁面，這些頁面允許用戶登錄、創建新帳戶或重置密碼。

身份驗證頁面由 UnauthenticatedContent.js 組件呈現，應用程序的其余部分由 Content.js 組件呈現。

重要提示：不要依賴客戶端路由來保護您的應用程序免受未經授權的訪問，始終在后端驗證用戶憑據。

與后端集成

 后端請求的存根身份驗證函數位于 src\api\auth.js 文件中，更新這些函數以向您的后端發出實際請求。

每個函數都返回一個具有以下字段的對象：

獲取用戶信息

用戶信息存儲在 contexts\auth.js 模塊中聲明的上下文中。

要從應用程序的任何部分訪問用戶信息，請使用 useAuth hook。 這個hook返回一個具有以下字段的對象：

以下代碼使用 useAuth hook訪問用戶信息：

JSX

import { useAuth } from './contexts/auth';

export default function() {
const { user } = useAuth();
if (user) {
// User is authenticated
...
}
...
}

創建一個空的應用程序

要生成沒有視圖和導航菜單的應用程序，請使用 --empty 標志：

npx devextreme-cli new react-app app-name --empty

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExpress技術交流群5：742234706      歡迎一起進群討論