我的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的文件，然后就需要一些安装一些开发插件了
1、我们需要将gulp安装到项目目录里来；

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

2、安装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

这一步主要是安装一些编译器和一些必要的插件具体怎么用后面会详细的说
3、安装react 和react-dom

npm install react react-dom --save

既然是react的开发就必须要有react
4、写好babel的配置：
创建一个叫做.babelrc的文件在里面输入以下的代码

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

这个是babel编译器需要的插件用来编译es6和react的jsx的语法
5、创建一个叫做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'));
});

6、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的文件

我的React开发之路1:React的环境搭建

相关推荐