基於React、Redux、Webpack 和 React-Router的項目模板。

Lucian

特性

• 快速上手，沒有其它cli這麼多概念，只要會React、Redux、Webpack、React-Router，快速搭建中後臺管理平臺。
• 路由匹配，包含url輸入、js跳轉、菜單切換。
• Action，不須要重複定義action，好比等待Action、成功Actoin、失敗Action。寫更少的action，完成更多的事。
• 自定義中間件，幫助Action完成異步操做。
• immutable，更簡潔，持久化數據結構。
• 簡單實現combineReducers，監聽當前正在觸發的action。
• 徹底自定義的cli，內置redux、webpack、react-router、classnames、dayjs、eslint等。

例子

• Order System: 簡單的訂單系統
• Count: 簡單計數器

是否可用於生產環境？

固然！公司內用於生產環境的項目估計已經有 3+ 。

是否支持 IE8 ？

不支持。

快速上手

建立新應用

$ git clone https://github.com/Cherry-Team/lucian.git

$ cd lucian

$ npm install

$ npm start

幾秒以後，你將會看到如下輸出

使用 antd

import React, { Component } from 'react';
import { Button } from 'antd';
class Index extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Button>Button</Button>
        );
    }
}

export default Index;

定義路由

咱們要寫個應用來顯示列表，首先是建立路由。

新建 route component pages/List.js，內容以下：

import React from 'react';

const List= (props) => (
  <h2>List</h2>
);

export default List;

添加路由信息到路由表，編輯 routeConfig.js

const List = lazy(() => import(/* webpackChunkName: "List"*/'./pages/List/index'));
const routes = [
    {
        path: '/list',
        component: List
    }
];

編寫 UI Component

隨着應用的發展，你會須要在多個頁面分享 UI 元素 (或在一個頁面使用屢次)，根目錄下新建components/LayoutHeader/index.jsx

import React, { Component } from 'react';
import { Avatar, Dropdown, Menu } from 'antd';

const menu = (
    <Menu>
        <Menu.Item>
            <a target="_blank" rel="noopener noreferrer" href={false}>
                退出
            </a>
        </Menu.Item>
    </Menu>
);

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <section>
                <div>
                    訂單系統
                </div>
                <div>
                    <span>消息</span>
                    <Dropdown overlay={menu}>
                        <div>
                            <Avatar size={28} icon="user" />
                            <span >Faker</span>
                        </div>
                    </Dropdown>
                </div>
            </section>
        );
    }
}

export default Index;

使用 Redux 完成計數器

新建pages/Counter/index.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as action from '../../actions/counter';
import './index.less';

const mapStateToProps = state => {
    const { counter } = state;
    return {
        counter: counter.toJS()
    };
};

const mapDispatchToProps = (dispatch) => ({
    add: (...args) => dispatch(action.add(...args)),
    reduce: (...args) => dispatch(action.reduce(...args))
});

class Index extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <section className="counter">
                <button onClick={() => this.props.add(this.props.counter.count)}>+</button>
                <span>count is: {this.props.counter.count}</span>
                <button onClick={() => this.props.reduce(this.props.counter.count)}>-</button>
            </section>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index);

建立actions/counter.js

export const ADD = 'add';
export function add(params) {
    return {
        type: ADD,
        params
    };
}

export const REDUCE = 'reduce';
export function reduce(params) {
    return {
        type: REDUCE,
        params
    };
}

而後新建reducers/counter.js

import { fromJS } from 'immutable';
import { createReducer } from 'redux-immutablejs';
import {
    ADD,
    REDUCE
} from './../actions/counter';

const initialState = fromJS({
    count: 0
});

export default createReducer(initialState, {
    [ADD]: (state, { params }) => {
        return state.set('count', params + 1);
    },
    [REDUCE]: (state, { params }) => {
        return state.set('count', params - 1);
    }
});

而後在reducers/rootReducers.js中引入

// reducers配置文件
import { routerReducer } from 'react-router-redux';
import orderList from './orderList';
import counter from './counter';

// 保存當前正在執行的action type
const combineReducers = (reducers) => {
    return (state = {}, action) => {
        return Object.keys(reducers).reduce((nextState, key) => {
            nextState[key] = reducers[key](state[key], action);
            return nextState;
        }, { actionType: action.type });
    };
};

const rootReducers = combineReducers({
    counter,
    orderList,
    router: routerReducer
});
export default rootReducers;

構建應用

完成開發而且在開發環境驗證以後，就須要部署給咱們的用戶了。先執行下面的命令：

$ npm run build

幾秒後，輸出如下內容：

build 命令會打包全部的資源，包含 JavaScript, CSS, web fonts, images, html 等。而後你能夠在 dist/ 目錄下找到這些文件。

源碼

Lucian

將來

• jsx升級TypeScript
• ant-design 4.0.0
• webpack 5.0.0
• React 17.0.0