dcx-react-library 的安装和配置教程

1. 项目基础介绍和主要编程语言

dcx-react-library 是一个基于 React 的库，提供了一系列即插即用的组件，可以轻松集成到任何项目中。它的特点是 UI/UX 无关，这意味着你可以轻松地根据项目需求进行样式定制。该库主要用于提升 React 应用的开发效率，同时保持样式上的灵活性。主要的编程语言包括 TypeScript 和 JavaScript。

2. 项目使用的关键技术和框架

dcx-react-library 使用了以下关键技术和框架：

• React: 用于构建用户界面的 JavaScript 库。
• TypeScript: 为 JavaScript 提供了类型系统和其他功能，增加了代码的可维护性。
• CSS Custom Properties: 用于定义可重用的样式变量，以便在整个项目中维护一致的样式。
• Storybook: 用于展示组件库的 UI 组件和交互式的开发环境。
• ESLint: 用于识别和报告代码中的模式匹配问题，以保持代码质量。

3. 项目安装和配置的准备工作及详细安装步骤

准备工作

在开始安装 dcx-react-library 之前，请确保你的开发环境已经安装了以下依赖：

• Node.js（推荐版本为 LTS）
• npm 或 yarn（包管理工具）

安装步骤

1. 克隆项目仓库

   在你的本地开发环境中，首先需要克隆项目仓库：

   git clone https://github.com/Capgemini/dcx-react-library.git
   

2. 安装依赖

   进入项目目录后，使用 npm 或 yarn 安装项目依赖：

   cd dcx-react-library
   npm install
   

   或者

   yarn install
   

3. 启动开发服务器

   安装完依赖后，你可以启动开发服务器来查看组件库的演示：

   npm start
   

   或者

   yarn start
   

   这将启动 Storybook，你可以在浏览器中访问 http://localhost:6006 来查看组件。

4. 将组件库添加到你的项目

   在你的 React 项目中，你可以通过以下步骤将 dcx-react-library 添加到你的项目：

   • 安装库：

     npm install @capgeminiuk/dcx-react-library
     

     或者

     yarn add @capgeminiuk/dcx-react-library
     

   • 在你的组件文件中导入需要的组件：

     import { Button } from '@capgeminiuk/dcx-react-library';
     

   • 使用组件：

     const App = () => {
       return (
         <Button label="start" onClick={() => {}} />
       );
     };
     

5. 样式配置

   dcx-react-library 默认不包含任何 CSS，因此你需要导入样式文件来使用某些组件。在你的项目入口文件（例如 src/index.js 或 App.js）中添加以下代码：

   import '@capgeminiuk/dcx-react-library/dist/dcx-react-library.css';
   

   如果你想使用设计系统提供的样式，可以导入相应的样式文件：

   import '@capgeminiuk/dcx-react-library/design-system/index.css';
   

   请确保在导入其他样式文件之前先导入 base.css 文件。

通过以上步骤，你已经完成了 dcx-react-library 的安装和配置。现在你可以开始在项目中使用这个库提供的组件了。