欲しいものリスト

phoenix-powerReactとWebpackが便利です。

ReactとWebpackを使ってテンプレートを作成する

例えば、react-terminalというものがあります。

これはjquery.terminalのような動きをします。

具体的には、Webからユーザーのリクエストを受けて表示内容を決める Web Terminal のようなページを作成するためのツールですね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ git clone https://github.com/wmdmark/react-terminal

$ cd react-terminal

$ npm i -g react-tools webpack webpack-dev-server
$ npm i

$ webpack

$ webpack-dev-server --content-base build/ -d
or
$ cd ./build
$ jekyll server

$ curl -sL localhost:8080

何がどのように動作しているのかは、コードを見ればだいたい分かると思います。例えば、新しいコマンドを追加してみましょう。

1
2
3
4
5
6
7
8
$ vim src/commands/basic.coffee

+ ls = (state, args...)->
+   output = "index.coffee"
+   state.buffer.push(output)
+   {buffer: state.buffer}
- module.exports = {help, clear, echo, su}
+ module.exports = {help, clear, echo, su, ls}

これで、localhost:8080にアクセスし、lsを実行してみましょう。index.coffeeがあれば成功です。もちろん、実際にあるわけではなく見せかけです。

ちなみに、webpack-dev-serverが動作している間は、変更が反映されますので、わざわざwebpackコマンドでビルドする必要はありません。