Convert Webpack syntax to browserify syntax

Question

I am learning Flux and am looking at some sample code for an app.config that uses react-router :

import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

This piece of code was written for being used with the Webpack module.

I would try to avoid using it and only use browserify instead.

How do I convert this code? I know I must convert the imports (but am not sure of the syntax), is there more to it?

Here is my app.js so far :

var React = require('react');
var ProductData = require('./ProductData');
var CartAPI = require('./utils/CartAPI')
var FluxCartApp = require('./components/FluxCartApp.react');


// Load Mock Product Data into localStorage
ProductData.init();

// Load Mock API Call
CartAPI.getProductData();

// Render FluxCartApp Controller View
React.render(
  <FluxCartApp />,
  document.getElementById('flux-cart')
);

Answer 1

No need to convert anything, you can have that code as-is with Browserify and Babel:

npm install babelify
browserify main.js -t babelify -o dist.js