読者です 読者をやめる 読者になる 読者になる

Elaboration in, Garbage out

Twitt*r ではメモできない何かそれ的なモノ・コトを

javascript 初心者が React に触ってみる。その 1

前回いろいろ調べて riot.js とか言ってましたが、結局 React に落ち着きました。もちろん React Native があったからですねはい。多分続きます。

とりあえずチュートリアル

facebook.github.io

これを触ってみて、あれーうごかねーと思っていたら、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 の例をいろいろ調べてました。

realpython.com

これを読んでいたら、bower? browserify? gulp? なんじゃそりゃってなりました。次のリンクを読んだらなんとなくわかりました。

qiita.com liginc.co.jp

  • bower はクライアントサイドの javascript パッケージマネージャ位置づけにしておいて *1
  • npm(node.js)は react の開発で諸々必要(Production 環境用に babel で JSX -> JS にプリコンパイルとか、圧縮とか)、
  • gulp はタスクランナー(例えば JSX -> JS -> 圧縮? など)として必要

予告編

javascript の中身よりも、周辺のものを覚える量多い気がします。react が 14 になってから?いろいろ変わっているそうなので、変更部分が何なのかを調べてみます。

参考になりそうなところ

*1:パッケージマネージャは npm にまかれていく予定らしい?