基于webpack4搭建的react项目框架

简介:

介绍

框架介绍,使用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?lazy&name=[name]!./Home";
// 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装
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 ? <LoadOver/> : <div>加载动画</div>
)
}
}
export default LazyLoad
// 通过封装的懒加载组件过度 增加加载动画
<LazyLoad Loading={Home} />

路由配置

框架按照模块划分,pages文件夹下具有route.js 即为一个模块


// 通过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?lazy&name=[name]!./User";
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) ? reducer[action.type](state, action) : state
}
}
// 创建页面级别的store
const User_Info_fetch_Memo = 'User_Info_fetch_Memo'
const store = {
// 初始化数据
state: {
memo: 9,
test: 0
},
action: {
async fetchMemo (params) {
return {
type: User_Info_fetch_Memo,
callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}},
payload: params
}
},
...
},
reducer: {
[User_Info_fetch_Memo] (prevState = {}, {payload}) {
console.log('reducer--->',payload)
return {
...prevState,
memo: payload.memo
}
},
...
}
}
export default createReducer(store)
export const action = store.action
// 最终在模块界别组合 [当然模块也有公共的数据(见Home模块下的demo写法)]
import {combineReducers} from 'redux'
import info from './Info/store'
export default combineReducers({
info,
。。。
})
// 最终rudex文件夹下的store.js 会去取所有模块下的store.js 组成一个大的store也就是我们最终仓库
// --------使用------
// 首先在app.js中将store和app关联
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// reducer即我们最终
import reducer from './redux/store.js'
// 用户异步action的中间件
import middleware from './utils/middleware.js'
let store = createStore(reducer, middleware)
<Provider store={store}>
。。。
</Provider>
// 然后组件调用 只需要在组件导出时候 使用connent链接即可
import React, {Component} from 'react'
import {connect} from 'react-redux'
// 从页面级别的store中导出action
import {action} from './store'
class Demo extends Component {
const handle = () => {
// 触发action
this.props.dispatch(action.fetchMemo({}))
}
render () {
console.log(this.props.test)
return <div onClick={this.handle}>ss</div>
}
}
export default connect(state => ({
test: state.user.memo.test
}) )(demo)

关于redux中间件


// 与其说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)

原文发布时间:2018年06月30日

作者:前端栈开发

本文来源:CSDN  如需转载请联系原作者

目录
相关文章
|
9天前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
66 0
|
9天前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
217 0
|
9天前
|
前端开发 网络架构 UED
React Next.js框架
React Next.js 是一个基于 React 的服务器渲染框架,用于构建高性能的现代Web应用。它提供内置的服务器渲染、静态导出、动态路由功能,并自动进行代码拆分。Next.js 还支持热模块替换、CSS-in-JS 和客户端路由,拥有丰富的插件生态系统,简化了开发过程,提升了应用的性能和用户体验。
|
9天前
|
前端开发 JavaScript 开发者
React 项目用过什么脚手架(本题是开放性题目)
React 项目用过什么脚手架(本题是开放性题目)
17 0
|
9天前
|
前端开发 JavaScript API
blog-engine-07-gatsby 建极速网站和应用程序 基于React的最佳框架,具备性能、可扩展性和安全性。
探索多种博客引擎:Jekyll, Hugo, Hexo, Pelican, Gatsby, VuePress, Nuxt.js 和 Middleman。了解Gatsby,基于React的静态站点生成器,以其特性如React基础、静态生成、广泛插件支持、简便部署和现代开发流程脱颖而出。安装Gatsby需先安装Node.js,然后通过`gatsby-cli`创建新站点。开发涉及编写页面、本地开发、生成静态文件及部署。尽管Gatsby具有现代化和高性能优势,但也存在学习曲线和配置复杂性的挑战。
|
9天前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
9天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
32 0
|
9天前
|
前端开发 JavaScript 搜索推荐
react-app框架——使用monaco editor实现online编辑html代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
44 3
|
9天前
|
前端开发 JavaScript Linux
relectron框架——打包前端vue3、react为pc端exe可执行程序
relectron框架——打包前端vue3、react为pc端exe可执行程序
40 1
|
9天前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。