How to use react-tools - 10 common examples

getComponentByName: function(name) {
    return this.components[name];
  },
  start: function(rootProps, container) {
    var component = this.getComponentByName(rootProps.component),
        content;
    if (!component) {
      return;
    }
    React.renderComponent(component(_.clone(rootProps)), container);
  }
};

// Enable Node.js compatibility
if (typeof module !== 'undefined' && module.exports) {
  var React = require('react-tools').React,
      _ = require('underscore'),
      $ = require('jquery');
  module.exports = Fresh;
}

Fresh.serialize = {
  getPropsFromQueryString: function(queryString) {
    var props = {};
    if (queryString.length) {
      var pairs = queryString.split('&'),
          parts,
          key,
          value;
      for (var i = 0; i < pairs.length; i++) {
        parts = pairs[i].split('=');
        key = parts[0];

function transform(code, file) {
  // 转换 jsx 代码
  if (code.indexOf('/** @jsx React.DOM */') > -1) {
    code = ReactTools.transform(code);
  }

  // 依赖转换
  code = crequire(code, function(item) {
    return 'window[\'' + normalizeDep(item.path, file) + '\']';
  });

  return code;
}

serverRender: function(moduleName, props, bundlePath) {
    var module = require(moduleName);
    var component = module(props);
    var markup = null;
    React.renderComponentToString(component, function(m) {
      markup = m;
    });
    if (markup.indexOf('') === -1) {
      throw new Error('Must have  in the generated page to insert JS');
    }
    markup = markup.replace(
      '',
      '' +
        ''
    );
    // Get staticify CSS if it's there
    var g = eval('global'); // bypass Browserify's auto-global
    if (g.__staticify_css) {

'use strict';

const fs = require('fs');
const visitors = require('react-tools/vendor/fbtransform/visitors');
const jstransform = require('jstransform');

const visitorList = visitors.getAllVisitors();

const getJsName = function(filename) {
    const dot = filename.lastIndexOf(".");
    const baseName = filename.substring(0, dot);
    return baseName + ".js";
};

// perform es6 / jsx tranforms on all files and simultaneously copy them to the
// top level.
const files = fs.readdirSync('js');
for (let i = 0; i < files.length; i++) {
    const src = 'js/' + files[i];
    const dest = getJsName(files[i]);

    const js = fs.readFileSync(src, {encoding: 'utf8'});
    let transformed = jstransform.transform(visitorList, js).code;

function transform(filename) {
  if (shouldStub(filename)) {
    delete require.cache[filename];
    return reactStub;
  } else {
    var content = fs.readFileSync(filename, 'utf8');
    return ReactTools.transform(content, {harmony: true});
  }
}

'use strict'

var React = require('react-tools/build/modules/React');

var statusForm = React.createClass({
  render: function(){
    return  <form role="form" class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-4 control-label" for="brand-lead">Brand lead:</label>
                <div class="col-sm-8">
                  <input data-state="brandLead" id="brand-lead" type="text" placeholder="brand lead" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 control-label" for="status-text">Status:</label>
                <div class="col-sm-8"></div></div></form>

req.on('end', () => {
        const js = ReactTools.transform(b);

        console.log('cors client transform', {
          req: b,
          res: js,
        });

        res.type('application/javascript');
        res.send(js);
      });
    }

convert(js, html, function (err, jsx) {
    if (err) {
        throw err;
    }

    if (app.type === 'js') {
        jsx = react.transform(jsx);
    }

    if (app.target === 'stdout') {
        console.log(jsx);
    }
    else {
        fs.writeFileSync(fileJsx, jsx);
    }
});

/**
 *
 * @jsx React.DOM
 *
 */

var React = require('react-tools/build/modules/React');

module.exports = React.createClass({

  onNavigate: function(e) {
    var href = e.target.attributes.href && e.target.attributes.href.value;
    if (href) {
      e.preventDefault();
      console.log('navigate to', href);
      window.history.navigate(href);
    }
  },

  render: function() {
    return (
      
        {this.props.children}
      
    );

}

		if (file.isStream()) {
			cb(new gutil.PluginError('gulp-react', 'Streaming not supported'));
			return;
		}

		try {
			if (file.sourceMap) {
				opts = objectAssign(opts, {
					sourceMap: true,
					sourceFilename: file.relative
				});
			}

			var res = react.transformWithDetails(file.contents.toString(), opts);

			file.contents = new Buffer(res.code);
			file.path = gutil.replaceExtension(file.path, '.js');

			if (res.sourceMap && file.sourceMap) {
				applySourceMap(file, res.sourceMap);
			}

			this.push(file);
		} catch (err) {
			this.emit('error', new gutil.PluginError('gulp-react', err, {
				fileName: file.path
			}));
		}

		cb();