前言提到了前端统一的概念，有兴趣的欢迎谈谈你的看法，点击前往。Web前端框架层出不穷，不可能包罗万象。这里有个小建议：如果你对WeexApp感兴趣，你应该选择vue框架；如果你对ReactNativeApp感兴趣，你应该选择React.js框架；本系列文章为React技术栈，Vue技术栈将在本系列文章结束后陆续更新。技术栈由于本系列文章均为实际项目，需要相关技术基础。您可以转到下面给出的链接进行深入研究。项目中使用的主要框架和插件有：webpack：预编译模块打包工具。官方文档-中文翻译React：一个用于构建用户界面的JavaScript库。官方文档-中文翻译Redux：管理整个应用的数据流。官方文档-中文翻译react-router：React应用路由库。官方文档styled-components：React中的CSS最佳实践。官方文档isomorphic-fetch：fetch兼容库。官方文档JRoll2：移动前端滑动插件。官方文档ECharts：一个基于html5Canvas的图表库。官方文档建议学习时以官方文档为准。中文翻译或第三方作者的教程可以帮助你理清思路；我也会对会用到的重要知识点进行简明的讲解。如遇到错误或不明白内容，欢迎实时指出。环境搭建环境搭建是最枯燥和容易出错的地方，但是作为开发者，我们还是有必要去了解配置的具体步骤，后期会出一个简易版的环境搭建教程。系统环境：Win10+关闭安全管理器Node.jsInstall到官网下载安装包点击选择LTS版本（9.0以后的版本安装styled-components会报错）。npm部署npm更新部署到全局npminstallnpm-g#【可选】设置淘宝镜像npmconfigsetregistryhttps://registry.npm.taobao.orgnpm常用命令：npminit#创建package.json文件的向导npminstall***#本地安装；当前目录下会生成node_modules文件夹，这里会安装node模块npminstall***-g#全局安装；它将在C:\Users\***\AppData\Roaming\npm\node_modules安装npminstall***--save#Dependentmodulesatruntime;自动将模块和版本号添加到package.json文件的dependencies部分npminstall***--save-dev#Dependentmodulesduringdevelopment;自动添加模块和版本号添加到package.json文件devdependencies部分npmupdate***#更新节点模块npmuninstall***#卸载节点模块创建package.json文件项目根目录：D:\web\react-webapp-demo，请根据您的实际情况进行设置。cdD:\web\react-webapp-demo#在PowerSell中打开项目目录npminit-y#跳过提问阶段，直接生成新的package.json文件。安装模块npminstall--savereactreact-domreduxreact-reduxredux-loggerredux-thunkreact-routerreact-router-redux@nexthistorystyled-componentsisomorphic-fetchjrolljroll-pulldownjroll-infiniteechartsbabel-polyfillnpm安装--save-devwebpackwebpack-dev-serverwebpack-mergeclean-webpack-pluginbabel-loaderbabel-corebabel-preset-envbabel-preset-reactcss-loaderstyle-loaderfile-loaderurl-loaderhtml-webpack-pluginuglifyjs-webpack-plugin模块简要说明：reactreact-dom：React依赖于reduxreact-reduxredux-loggerredux-thunk：Redux依赖于react-routerreact-router-redux历史：react-router依赖于styled-components:Reactisomorphic-fetch:fetch兼容库jrolljroll-pulldownjroll-infinite:JRoll插件依赖echarts:基于html5的Canvas图表库babel-polyfill:用于实现浏览器的代码不支持原生功能webpack:预编译模块打包webpack-dev-server:实时重新加载的web服务器webpack-merge:webpack配置分离插件clean-webpack-plugin:在构建babel-loaderbabel-corebabel-preset-之前删除你之前构建的文件envbabel-preset-react:转码器babel依赖于css-loaderstyle-loaderfile-loaderurl-loader：各种格式文件的打包依赖html-webpack-plugin：生成HTML5文件的插件uglifyjs-webpack-plugin：代码压缩插件配置模块生成.babelrc文件在项目根目录下（windows系统下文件重命名为babelrc.），写入如下数据{"presets":["env","react"]}配置package.json:runnpmrunbuildto启动编译模式，npmrun启动热更新模式；"scripts":{"start":"webpack-dev-server--configwebpack.dev.js","build":"webpack--configwebpack.prod.js"}，在根目录：webpack.common.js、webpack.dev.js、webpack.prod.js；webpack.common.js(常用配置)constpath=require('path');constCleanWebpackPlugin=require('clean-webpack-plugin');constHtmlWebpackPlugin=require('html-webpack-plugin');constwebpack=require('webpack');module.exports={entry:['babel-polyfill','./src/index.js'],//项目入口入口输出:{//项目输出配置路径:path.resolve(__dirname,'build'),//文件输出目录filename:'static/js/[name].[hash:5].js'},module:{//模块加载规则:[{test:/\.css$/,//匹配规则使用:[{loader:"style-loader"},{loader:"css-loader"}]},{test:/\.(js|jsx)$/,exclude:/node_modules/,use:{loader:'babel-loader'}},{test:/\.(png|svg|jpg|gif)$/,use:{loader:'url-loader',options:{limit:8192,//传输小于8192B的文件Forbase64filename:'static/images/[name].[hash:5].[ext]'}}}]},plugins:[//插件配置newCleanWebpackPlugin(['build']),//clear编译输出文件夹newHtmlWebpackPlugin({title:'Cinglong'sDemo',filename:'index.html',template:path.resolve(__dirname,'templates','index.html')}),//生成Html5文件新的webpack.optimize.CommonsChunkPlugin({name:'commons'}),//公共代码打包]};webpack.dev.js(开发配置)constmerge=require('webpack-merge');constcommon=require('./webpack.common.js');constwebpack=require('webpack');module.exports=merge(common,{devtool:'inline-source-map',//代码关联展示methoddevServer:{historyApiFallback:true,//文件重定向，与react-router相关hot:true,//启用模块热替换port:80,//服务器端口host:"192.168.23.101",//服务器域名开放:true//自动打开浏览器标签},plugins:[newwebpack.NamedModulesPlugin(),//显示模块的相对路径newwebpack.HotModuleReplacementPlugin()//加载热替换插件]});webpack.prod.js(预编译配置)constmerge=require('webpack-merge');constUglifyJSPlugin=require('uglifyjs-webpack-plugin');constcommon=require('./webpack.common.js');module.exports=merge(common,{plugins:[newUglifyJSPlugin()//代码压缩]});项目目录react-webapp-demo|-/node_modules//模块安装目录|-/src//代码对象record|-/container//容器组件|-/presentational//展示组件|-/images//图片目录|-/reducers//reducers操作|-/utils//other|-index.js//项目入口|-/templates//模板目录|-.babelrc//babel编译配置|-package.json//项目目录配置|-package-lock.json//模块信息（自动生成）|-webpack.common.js//webpack常用配置|-webpack.dev.js//webpack开发配置|-webpack.prod.js//webpack编译配置系列目录前端统一时代要来了吗？React项目实战：环境搭建React项目实战：react-redux-router基本原理
