To help you get started, we've collected the most common ways that react-tools is being used within popular public projects.

react-cosmos / react-cosmos / fresh-bundle.js View on Github

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];

View more ways to use react-tools

react-tools

This package compliments the usage of React. It ships with tools that are often used in conjunction.

JSX

This package installs a jsx executable that can be used to transform JSX into vanilla JS. This is often used as part of a build step. This transform is also exposed as an API.

By default JSX files with a .js extension are transformed. Use the -x option to transform files with a .jsx extension.

Usage

Command Line

Usage: jsx [options] <source> <output> [ [ ...]]

Options:

  -h, --help                               output usage information
  -V, --version                            output the version number
  -c, --config [file]                      JSON configuration file (no file or - means STDIN)
  -w, --watch                              Continually rebuild
  -x, --extension       File extension to assume when resolving module identifiers (default: js)
  --relativize                             Rewrite all module identifiers to be relative
  --follow-requires                        Scan modules for required dependencies
  --cache-dir                   Alternate directory to use for disk cache
  --no-cache-dir                           Disable the disk cache
  --source-charset   Charset of source (default: utf8)
  --output-charset   Charset of output (default: utf8)
  --harmony                                Turns on JS transformations such as ES6 Classes etc.
  --source-map-inline                      Embed inline sourcemap in transformed source
  --strip-types                            Strips out type annotations
  --es6module                              Parses the file as a valid ES6 module
  --non-strict-es6module                   Parses the file as an ES6 module, except disables implicit strict-mode (i.e. CommonJS modules et al are allowed)
  --target                        Target version of ECMAScript. Valid values are "es3" and "es5". Use "es3" for legacy browsers like IE8.

API

transform(inputString, options)

var reactTools = require('react-tools');

reactTools.transform(string, options);

transformWithDetails(inputString, options)

Just like transform, but outputs an object:

{
  code: outputString,
  sourceMap: theSourceMap // Only if the `sourceMap` option is `true`.
}
```</output>