react+react-router4+redux最新版构建分享
相信很多刚入坑React的小伙伴们有一个同样的疑惑,由于React相关库不断的再进行版本迭代,网上很多以前的技术分享变得不再适用。比如 在此之前你先需要懂得基本的 nodejs 操作与 ES2015 语法。 首先给出项目结构: --component //组件文件夹 ?--hello.jsx //组件jsx --more-component //嵌套组件可以放在次级目录 --js ?--common.js //自己常用的js方法, --css ?--hello.css //每个组件对应一个css文件,便于管理 --img --route ?--router.jsx //路由配置组件 --store //redux相关 ?--action.js //状态发起动作方法 ?--reducer.js //接受动作后改变状态 entry.jsx //打包入口 temp.html //打包模板html webpack.config.js //webpack配置 项目结构根据个人习惯可以修改,但原则上要保持条理清晰,有时候还要根据项目结构修改webpack配置等。 接下来配置 const webpack = require("webpack"); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const compiler = webpack({ entry: "./entry.jsx", output:{ path: path.resolve(__dirname,"./dist"),filename:"code.min.js" },module:{ rules:[ { test:/.css$/,include:[path.resolve(__dirname,"./")],loader:"style-loader!css-loader" },{ test:/.js$/,loader:"babel-loader",options: { presets: ['es2015',"stage-0"] } },{ test:/.jsx$/,"stage-0","react"] } },{ test: /.(png|jpeg|jpg)$/,"./img")],loader:'file-loader?name=img/[name]-[hash].[ext]' } ] },plugins: [ new HtmlWebpackPlugin({ template:'./temp.html',filename:'./spa.html',inject:'body' }) ] }); const watching = compiler.watch({ aggregateTimeout: 300,poll: undefined },(err,stats) => { if (err || stats.hasErrors())console.log(stats.compilation.errors); else{console.log('success')} }) 当编写好 做好了这些准备工作,接下来正式进入 import React from 'react' import { render } from 'react-dom' import { createStore } from 'redux' import todoApp from './store/reducers' import Main from './route/router.jsx' let store = createStore(todoApp) render( <Main store={store} />,document.body ) 上面 接下来我们将编写路由组件 import React from 'react' import { HashRouter as Router,Route } from 'react-router-dom' import { Provider } from 'react-redux' import Hello from '../component/hello.jsx'; class Main extends React.Component { render(){ const { store } = this.props return ( <Router hashType="noslash"> <Provider store={store}> <Route render={({ location }) => { return( <div key={location.pathname} name={location.pathname}> <Route location={location} path="/hello" component={Hello}/> </div> ) }}/> </Provider> </Router> ) } } export default Main ; 这与 关于业务组件的编写,相信大家都很熟悉,即使以前使用 import '../css/xxx.css'; import React from 'react'; import { connect } from 'react-redux'; import * as action from '../store/actions'; class Hello extends React.Component{ constructor(props){ super(props) this.state={...} } componentDidMount(){ this.props.dispatch(action.hi()) } render() { const { name } = this.props return ( <div>{name}</div> ) } } export default connect(state => state)(Hello) 在这个组件里,我们将 我们需要改变 export const hi = () => { return { type:'hi',...//其他你需要的属性 } } 根据 接收 import { combineReducers } from 'redux' const name = (state='',action) => { switch (action.type) { case 'hi': return "hello world!" default : return state } } const todoApp = combineReducers({ name,//more state }) export default todoApp;
当以上文件利用webpack编译打包好以后,一个最简单的react全家桶spa就完成了(虽然只包含一个组件)。 关于 如果感兴趣可以访问我的成熟项目源码React医疗类移动app --Github,欢迎各位多多指教,多多star ^_^ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |