react componentを作ったら、demoページも用意してあげたいですよね。でも、demoページから使えるようにするには、ES6（で書いてる前提です 
）のコードをtranspileして、必要なライブラリを一つのjsにまとめて、といったことをする必要があり、「demoページ用のbuildタスク別に用意すんの？」という気分になります 
そんなときはbudoを使うと幸せになれます。
budo
ページロード時に、指定のsourceに対して自動的にbrowserifyを実行してくれるサーバです。live reloadにも対応しているので、browserifyを使った開発用サーバというのが本来の用途になると思います。詳しくは上記サイトを見てください。
使い方
budo examples/bundle.js --dir examples -- -t babelify
最初の引数examples/bundle.jsが、ページロード時にbrowserifyを実行する時のsourceファイルとなります。
--dirは、ルートディレクトリを指定します。指定が無い場合、budoがbuild結果のjsを読み込んだ素のhtmlを勝手に作成してくれますが、自分で独自のindex.htmlを作ったり静的コンテンツを参照させたい場合はルートディレクトリを指定して、そこにindex.htmlなどを置きましょう。今回はcomponentを描画させるdivを指定したかったので、自分でindex.htmlを用意しました。
--以下はbrowserifyに渡されるオプションで、今回はES6からトランスパイルしたいので-t babelifyを渡しています。
ルートになるexamples/には、以下のようなindex.htmlを置いておきます。
<!DOCTYPE html>
<body>
<div id='sample1'></div>
<div id='sample2'></div>
<script type='text/javascript' src='bundle.js'></script>
</body>
</html>
srcは、sourceに指定したファイル名になります。(デフォルトではディレクトリ名はいらないですが、--serveオプションを使うとビルド結果のjsのパスを任意に設定できます)
コマンドを実行すると、
[0001] info Server running at http://192.168.59.3:9966/ (connect)
[0009] 8108ms 1.69MB (browserify)
といったログが出てくるので、http://192.168.59.3:9966/にアクセスすると、examples/index.htmlの内容と、ビルドされたbundle.jsに従って描画された画面が見れる事でしょう。
package.jsonのstartコマンドに定義しておけばnpm startで起動できて幸せ。
終わり
今回書いた内容で実際にデモページ入りのReact Componentのプロジェクトを作ったのでこちらに置いておきます。Text内のurlをaタグのリンクにして表示するReact Componentです。
https://github.com/hokuma/auto-text-link