基于 React、Redux、Webpack 和 React-Router 的轻量级前端框架。

痛定思痛。 2023-07-05 13:06 9阅读 0赞

基于 [React][] 、 [Redux][] 、 [Webpack][] 和 [React-Router][] 的轻量级前端框架。

## 特性 ##

*  **快速上手** ，没有其它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 
    前端学习裙：950919261

几秒之后，你将会看到以下输出

![format_png][]

## 使用 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

几秒后，输出以下内容：

![format_png 1][]

`build` 命令会打包所有的资源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在 `dist/` 目录下找到这些文件。

[React]: https://github.com/facebook/react
[Redux]: https://github.com/reduxjs/redux
[Webpack]: https://github.com/webpack/webpack
[React-Router]: https://github.com/ReactTraining/react-router
[Order System]: https://downfuture.com/
[Count]: https://downfuture.com/#/counter
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcxLnR1aWNvb2wuY29tL0VuaU1qZUUucG5nIXdlYg?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyLnR1aWNvb2wuY29tL1lmWUpWdnYucG5nIXdlYg?x-oss-process=image/format,png