Demo 界面搭建

安装和初始化

我们需要在命令行中安装 create-react-app 工具，你可能还需要安装yarn。

$ yarn create react-app choerodon-ui-demo
# or
$ npx create-react-app choerodon-ui-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。然后我们进入项目并启动。

$ cd choerodon-ui-demo
$ yarn start

此时浏览器会访问http://localhost:3000/，看到以下的界面就算成功了。

安装必须的依赖

$ yarn add choerodon-ui mobx@4.7.0 mobx-react@6.1.5 axios@0.19.1 mobx-react-lite@1.5.2

验证组件库

引入组件

修改 src/App.js，引入 choerodon-ui 的按钮组件。

import React, { Component } from 'react';
import { Button } from 'choerodon-ui/pro';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Button color="primary">Button</Button>
      </div>
    );
  }
}
export default App;

引入样式

修改 src/App.css，在文件顶部引入 choerodon-ui/dist/choerodon-ui.css 以及 choerodon-ui/dist/choerodon-ui-pro.css。

这里做了样式全局引入，实际项目中建议参考 cra 文档按需处理。

@import '~choerodon-ui/dist/choerodon-ui.css';
@import '~choerodon-ui/dist/choerodon-ui-pro.css';
.App {
  text-align: center;
}
...

查看界面，有了 choerodon-ui 的蓝色按钮组件，组件引入成功。

项目准备完毕，下一章我们先来介绍一下 Pro 组件核心 DataSet 的基本概念。

教程项目仅做最简项目配置界面搭建，其他开发配置流程可以参考create-react-app的官方文档。