《前端四reactredux脚手架搭建》由会员分享，可在线阅读，更多相关《前端四reactredux脚手架搭建（10页珍藏版）》请在金锄头文库上搜索。
1、1初始化项目基于 nodejscd D:code_fetestcnpm init新建 index.htmlreact_reduxHello World!expresnodejs web framework web 框架http:/ install express -save-dev新建 server.jsvar app = new (require(express)()var port = 9100app.get(/, (req, res) = res.sendFile(_dirname + /index.html)app.listen(port, error = if (error) con
2、sole.error(error) else console.info(Open up http:/localhost:%s/ in your browser., port)2node server.jspackage.json 增加 start 命令babelBabel is a JavaScript compiler. 将 babel 语法编译成普通 es2015(es6)https:/babeljs.io/cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-rea
3、ct-hmre -save-dev新建.babelrc增加配置内容presets: es2015, react,env: development: presets: react-hmrewebpackwebpack the flexible module bundlerhttps:/webpack.github.io/cnpm install webpack webpack-dev-middleware webpack-hot-middleware -save-dev新建 webpack.config.js3var path = require(path)var webpack = requi
4、re(webpack)module.exports = devtool: cheap-module-eval-source-map,entry: webpack-hot-middleware/client,./index,output: path: path.join(_dirname, dist),filename: bundle.js,publicPath: /static/,plugins: new webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),module: loader
5、s: test: /.js$/,loaders: babel ,exclude: /node_modules/,include: _dirname新建 index.jsconst rootEl = document.getElementById(root);rootEl.innerText = haha!修改 server.js4var webpack = require(webpack)var webpackDevMiddleware = require(webpack-dev-middleware)var webpackHotMiddleware = require(webpack-hot
6、-middleware)var config = require(./webpack.config)var app = new (require(express)()var port = 9100var compiler = webpack(config)app.use(webpackDevMiddleware(compiler, noInfo: true, publicPath: config.output.publicPath )app.use(webpackHotMiddleware(compiler)app.get(/, (req, res) = res.sendFile(_dirna
7、me + /index.html)app.listen(port, error = if (error) console.error(error) else console.info(Open up http:/localhost:%s/ in your browser., port)修改 index.htmlreact_reduxHello World!命令行：打包：webpack启动 server： node server.js5react中文教程：http:/ install react react-dom -save开发 react 组件多种方式1.简单的 func 方式2.creat
8、eClass 方式3.es6 class 方式创建 components 文件夹，创建 Hello.js 文件import React from react;class Hello extends React.Component constructor(props) super(props);this.displayName = Hello;render() return Hello;export default Hello;渲染ReactDOM.render修改 index.js6import React from reactimport ReactDOM from react-domimp
9、ort Hello from ./components/Helloconst rootEl = document.getElementById(root);ReactDOM.render(,rootEl)状态和属性状态 state 可以改，属性 props 不可以改，this.state.textthis.setState(text: val.target.value) value=this.state.text /);export default Hello;属性修改 Hello.js7import React from react;class Hello extends React.Com
10、ponent constructor(props) super(props);this.displayName = Hello;this.state = text:haha!;render() return (this.props.preTextthis.state.textthis.setState(text: val.target.value) value=this.state.text /);export default Hello;修改 index.jsimport React from reactimport ReactDOM from react-domimport Hello f
11、rom ./components/Helloconst rootEl = document.getElementById(root);ReactDOM.render(,rootEl)redux中文教程：https:/camsong.github.io/redux-in-chinese/index.htmlcnpm install redux react-redux -save相当于把 module 里的数据统一渲染到页面组件上（在组件初始化时，初始化后之后等等生命周期都可以。比如设备树，在渲染前 componentWillMount 去请求 ajax，然后在渲染时就可以把设备树加入页面了。 ）
12、跟业务有关联的放在 containers 里面（有 connect 去绑定） ，component 里面一般不跟业务关联去请求等等。PreText 是 props，在组件本身内部不能改，但是在外面，比如 reducers 里面可以改8数据共享创建 reducers 文件夹，创建 hello.jsexport default function hello(state=preText:Hello World! xiaomeng.chen, action)switch(action.type)default:return state;修改 index.jscreateStore 创建全局唯一 red
13、ux store 对象通过 Provider store 传递 redux store 到 react component 中import React from reactimport ReactDOM from react-domimport Hello from ./components/Helloimport createStore from reduximport Provider from react-reduximport hello from ./reducers/helloconst store = createStore(hello)const rootEl = docume
14、nt.getElementById(root);ReactDOM.render(,rootEl)修改 Hello.js在 react component 中使用 connect 来获取 redux store9import React from react;import connect from react-reduxclass Hello extends React.Component constructor(props) super(props);this.displayName = Hello;this.state = text:haha!;render() return (this.p
15、rops.preTextthis.state.textthis.setState(text: val.target.value) value=this.state.text /);export default connect(state=state)(Hello)数据修改创建 actions 文件夹，创建 index.js 文件export const toXiaoHui = () = return type: CHANGE,text: Hello World! xiaohui.chenreducers/hello.js 修改dispatch action在 reducer 中处理 actionexport default function hello(state=preText:Hello World! xiaomeng.chen, action)switch(action.type)case CHANGE
