個人React開發之路1:React的環境搭建

React是大臉書出的一個前端開發框架。與其說是一個框架，我更加認爲React更是一種模式，從2015年10月份開始接觸React，我就認爲這個框架之後必定會火。React是一個單向數據流的框架，不一樣於Vue和Angular的雙向數據綁定 React的單向數據流能夠數據模式更加單一，更利於前端的維護。 好了，廢話很少說 若是想具體學習React，能夠參考我之後的教程或者參考網上大量的資料 還有萬能的github
React環境的搭建
首先得明白React的開發是基於JSX去開發的，因此咱們第一步作的就是編譯JSX 由於普通的瀏覽器並不懂的JSX 固然你也能夠這樣:

<script type="text/babel">
  //TODO your jsx
</script>

我的十份不建議用以上的方式由於很是不利於代碼的維護和開發並且也有各類的兼容性問題 固然 你想測試jsx就能夠是用 編譯JSX的方式很是多：webpack browserify+gulp+babelify 或者使用TypeScript用微軟的編譯器去編譯
首先本人比較習慣第二種方式 也是介紹第二種方式
第一步
安裝必要的工具 node.js gulp
安裝node.js 去官網安裝node的最新版 下載根據提示安裝便可
安裝gulp 在node安裝完以後 你須要用npm的命令去安裝gulp :

npm install gulp -g

安裝好gulp以後，就開始構建項目，能夠新建一個目錄名字，命令行指向該目錄，也就是cd到此目錄
輸入如下的命令：

npm init

根據提示作完如下的工做以後， 在目錄中就會有一個名字叫作package.json的文件，而後就須要一些安裝一些開發插件了
一、咱們須要將gulp安裝到項目目錄裏來；

npm install gulp --save//
//或者
npm install --save gulp

二、安裝browserify ，browserify-shim，babelify vinyl-source-stream babel-preset-es2015 babel-preset-react

npm install browserify browserify-shim babelify vinyl-source-stream babel-preset-es2015 babel-preset-react --save-dev

這一步主要是安裝一些編譯器和一些必要的插件 具體怎麼用後面會詳細的說
三、安裝react 和react-dom

npm install react react-dom --save

既然是react的開發 就必需要有react
四、寫好babel的配置：
建立一個叫作.babelrc的文件 在裏面輸入如下的代碼

{
  "presets": ["react","es2015"]
}

這個是babel編譯器須要的插件用來編譯es6和react的jsx的語法
五、建立一個叫作gulpfile.js的文件 這個是gulp的執行文件 如下代碼是一個簡單的構建react項目的gulpfile.js的代碼

//gulp須要的模塊
var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var babel = require("babelify");

//gulp 任務 用於建立本地服務器 
gulp.task("connect",function(){
    connect.server({
        root:"./",
        port:"3000",
        livereload:true,
        host:'localhost'
    })
});
//編譯任務 
gulp.task("browserify",function(){
     //entris:入口文件的js  
    return browserify({entries: './domsrc/app/Main.js', extensions: ['.jsx']})
         //用babel轉換
        .transform(babel)
        //須要browserify-shim轉換
        .transform(require('browserify-shim'))
        //bundle合併
        .bundle()
        .pipe(source('bundle.js'))
        //編譯文件目標目錄
        .pipe(gulp.dest('./bin-debug'));
});

六、package.json的配置文件修改:

"browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }

將這段代碼加入到package.json裏面 就能夠了 如今環境基本已經搭建完成

測試
咱們在工程目錄下建立一個名爲domsrc的目錄 在這個目錄下在建立一個app目錄 裏面建立一個Main.js的文件，
文件裏的代碼參考以下

var React = require("react");
var ReactDOM = require("react-dom");
class Main {
    constructor(){
        ReactDOM.render(<div>Hello World</div>,document.getElementById("content"));
    }
}
new Main();

而後在該目錄下執行如下命令行

gulp browserify

能夠看到在bin-debug生成了bundle.js的文件