2015年7月25日土曜日

react.jsとjquery mobile

reactjsで書いたコンポーネントをjquery mobile風にしたくて試してみた。

まず単純に、react.jsのコードにjquery mobileのコードを書いてみた。
render()メソッドの中に書く。

<body>
<script type="text/jsx">
React.render(
        <ul data-role="listview">
          <li><a href="acura.html">Acura1</a></li>
          <li><a href="audi.html">Audi1</a></li>
          <li><a href="bmw.html">BMW1</a></li>
        </ul>
);
</script>
</body>

すると何も表示されない。

次に、htmlのbodyタグ直下に書いて見る。
<body>
    <div id="content"></div>
        <ul data-role="listview">
         <li><a href="acura.html">Acura</a></li>
         <li><a href="audi.html">Audi</a></li>
         <li><a href="bmw.html">BMW</a></li>
        </ul>
    </div>
<script>省略</script>
</body>
これはきちんと表示される。

react.jsもjquery mobileもタグのattributeを元に、domの操作をしているから、この辺の処理がバッティングしているのかもしれない。

調べてみたところ、jquery mobileが変換するclassを直に指定すれば出来るとの情報がstackoverflowにあった。なるほど。


やってみる。

<body>
<script type="text/jsx">
React.render(
   <ul class="ui-listview" data-role="listview" >
        <li class="ui-first-child"><a href="acura.html">Acura3</a></li>
        <li><a href="audi.html">Audi</a></li>
        <li class="ui-last-child"><a href="bmw.html">BMW</a></li>
   </ul>
);
</script>
</body>

ブラウザで再度確認する。今度は表示された。しかし、jquery mobileのスタイルではなく、ただのul要素として描画されている。つまり、class以下は無視されたようだ。

試しにstackoverflowで例として出されていたbuttonを表示してみる。

<body>
<script type="text/jsx">
React.render(
 <button className="ui-btn"/>
);
</script>
</body>

こちらはきちんとjquery mobile風で表示された。

出来るのと出来ないのがあるようだ。
listviewの場合は、それを含む外のdomもclass指定すれば出来たりするのだろうか。

ただ、いずれにせよいちいちclassを調べなければいけないのはだるすぎる。
あまりこの組み合わせは推奨出来るようなものではなさそうだ。



2015年7月20日月曜日

Koansでreacjs入門


koansはreact.jsを手を動かしながら学ぶコンセプトで作られたプロジェクト。
node.jsのユニットテストを利用し、正しく実装できるとテストが合格する。

ちょうどreact.jsに入門したかったこともありやってみた。
いい感じに入門できる。

javascriptと、ある程度のプログラミングに対する前提知識があればきちんとついていけるようにできている。

githubのreadmeに本の紹介があるけど、プロモーションの一貫なんだろうか。

http://blog.arkency.com/rails-react/

49ドルはちょっと高い気がするが、koanの出来の良さを考えると、お値段分の価値はあるかもしれない。

サンプルがあるので、まずはこれを読んでみるか。