fkling/App.js

## README.md

      
    Raw
  

              README.md
            
          
    Bootstrap files for React + JSX with browserify and gulp.js

To use this template, you have to install gulp.js first, with npm install -g gulp, and then the dependencies of this module, with npm install.
App.js is be the main entry for the JavaScript code.

gulp build runs browserify on App.js, transforms the JSX syntax, runs uglify.js on the resulting bundle and stores the minified source in bundle.js.

gulp watch incrementally runs browserify on file change, without minification, for debugging.
Unless external libraries which are not available as npm modules are needed, bundle.js is the only file that has to be included in the HTML page. It will contain all dependencies, including React.
Have a look at the comments in index.html, App.js and React.js if you don't want to inlcude React as a dependency but rather load it from a CDN (thus getting a smaller bundle.js file).

Please also note this info from the React documentation:

If you'd like to use any add-ons, use var React = require('react/addons'); instead.


Note: by default, React will be in development mode. To use React in production mode, set the environment variable NODE_ENV to production. A minifier that performs dead-code elimination such as UglifyJS is recommended to completely remove the extra code present in development mode.


## App.js
"use strict";

// Use
// var React = require('./react');
// instead if you are loading React externally, via a <script> element
var React = require('react');

var App = React.createClass({
  render: function() {
    return <h3>Hello World!</h3>;
  }
});

React.renderComponent(<App />, document.body);

## gulpfile.js
var browserify = require('browserify');
var gulp = require('gulp');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var watchify = require('watchify');
var through = require('through');
var reactTransform = require('react-tools').transform;

var SRC = './App.js';
var OUT = './bundle.js';
var DEST = './';

function transform(filename) {
  var code = '';
  return through(
    function(data) { code += data;},
    function() {
      try {
        this.queue(reactTransform(code));
      } catch(e) {
        console.log('Error:', filename, e);
      }
      this.queue(null);
    }
  );
}

gulp.task('build', function() {
  browserify(SRC)
    .transform(transform)
    .bundle()
    .pipe(source(OUT))
    .pipe(streamify(uglify({output: {ascii_only:true}})))
    .pipe(gulp.dest(DEST));
});

gulp.task('watch', function() {
  var bundler = watchify(SRC)
    .transform(transform)
    .on('update', rebundle);

  function rebundle () {
    return bundler.bundle()
    .on('error', function(e) {
      console.log('Browserify Error', e);
    })
    .pipe(source(OUT))
    .pipe(gulp.dest(DEST));
  }

  return rebundle();
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>React example</title>
    <!--
      Uncomment the following script element if you want to load React from a CDN instead.
      You have to change the module dependency as well..
    -->
    <!-- <script src="http://fb.me/react-with-addons-0.10.0.min.js"></script> -->
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

## package.json
{
  "devDependencies": {
    "browserify": "^6.3.0",
    "gulp": "^3.8.5",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^0.3.1",
    "react-tools": "^0.10.0",
    "through": "^2.3.4",
    "vinyl-source-stream": "^0.1.1",
    "watchify": "^0.10.2"
  },
  "dependencies": {
    "react": "^0.12.0"
  }
}

## react.js
// Use this module instead if you want to load React as external script (i.e. not include it in bundle.js)
module.exports = global.React;
	"use strict";

	// Use
	// var React = require('./react');
	// instead if you are loading React externally, via a <script> element
	var React = require('react');

	var App = React.createClass({
	render: function() {
	return <h3>Hello World!</h3>;
	}
	});

	React.renderComponent(<App />, document.body);
	var browserify = require('browserify');
	var gulp = require('gulp');
	var streamify = require('gulp-streamify');
	var uglify = require('gulp-uglify');
	var source = require('vinyl-source-stream');
	var watchify = require('watchify');
	var through = require('through');
	var reactTransform = require('react-tools').transform;

	var SRC = './App.js';
	var OUT = './bundle.js';
	var DEST = './';

	function transform(filename) {
	var code = '';
	return through(
	function(data) { code += data;},
	function() {
	try {
	this.queue(reactTransform(code));
	} catch(e) {
	console.log('Error:', filename, e);
	}
	this.queue(null);
	}
	);
	}

	gulp.task('build', function() {
	browserify(SRC)
	.transform(transform)
	.bundle()
	.pipe(source(OUT))
	.pipe(streamify(uglify({output: {ascii_only:true}})))
	.pipe(gulp.dest(DEST));
	});

	gulp.task('watch', function() {
	var bundler = watchify(SRC)
	.transform(transform)
	.on('update', rebundle);

	function rebundle () {
	return bundler.bundle()
	.on('error', function(e) {
	console.log('Browserify Error', e);
	})
	.pipe(source(OUT))
	.pipe(gulp.dest(DEST));
	}

	return rebundle();
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>React example</title>
	<!--
	Uncomment the following script element if you want to load React from a CDN instead.
	You have to change the module dependency as well..
	-->
	<!-- <script src="http://fb.me/react-with-addons-0.10.0.min.js"></script> -->
	</head>
	<body>
	<script src="bundle.js"></script>
	</body>
	</html>
	{
	"devDependencies": {
	"browserify": "^6.3.0",
	"gulp": "^3.8.5",
	"gulp-streamify": "0.0.5",
	"gulp-uglify": "^0.3.1",
	"react-tools": "^0.10.0",
	"through": "^2.3.4",
	"vinyl-source-stream": "^0.1.1",
	"watchify": "^0.10.2"
	},
	"dependencies": {
	"react": "^0.12.0"
	}
	}
	// Use this module instead if you want to load React as external script (i.e. not include it in bundle.js)
	module.exports = global.React;