明霞山资源网 Design By www.htccd.com
介绍
框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载
手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解
启动
git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start
打包
yarn build
目录结构
+node_modules -src +asset +Layout +pages +redux +utils +app.js +index.html +index.js .babelrc package.json postcss.config.js webpack.config.js //webpack 配置
bundle-loader 懒加载使用
// webpack.config.js 配置 module: { rules: [ { test: /\.bundle\.js$/, use: { loader: 'bundle-loader', options: { name: '[name]', lazy: true } } } ] } // 页面引入组件 import Home from "bundle-loader"; // 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装 import React, {Component} from 'react' import { withRouter } from 'react-router-dom' class LazyLoad extends Component { state = { LoadOver: null } componentWillMount() { this.props.Loading(c => { this.setState({ LoadOver: withRouter(c.default) }) }) } render() { let {LoadOver} = this.state; return ( LoadOver "htmlcode">// 通过require.context读取模块下路由文件 const files = require.context('./pages', true, /route\.js$/) let routers = files.keys().reduce((routers, route) => { let router = files(route).default return routers.concat(router) }, []) // 模块路由文件格式 import User from "bundle-loader"; export default [ { path: '/user', component: User }, { path: '/user/:id', component: User } ]redux 使用介绍
// ---------创建 -------- // 为了不免action、reducer 在不同文件 来回切换 对象的形式创建 // createReducer 将书写格式创建成rudex认识的reducer export function createReducer({state: initState, reducer}) { return (state = initState, action) => { return reducer.hasOwnProperty(action.type) "htmlcode">// 与其说redux中间件不如说action中间件 // 中间件执行时机 即每个action触发之前执行 // import { applyMiddleware } from 'redux' import fetchProxy from './fetchProxy'; // 中间件 是三个嵌套的函数 第一个入参为整个store 第二个为store.dispatch 第三个为本次触发的action // 简单封装的中间件 没有对请求失败做过多处理 目的在与项错误处理机制给到页面处理 const middleware = ({getState}) => next => async action => { // 此时的aciton还没有被执行 const {type, callAPI, payload} = await action // 没有异步请求直接返回action if (!callAPI) return next({type, payload}) // 请求数据 const res = await fetchProxy(callAPI) // 请求数据失败 提示 if (res.status !== 200) return console.log('网络错误!') // 请求成功 返回data return next({type, payload: res.data}) } export default applyMiddleware(middleware)以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...