javascript 初心者が React に触ってみる。その 1
前回いろいろ調べて riot.js
とか言ってましたが、結局 React に落ち着きました。もちろん React Native があったからですねはい。多分続きます。
とりあえずチュートリアル
これを触ってみて、あれーうごかねーと思っていたら、JSX (JavaScript Xml)を使っているからですね。
ようは javascript 内で XML でかけるようにすることで可読性をあげるっていうやつです。YAML でええやん
javascript 内のコードに XML で放置されたままので、javascript に変換しないといけないのですね。
<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> <!-- <script src="https://fb.me/react-0.14.0.js"></script> <script src="https://fb.me/react-dom-0.14.0.js"></script> --> <script src="{{ url_for('static', filename='bower_components/react/react.js') }}"></script> <script src="{{ url_for('static', filename='bower_components/react/react-dom.js') }}"></script> <script src="{{ url_for('static', filename='bower_components/babel/browser.min.js') }}"></script> <script src="{{ url_for('static', filename='bower_components/jquery/dist/jquery.min.js') }}"></script> <script src="{{ url_for('static', filename='bower_components/marked/marked.min.js') }}"></script> <script src="https://fb.me/JSXTransformer-0.13.0.js"></script> </head> <body> <div id="content"></div> <script type="text/jsx" src="{{ url_for('static', filename='scripts/jsx/example.js') }}"> </script> </body> </html>
はい、何故か中途半端に flask 使っています。あと React は 0.14.2 を使っています。これで動きました。ただしこの場合、JSXTransformer から次のような警告がでます。
You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
クライアント側の CPU に負荷をかける事になるので、商用ではやめましょうね、っていうことですね。JSXTransformer だけ外から引っ張ってきてるのが気持ち悪いけれども、まあ触るだけですし。いざとなればデバッグ時だけこれを読み込むようにして jsx の部分を変数にしたげれば(略)
無理やり python を使いたくて
チュートリアルのコード(reactjs/react-tutorial · GitHub)を読んでいたら、サーバサイド側に flask の例があるじゃないですか、っていうことで flask+python の例をいろいろ調べてました。
これを読んでいたら、bower? browserify? gulp? なんじゃそりゃってなりました。次のリンクを読んだらなんとなくわかりました。
- bower はクライアントサイドの javascript パッケージマネージャ位置づけにしておいて *1
- npm(node.js)は react の開発で諸々必要(Production 環境用に babel で JSX -> JS にプリコンパイルとか、圧縮とか)、
- gulp はタスクランナー(例えば JSX -> JS -> 圧縮? など)として必要
予告編
javascript の中身よりも、周辺のものを覚える量多い気がします。react が 14 になってから?いろいろ変わっているそうなので、変更部分が何なのかを調べてみます。
参考になりそうなところ
*1:パッケージマネージャは npm にまかれていく予定らしい?