你好，React！

最近各种校招面试，感觉自己在前端框架方面还是弱爆了。
现在如果只懂得JQuery、Vue，已经不够了。
听说React和Vue很像，好吧，来试试！

①NPM安装React

用了Node.js后，当然首选是npm安装了。下面是整个package.json：

{
  "name": "r1online",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {,
    "jsx-loader": "^0.13.2",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline"
  },
  "author": "",
  "license": "ISC"
}

从上面可以看出，一共需要安装5个包，下面babel是为了ES6而装的。

##②配置webpack
我从来没有想过，原来webpack.config.js这个配置文件是要自己手动去添加的：

var path = require("path");
var webpack = require('webpack');
module.exports = {
  entry: { app: ['./app/main.jsx'] },
  output: {
    path: path.resolve(__dirname, "./build"),
    publicPath: "http://127.0.0.1:8081/build/",
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['','.js','.jsx']
  },  
  module: {
    loaders: [
      {test:/\.jsx$/, loaders:['jsx?harmony']}
    ],
    //使用ES6时，才需要添加此loaders
    // loaders:[
    //   {
    //     test: /\.jsx?$/,
    //     loader: 'babel',
    //     include: ROOT_PATH,
    //     query: {
    //       //添加两个presents 使用这两种presets处理js或者jsx文件
    //       presets: ['es2015', 'react']
    //     }
    //   }
    // ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    port: 8081
  },
  plugins: [
    new webpack.DefinePlugin({
    'process.env.NODE.ENV':"development"
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

③添加程序文件app/main.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var AppComponent = require('./components/Comment.jsx');

ReactDOM.render(<AppComponent />, document.getElementById('content'));

④添加组件app/components/Comments.jsx

var React = require('react');
var Comment = React.createClass({
    render: function(){
        <div className="comment">
            This is a React component!
        </div>
    }
});

module.exports = Comment;

⑤添加主页build/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Test</title>
</head>
<body>
    <div id="content"></div>
    <script src="http://127.0.0.1:8080/build/bundle.js"></script>
</body>
</html>

在过程中遇到的问题：

1、events.js:160 throw er

这里写图片描述

原因：看到下面Error: listen EADDRINUSE 127.0.0.1:8080，可知是端口被占用。
解决方案：
首先：在webpack.config.js里，修改“publicPath”为”http://127.0.0.1:8081/build/”
然后：在devServer添加：port: 8081
最后：在index.html修改成（否则读取到的是8080的bundle.js）：

<script src="http://127.0.0.1:8081/build/bundle.js"></script>

2、跨域问题

这里写图片描述
原因：Node.js将localhost、127.0.0.1当作成不同域
解决方案：访问的时候用 webpack.config.js 里面配的 publicPath 的 ip 访问即可，不要用localhost

3、不小心将node_modules推上了远程仓库git

解决方案：git rm -r –cached node_modules
上面的指令是删除本地仓库中的文件，且本地工作区的文件会保留且不再与远程仓库发生跟踪关系，最后再commit、push一次就行了

友情链接（零度大神）：
http://blog.csdn.net/zmx729618/article/details/60957363

4、查看git的公钥

cat ~/.ssh/id_rsa.pub

5、CSS重置

@charset "UTF-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,
input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
.clearfix:before, .clearfix:after{ display: table;  content: ''; }
.clearfix:after{ clear:both; }
.clearfix{ zoom:1; }