• 介绍

    本章节讲述了如何使用Choerodon 和React 开发一个全新的模块。

    开发新模块

    1、在本地创建新模块的文件夹。

    $ mkdir -p choerodon-front-demo/demo/src/app/demo/containers
    

    2、在文件夹下创建config.jswebpack.config.js,并修改。

    $ cd choerodon-front-demo
    $ touch config.js
    
    // config.js
    const config = {
      local: true, //是否为本地开发
      clientId: 'localhost', // 必须填入响应的客户端(本地开发)
      titlename: 'Demo', //项目页面的title名称
      // favicon: 'favicon.ico', //项目页面的icon图片名称
      theme: {
        'primary-color': '#3F51B5',
      },
      cookieServer: '', // 子域名token共享
      server: 'http://localhost:8080', // 后端接口服务器地址
      port: 9090 // 端口
    };
    
    module.exports = config;
    

    3、在子文件夹下创建package.json文件,并修改。

    $ cd demo
    $ touch package.json
    
    {
      "name": "choerodon-front-demo",
      "version": "1.0.0",
      "description": "",
      "main": "src/app/demo/containers/DEMOIndex.js",
      "scripts": {
        "start": "choerodon-front-boot start --config ../config.js",
        "build": "choerodon-front-boot build --config ../config.js"
      },
      "contributors": [
        "choerodon"
      ],
      "license": "ISC",
      "dependencies": {
        "choerodon-front-boot": "0.7.2"
      }
    }
    

    4、创建Index文件,文件名为模块名大写+Index

    $ touch src/app/demo/containers/DEMOIndex.js
    
    // DEMOIndex.js
    import React from 'react';
    import { Route, Switch } from 'react-router-dom';
    import { inject } from 'mobx-react';
    import { asyncLocaleProvider, asyncRouter, nomatch } from 'choerodon-front-boot';
    
    @inject('AppState')
    class DEMOIndex extends React.Component {
        render() {
            const { match, AppState } = this.props;
            return (
                <Switch>
                    <Route path={'*'} component={nomatch} />
                </Switch>
            );
        }
    }
    
    export default DEMOIndex;
    

    5、在package.json 同级的目录下,安装并启动。

    $ npm install
    $ npm run start
    

    6、查看效果

    在浏览器中键入 localhost:9090,查看页面效果。