最近一段时间，在项目中使用了FaceBook的react作为基础框架，UI组件使用蚂蚁金服的Ant Design。写个博客记录下开发过程中的一些常见问题。（基础环境：react/es6/jsx，外加w
最近一段时间，在项目中使用了FaceBook的react作为基础框架，UI组件使用蚂蚁金服的Ant Design。写个博客记录下开发过程中的一些常见问题。（基础环境：react/es6/jsx，外加webpack/antd。之所以没有使用redux，太增加学习成本了，咱们只是想用用react而已。）涉及内容介绍
react
react是一个通过虚拟DOM渲染HTML界面的js框架，由FaceBook开源提供，最初用于Instagram网站。按照官方和相关社区的说法，虚拟DOM渲染界面比直接操作DOM性能更高。我只是一个java码农，高并发多线程等着我去学，就没去研究了。真心怕了复杂的前端。es6
es6是新一代的javascript，主要提供了一些新的特性，让代码写起来更加方便。另也叫做es2015比如定义函数，funcName=data=>{return xxx}，后面细说。jsx
jsx是扩展版的js文件，可以让js拥有处理xml标签能力。webpack
webpack作为前端工具，用于混合，压缩，打包，启动服务等...称为新一代前端神器。比如：webpack-dev-server --hot（启动服务）, webpack -p（混合压缩）antd
ant design是蚂蚁金服基于react开发的UI库，简洁大气，狂拽炫酷。（官方自称：这是一个设计语言）注：npm作为串联这一切的工具，可以使用其下载安装react及其相关的库和工具，并且管理依赖库的版本，有点像java里的maven
创建一个React项目
未完待续：周末了，祝各位休息好。（超实用笔记，绝不太监）
2016-05-23
新建demo目录
md demo & cd demo /mkdir demo & cd demo
初始化生成npm配置文件package.json，并修改其内容
npm init
{ "name": "demo", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --hot", "build": "webpack -p" }, "dependencies": { "antd": "^1.0.1", "jquery": "^2.2.3", "react": "0.14.x", "react-dom": "0.14.x", "react-router": "^2.3.0" }, "devDependencies": { "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "css-loader": "^0.23.1", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "html-webpack-plugin": "^2.15.0", "less": "^2.6.1", "less-loader": "^2.2.3", "postcss-loader": "^0.8.2", "raw-loader": "^0.5.1", "style-loader": "^0.13.1", "url-loader": "^0.5.7", "webpack": "^1.12.15", "webpack-dev-server": "^1.14.1" }}(注：如果想添加应用中使用的库，在dependencies里添加；如果是工具类的库，在devDependencies里添加。)安装依赖库，生成node_modules依赖库目录
npm install
（注：如果等待时间长，可以CTRL+C取消并删除生成的node_modules目录，并使用npm install --registry=http://registry.npm.taobao.org）增加几个目录，形成如下结构
--demo |--dist |--node_modules |--src |--commons |--images |--styles |--views |--index.html |--index.jsx |--package.json |--webpack.config.js（注：dist是通过webpack打包后的最终文件；node_modules是所有的依赖库位置；src是真正的项目目录，其中commons作为公共组件目录，images作为图片资源目录，styles作为样式表目录，views里写系统的每个功能页面；package.json是npm配置文件；webpack.config.js是webpack配置文件）新建webpack的配置文件webpack.config.js
//定义webpack及插件var path = require('path');var webpack = require('webpack');var HtmlwebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin = require("extract-text-webpack-plugin");//定义了一些文件夹的路径var ROOT_PATH = path.resolve(__dirname);var MOUDLE_PATH = path.resolve(ROOT_PATH, 'node_modules')var SRC_PATH = path.resolve(ROOT_PATH, 'src');var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');//定义版本号，方便生成版本号var myVersion = '1.0.0';//定义公共库var common = [ 'react', 'react-dom', 'antd', 'jquery']//定义各种加载器module.exports = { entry: { index: path.resolve(SRC_PATH, 'index.jsx'), common: common }, output: { path: path.resolve(BUILD_PATH, myVersion), filename: '[name].js' }, resolve: { extensions: ['', '.js', '.jsx'], modulesDirectories: [SRC_PATH, MOUDLE_PATH] }, module: { loaders: [ { test: //.html$/, loader: 'raw-loader' }, { test: //.jsx|js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react'] } }, { test: //.(less)$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") }, { test: //.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: //.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=10000&name=./images/[name].[ext]' }, { test: //.(ttf|eot|woff|woff2|otf|svg)/, loader: 'file-loader?name=./font/[name].[ext]' }, ] }, plugins: [ new ExtractTextPlugin("[name].css"), new HtmlwebpackPlugin({ favicon:'./src/images/favicon.png', inject: true, template: path.resolve(SRC_PATH, 'index.html') }), new webpack.NoErrorsPlugin() ], devServer: { historyApiFallback: true, hot: true, inline: true, progress: true, }};未完待续：下班的时候抽空再往下写。
