附加組件(Add-ons)

官方會把一些實用的共用工具放置在 React.addons。這些工具應該暫時被視為還在實驗階段，但最後官方應該會將其整合進核心功能或者如下列共用的工具函式庫:

大概的說這些工具的用途包括了協助您快速建立 CSS 字串等等是為了讓您在開發時更方面。

* TransitionGroup 與 CSSTransitionGroup 是用來處理關於動畫和過場特效，不過它們通常不是這麼容易實作。
* LinkedStateMixin 簡化處理使用者表單欄位和元件狀態之間的一些狀況。
* classSet 讓操作 DOM 的 CSS 字串時的程式碼較簡潔。
* TestUtils 簡單的測試工具。
* cloneWithProps 複製 React 元件與修改 props。
* update Javascript 函式，簡化處理不可變動的資料的過程。

下面列出的項目只存在 React 開發版本中:

* PureRenderMixin 適用於特定情況下改善效能。
* Perf 用來測量效能並提供優化的建議。

當您需要使用這些附加組件時，請使用 react-with-addons.js ，而不是單純使用 react.js。

另外如果您使用當紅的 Browserify 時要使用 addons 則如下匯入:

var React = require('react/addons')

後續我們會持續針對各種單元工具的用法作說明，不過如果到目前為止您已經想要將 React 整合至您的 Node 開發環境，下面先提供筆者 gulp 與 grunt 的設定給您參考

gulpfile.js

var gulp = require("gulp"),
    connect = require("gulp-connect"),
    less = require("gulp-less"),
    react = require("gulp-react"),
    watch = require("gulp-watch"),
    jade = require("gulp-jade"),
    clean = require("gulp-clean");


/**
* Compilers
*/
gulp.task("less", ["clean-css"], function () {
  gulp.src("playground/src/styles/less/*.less")
      .pipe(less())
      .pipe(gulp.dest("playground/dist/css"));
});


gulp.task("clean-css", function () {
  gulp.src("playground/dist/css/*", {read: false}).pipe(clean({force: true}));
});


gulp.task("jsx", ["clean-js"], function () {
  gulp.src("playground/src/scripts/jsx/*.jsx")
      .pipe(react())
      .pipe(gulp.dest("playground/dist/js/"));
});


gulp.task("clean-js", function () {
  gulp.src("playground/dist/js/*", {read: false}).pipe(clean({force: true}));
});


gulp.task("jade", ["clean-html"], function () {
  gulp.src("playground/src/templates/**.jade")
      .pipe(jade())
      .pipe(gulp.dest("playground"));
});


gulp.task("clean-html", function () {
  gulp.src("playground/*.html", {read: false}).pipe(clean({force: true}));
});


/*********************************************************/


/**
* Web Server
*/
gulp.task("server", function () {
  connect.server({
    livereload: true,
    root: ["playground", "build"]
  });
});


gulp.task("livereload", function () {
  watch(["playground/*.html", "playground/dist/**"])
      .pipe(connect.reload());
});


gulp.task("watch", function () {
  gulp.watch("playground/src/styles/less/*.less", ["less"]);
  gulp.watch("playground/src/scripts/jsx/*.jsx", ["jsx"]);
  gulp.watch("playground/src/templates/**.jade", ["jade"]);
});


/*********************************************************/

/**
* Mixin feature for usages
*/
gulp.task("default", ["less", "jsx", "jade", "server", "livereload", "watch"]);

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: {
      dev: {
        src: ['assets/css/*', 'public/*', '.tmp/*']
      }
    },
    connect: {
      server: {
        options: {
          port: 9001,
          base: '.',
          protocol: 'http',
          hostname: '*'
        }
      }
    },
    watch: {
      files: ['public/*'],
      options: {
        livereload: true
      },
      jade: {
        files: ['jade/*.jade'],
        tasks: ['jade:dev']
      },
      less: {
        files: ['assets/less/*.less'],
        tasks: ['less:dev']
      },
      react: {
        files: ['assets/js/components/*.react.js'],
        tasks: ['browserify']
      }
    },
    less: {
      dev: {
        files: [
          {
            expand: true,
            cwd: 'assets/less',
            src: '*.app.less',
            dest: 'assets/css',
            ext: '.css'
          }
        ]
      }
    },
    jade: {
      dev: {
        files: [
          {
            expand: true,
            cwd: 'jade',
            src: '*.jade',
            dest: './public',
            ext: '.html'
          }
        ]
      }
    },
    browserify: {
      options: {
        transform: [require('grunt-react').browserify]
      },
      client: {
        src: ['assets/js/components/**.react.js'],
        dest: 'assets/js/bundle.js'
      }
    }
  });

  grunt.registerTask('server', ['clean:dev', 'less:dev', 'jade:dev', 'connect', 'watch']);
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-browserify');
}