FineUI + React 使用 Antd 组件

棕榈

FineUI + React 使用 Antd 组件





在之前我介绍了 Knockout 与 Vue 在 FineUI 中的使用，并对 FineUI 的控件进行了相应的封装，这里我介绍一下在 FineUI 中如何使用 React ，并用 Antd 组件作为示例。

Angular、React、Vue 应该是现今比较流行的JS框架，其中 React 与 Vue 比较相近，都主要关注于 View，你只要有JS与HTML基础，入门还是比较轻松的。

由于使用 React 需要用到 JSX ，JSX 是 React 创建组件的语法糖，在生产环境中需要将其编译成 JS 文件，我这里将介绍在 FineUICore 项目中如何进行配置。

我们这里使用的是 TSX，它是由 Typescript 来编写的 JSX 文件，在 VS 中可以直接编译成JS文件，这里我采用的是 FineUICore 空项目文件，在项目中创建一个 tsconfig.json 文件

1. {
   
2.   "compilerOptions": {
   
3.     "noImplicitAny": false,
   
4.     "noEmitOnError": true,
   
5.     "removeComments": false,
   
6.     "jsx": "react",
   
7.     "outDir": "wwwroot/js",
   
8.     "sourceMap": true,
   
9.     "target": "es5"
   
10.   },
    
11.   "exclude": [
    
12.     "node_modules",
    
13.     "wwwroot"
    
14.   ]
    
15. }

复制代码

主要添加了以下两行

1. "jsx": "react",
   
2. "outDir": "wwwroot/js",

复制代码

再添加一个 typings.d.ts 类型定义文件

1. declare const F;
   
2. declare const antd;
   
3. declare const React;
   
4. declare const ReactDOM;

复制代码

创建一个 React.cshtml 页面，同时再创建一个 React.tsx 文件
在 React.cshtml 文件中引入 react reactdom antd 的JS文件

1. @section script {
   
2.     <script src="~/react/react.production.min.js"></script>
   
3.     <script src="~/react/react-dom.production.min.js"></script>
   
4.     <script src="~/antd/antd.min.js"></script>
   
5.     <script src="~/js/React.js"></script>
   
6. }

复制代码

到现在为止配置已完成了，下面的工作就是缩写 react 的代码了
下面是我拷贝 Antd 官网中的示例代码：

1. const Button = antd.Button;
   
2. const Progress = antd.Progress;
   
3. const Slider = antd.Slider;
   
4. const Steps = antd.Steps;
   
5. const Step = Steps.Step;
   
6. const Timeline = antd.Timeline;
   
7. const Empty = antd.Empty;
   
8. const Result = antd.Result;
   
9. 
   
10. class App extends React.Component {
    
11.     render() {
    
12.         return <div>
    
13.             <Button type="primary">Primary</Button>
    
14.             <Button>Default</Button>
    
15.             <Button type="dashed">Dashed</Button>
    
16.             <Button type="link">Link</Button>
    
17.             <br />
    
18.             <br />
    
19.             <Progress type="circle" percent={75} />
    
20.             <Progress type="circle" percent={70} status="exception" />
    
21.             <Progress type="circle" percent={100} />
    
22.             <br />
    
23.             <br />
    
24.             <Slider defaultValue={30} />
    
25.             <Slider range defaultValue={[20, 50]} />
    
26.             <br />
    
27.             <br />
    
28.             <Steps current={1}>
    
29.                 <Step title="Finished" description="This is a description." />
    
30.                 <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
    
31.                 <Step title="Waiting" description="This is a description." />
    
32.             </Steps>
    
33.             <br />
    
34.             <br />
    
35.             <Timeline>
    
36.                 <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    
37.                 <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    
38.                 <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
    
39.             </Timeline>
    
40.             <br />
    
41.             <br />
    
42.             <Empty />
    
43.             <br />
    
44.             <br />
    
45.             <Result
    
46.                 status="success"
    
47.                 title="Successfully Purchased Cloud Server ECS!"
    
48.                 subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
    
49.                 extra={[
    
50.                     <Button type="primary" key="console">
    
51.                         Go Console
    
52.                     </Button>,
    
53.                     <Button key="buy">Buy Again</Button>,
    
54.                 ]}
    
55.             />
    
56.         </div>
    
57.     }
    
58. }
    
59. 
    
60. F.ready(() => {
    
61.     ReactDOM.render(<App />, document.getElementById('app'));
    
62. });

复制代码

示例项目到知识星球下载