React簡介：
React 是一個用於構建用戶界面的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認爲 React 是 MVC 中的 V（視圖）。
React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
balabala。。。具體見：http://www.runoob.com/react/react-tutorial.html
各類入門教程實施起來，bug太多，本文記錄筆者的reactjs入坑記，借鑑與http://www.jianshu.com/p/bf6ca7cb7f8a
1.基本環境搭建
reactjs依託於nodejs（方便開發部署），首先需要安裝nodejs，nodejs依託於python環境。那麼首先安裝python環境（3以下的版本）。
python win7 64位下載鏈接：http://download.csdn.net/detail/vichou_fa/9730068
python安裝後，可以在cmd命令行中輸入path，輸出環境變量包含安裝的python根目錄。運行python --version正確輸出版本號說明環境安裝成功了。
然後安裝nodejs環境：
Nodejs win7 64位下載鏈接：http://download.csdn.net/detail/vichou_fa/9731294
（賺點資源積分，官網下載實在太慢，當然也可以不從這個鏈接下載）
安裝以後將nodejs的根目錄放到環境變量path中，由於6.3.0版本之後會自帶npm的包管理所以不需要單獨的安裝npm，因此在安裝nodejs的同時，npm也安裝好了。
由於國內的網絡原因，推薦只用阿里的npm源地址：
打開cmd，輸入npm config set registry https://registry.npm.taobao.org
到這裏是遠遠不夠的。爲了方便搭建和以後的使用我們先下載一個IDE webstorm。筆者安裝的webstorm 11 這個是收費的，網上破解方法有很多，筆者就不介紹了。
2.項目搭建
1.打開webstorm，新建一個空白項目比如react1
2.打開控制檯，在控制檯裏輸入npm
init 命令來初始化一個package.json文件，這個文件是一個類似於pom.xml的文件，用來描述需要的依賴庫。
在執行npm init時需要輸入信息
name：(react1) react1
version:1.0.0
description:react1 test
entry point:(index.js)
test command:
git reponsitory:
keywords:
author:
license:....然後生成 package.json
Is this ok? y
完畢。
3.在控制檯輸入以下命令
npm install webpack webpack-dev-server babel --save-dev
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev
npm install babel-preset-stage-0 --save-dev--save-dev 會把下載包的相關信息寫到package.json的devDependencies裏面方便以後發佈，其他人使用的時候只需要npm install就可以把相關的依賴下載到當前的項目裏面。
在package.json裏面包的版本之前的^表示可以安裝類似2.x.x版本的組件但是不能安裝3.x.x版本的軟件
在package.json裏面包的版本之前的~表示可以安裝2.1.x的軟件不能安裝2.3.x的軟件
安裝信息：
1.npm install webpack webpack-dev-server babel --save-dev
可能出現以下信息：
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] No repository field.
不用管它，這些都是WARN 。fsevents是nodejs MAC下的地址，所以windows沒有這種目錄結構
2.npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev
會出現：UNMET PEER DEPENDENCY babel-core@^6.0.0
和UNMET PEER DEPENDENCY less@^2.3.1
說明還沒有安裝這些插件 不要急
命令行輸入
npm install [email protected] --save-dev
然後在輸入
npm install babel-core --save-dev
最後在輸入
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev
安裝這些插件的解釋：
Q1：爲何安裝babel插件？
A1：babel插件能夠將ES6標準的js代碼，轉化爲es5，這樣當前環境才能夠識別。對於Babel的適用參考博文Babel轉碼使用。
'use strict';
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var path = require('path');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/js/entry.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
commonsPlugin
],
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
resolve: {
root:'',
extensions: ['', '.js', '.json', '.less']
}
};5.新建一個.babelrc的文件裏面的內容如下：此文件用來配置Babel插件
{
"presets": ["es2015", "stage-0", "react"]
}上面的是babel插件的相關信息
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}7.新建server.js文件添加以下內容：
vr webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
inline:true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}
console.log('Listening at http://localhost:3000/');
});8.修改package.json添加如下內容：
"scripts": {
"start": "node server.js",
"lint": "eslint src"
}9.創建src/js文件夾
10.創建src/js/helloworld.js：
import React, { Component } from 'react';
export default class Hello extends Component {
render() {
return (
<div>
<h1>Hello, world.</h1>
<p>this is a simple section</p>
<p>終於搭建成功了</p>
</div>
);
}
}11.創建src/js/entry.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './helloworld';
ReactDOM.render(<Hello />, document.getElementById('root'));12.在項目目錄下面創建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/common.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/bundle.js" charset="utf-8"></script>
</body>
</html>注意webstorm可能一開始無法識別js，做如下操作：file—>settings—>Languages & Frameworks—>javascript設置language version
爲JSX Harmony
在控制檯運行npm run start,在瀏覽器中輸入http://localhost:3000/查看到如下內容：
React技術棧教程：http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html
