fkling · February 1, 2018 03:43 · jtremback · Mar 13, 2015
diff --git a/README.md b/README.md
diff --git a/App.js b/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);
diff --git a/gulpfile.js b/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();
 });
diff --git a/index.html b/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>
diff --git a/package.json b/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"
  }
 }
diff --git a/react.js b/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;