All:

I am pretty new to React working flow, say if I have one module like:

```
var React = require("react");
var ReactDOM = require("react-dom");
var Todo = React.createClass({
    render: function() {
        return <div>Hello there </div>;
    }
});
ReactDOM.render(<Todo />, document.getElementById("div1"))

```

Could anyone show me an work-flow guideline(like step by step tutorial) about how to transpile -> include -> debug, I find a lot posts about browserify/babel, but when I tried to transpile( using `npm install babel-preset-react` and then `"browserify ./app.js -o bundle.js -t babelify --presets react"` ) , it always give some error like:

```
SyntaxError: C:/Temp/web/lnreact/app.js: Unexpected token (10:9)
   8 | var Todo = React.createClass({
   9 |  render: function() {
> 10 |          return <div>Hello there </div>;
     |          ^
  11 |  }
  12 | });
  13 |

```

By now, only the gulp version works:

```
var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");

gulp.task("build", function(){
    return browserify({
        entries: "./app.js", 
        extensions: [".js"], 
        deug:true
    })
    .transform("babelify", {
        presets: ["react"]
    })
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist"));
});

```

But with this, I do not know how to debug( it gives me a bunch of code in one single file called bundle.js, there is no seperate files included for debug purpose even I specify debug: true in browserify).

Thanks