个人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的文件