前端四react+redux脚手架搭建分析.docx

初始化项目基于nodejscd D:\code_fe\testcnpm init新建index.htmlexpresnodejs web framework web框架/zh-cn/cnpm install express --save-dev新建server.jsnode 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-react-hmre --save-dev新建.babelrc增加配置内容webpackwebpack the flexible module bundlerhttps://webpack.github.io/cnpm install webpack webpack-dev-middleware webpack-hot-middleware --save-dev新建webpack.config.js新建index.js修改server.js修改index.html命令行：打包：webpack启动server：node server.jsreact中文教程：/react/docs/getting-started.html模块引入cnpm install react react-dom --save开发react组件多种方式1.简单的func方式2.createClass方式3.es6 class方式创建components文件夹，创建Hello.js文件渲染ReactDOM.render修改index.js状态和属性状态state可以改，属性props不可以改，Hello里用时写了什么就是什么状态修改Hello.js属性修改Hello.js修改index.jsredux中文教程：https://camsong.github.io/redux-in-chinese/index.htmlcnpm install redux react-redux --save相当于把module里的数据统一渲染到页面组件上（在组件初始化时，初始化后之后等等生命周期都可以。比如设备树，在渲染前componentWillMount去请求ajax，然后在渲染时就可以把设备树加入页面了。）跟业务有关联的放在containers里面（有connect去绑定），component里面一般不跟业务关联去请求等等。PreText是props，在组件本身内部不能改，但是在外面，比如reducers里面可以改数据共享创建reducers文件夹，创建hello.js修改index.jscreateStore创建全局唯一redux store对象通过Provider store传递redux store到react component中修改Hello.js在react component中使用connect来获取redux store数据修改创建actions文件夹，创建index.js文件reducers/hello.js修改dispatch action在reducer中处理action修改Hello.js增加action的触发react native提供了调手机功能的接口：扫码，录音，拍照等功能；