React 简介、准备

一、什么是React?

二、需要知识储备

三、工具、环境准备

1、sublime插件

1.1、React ES6 Snippets

react es6的语法高亮插件

1.2、jsfmt

格式化插件，支持jsx格式化
安装修改配置和键绑定

{
    // autoformat on save
    "autoformat": false,

    // array of extensions for autoformat
    "extensions": ["js", "sublime-settings"],

    // options for jsfmt
    "options": {
        "preset": "jquery",
        "indent": {
            "value": "    "
        },
        // plugins included
        "plugins": [
            // "esformatter-quotes",
            // "esformatter-semicolons",
            // "esformatter-braces",
            // "esformatter-dot-notation"
        ]
    },
    "options-JSON": {
        "plugins": [
            "esformatter-quotes"
        ],
        "quotes": {
            "type": "double"
        }
    },
    "alert-errors": true,
    // path to nodejs
    "node-path": "node",
    // if true it will format the whole file even if you have a selection active
    "ignore-selection": false
}

打开Preferences -> Key Bindings - User

{ "keys": ["ctrl+shift+q"], "command": "format_javascript" }

jsfmt–Github.com

1.3、babel

支持ES6、React.js、jsx代码高亮，对 JavaScript, jQuery 也有很好的扩展

配置：

1. 打开.js, .jsx 后缀的文件;

2. 打开菜单view， Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)，选择babel为默认 javascript 打开syntax

1.4、修改Emmet

Emmet是sublime必备的高效代码生成插件。

打开 preferences -> Key bindings - Users把下面代码复制到文件内部。

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "source.js", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector"
    }, 

    // run only if there's no selected text
    {
      "match_all": true, 
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal", 
      "operand": false, 
      "match_all": true, 
      "key": "has_next_field"
    }, 

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible -- 
    // remove this section
    {
      "operand": false, 
      "operator": "equal", 
      "match_all": true, 
      "key": "auto_complete_visible"
    }, 
    {
      "match_all": true, 
      "key": "is_abbreviation"
    }
  ]
}

1.5、JsFormat

安装JsFormat

设置：

打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码：

{
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}

即可保存时自动格式化，并支持 jsx 类型文件.

2、gulp

2.1、使用gult构建工具

参考

2.2、gulp-eslint

安装eslint

进入项目根目录

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint

安装完成后可以在根目录使用eslint --init生成一个.selintrc文件。这个文件为eslint的代码审查配置文件，可以参照ESLint的语法规则进行修改。当然，也可以在gult的配置文件gultFile中手动指定一个自定义配置文件。

2.3、gulp-babel

全局安装

npm install -g babel

项目安装

npm install gulp-babel gulp-plumber gulp-notify gulp-cached browser-sync run-sequence --save-dev

gulpfile配置：

/**
 * babel
 */
var gulp = require('gulp'),
  babel = require('gulp-babel');
gulp.task('babel', function() {
  return gulp.src('./src/**/*.jsx')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
});

2.4、browser-sync

使用 BrowserSync 和 gulp，你可以轻松地创建一个开发服务器，然后同一个 WiFi 中的任何设备都可以方便地访问到。BrowserSync 同时集成了 live-reload 所以不需要另外做配置了。

安装BrowserSync：

npm install --save-dev browser-sync

gulpfile配置：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// 监视文件改动并重新载入
gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  });

  gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload);
});

通过如下命令启动服务，并且打开一个浏览器，访问默认的 URL (http://localhost:3000)：

gulp serve

添加CSS预处理器：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('sass', function() {
  return sass('scss/styles.scss')
    .pipe(gulp.dest('app/css'))
    .pipe(reload({ stream:true }));
});

// 监视 Sass 文件的改动，如果发生变更，运行 'sass' 任务，并且重载文件
gulp.task('serve', ['sass'], function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  });

  gulp.watch('app/scss/*.scss', ['sass']);
});

参考文件…

---

参考资料

1、Sublime Text 3 搭建 React.js 开发环境

2、Sublime Text3关于react的插件