Help us understand the problem. What is going on with this article?

budoで簡単にreact componentのdemoページを作る

More than 3 years have passed since last update.

react componentを作ったら、demoページも用意してあげたいですよね。でも、demoページから使えるようにするには、ES6(で書いてる前提です :smile: )のコードをtranspileして、必要なライブラリを一つのjsにまとめて、といったことをする必要があり、「demoページ用のbuildタスク別に用意すんの?」という気分になります :disappointed_relieved:

そんなときはbudoを使うと幸せになれます。

budo

https://github.com/mattdesl/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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした