基于React、Redux、Webpack 和 React-Router的项目模板。 #89

简介: 基于React、Redux、Webpack 和 React-Router的项目模板。 #89

卢西恩


特性

  • 快速上手,只要会React、Redux、Webpack、React-Router,快速搭建中后台管理平台。
  • 路由匹配,包含url输入、js跳转、菜单切换。
  • Action,不需要重复定义action,比如等待Action、成功Actoin、失败Action。写更少的行动,完成更多的事。
  • 自定义中间件,帮助Action完成异步操作。
  • immutable,更简洁,持久化数据结构。
  • 简单实现combineReducers,监听当前正在触发的action。
  • 完全自定义的cli,内置redux、webpack、react-router、classnames、dayjs、eslint等。

例子

是否可用于生产环境?

当然!公司内用于生产环境的项目估计已经有 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/


源码


卢西恩


未来

  • jsx升级TypeScript
  • webpack 5.0.0
  • React 17.0.0
目录
相关文章
|
2月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
2月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
36 0
|
2月前
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
|
1月前
|
前端开发 JavaScript 安全
|
1月前
|
前端开发 JavaScript Java
|
2月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(二)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
2月前
|
前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(一)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
2月前
|
JavaScript 前端开发
React结合Redux实现Todolist
React结合Redux实现Todolist
12 0
|
2月前
|
JavaScript 前端开发
在项目中引入webpack打包工具
在项目中引入webpack打包工具
|
2月前
|
前端开发 JavaScript API
Github 上 8 个很棒的 React 项目
Github 上 8 个很棒的 React 项目

热门文章

最新文章

相关产品

  • 云迁移中心