LoginSignup
104
102

More than 5 years have passed since last update.

@futoase(Keiji Matsuzaki)

【個人メモ】React Tutorialをちょこっとやってみた

Last updated at Posted at 2014-11-08

React

Reactが最近騒がれてるので、
よくわからないからReactjs tutorialを少しこなしてみた。

Reactとは

ぐぐるとmizchiさんのブログエントリが出てくる。

Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想

VirtualDOMという技術を使っているようだ。

[JavaScript] 仮想DOMを提供する『React』について少し調べてみた

VirutalDOMだけ切り出した成果物も存在する。

https://github.com/Matt-Esch/virtual-dom
Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話

react-toolsのインストール

React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。
Chromeで開発することが多い、というかDeveloper tool入れたし、
開発中何かしらサーバ立ててやるのがよいのだろうか、と思ったけど
JSXをjsにコンパイルするのが楽そうだ。

JSXにプリコンパイルするものがあるようだ。
console.logで一つ一つ出てくるのは親切だな。

npm install -g react-tools

jsxというコマンドラインツールがインストールされる。

jsxコマンド

jsxで書かれたものをjava scriptとしてコンパイルする。
jsx形式で書かれたファイルはsrcディレクトリに置いて、
javascript形式にコンパイルされたファイルをdestディレクトリに吐出されるようにする。

jsx --watch src/ dest/

初歩

初歩として、このような形になった。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>React js tutorial</title>
    <script src="http://fb.me/react-0.12.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="./dest/main.js"></script>
  </body>
</html>
  • main.jsは以下のとおり。
main.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

React.render(
    <CommentBox />,
    document.getElementById('content')
);
  • レンダリング結果。

Screen Shot 2014-11-02 at 00.12.58.png

の内容はCommentBox(Reactのインスタンス)の内容が展開されて、
DOMが構築されるんだなあ。

このまま進めていってみよう。

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

CommentListの中で、Commentを使っている。
Commentの定義は以下のとおりになっている。

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

return (
  <div className="commentList">
    <Comment author="Pete Hunt">This is one comment</Comment>
    <Comment author="Jordan Walke">This is *another* comment</Comment>
  </div>
);

CommentList内で、Commentを構築しているが、
author Attribute及びThis is one commentなど
this.props.authorとthis.props.childrenで
引っ張るようにしているのか。

this.propsのpropsはpropertiesの略で、Componentに包み込んだ(内包した)Componentの内容を呼び出したい場合に利用するようだ。

JSON形式で表現したデータをComponentで利用する

JSON形式のデータをComponent内で利用することもできるようだ。
Showdown.jsを利用し、Markdown形式のパースを行う形になっているセクションがあるが、
そこが気になった。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>React js tutorial - Markdown -</title>
    <script src="http://fb.me/react-0.12.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="./dest/main.js"></script>
  </body>
</html>

var converter = new Showdown.converter();

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

var Comment = React.createClass({
  render: function() {
    var rawMarkUp = converter.makeHtml(this.props.children.toString())
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkUp}} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment){
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
        );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data}/>
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox data={data}/>,
  document.getElementById('content')
);

data Objectの内容をCommentBox Componentで展開し、
レンダリングすることがわかった。

サーバ側と通信し、コメントを保存する

comments.jsonファイルにdataの内容を保存する

もっとTutorialを進めていくと
comments.sonにコメントを追加する内容になる。
サーバ側でcomments.jsonを配信しなければならないので、
react-tutorial リポジトリから
サーバとサンプルファイル一式をgit cloneして手元に持ってくることにした。

> git clone git@github.com:reactjs/react-tutorial.git
> cd react-tutorial
> python server.py
> open http://localhost:3000/index.html

bbee745a-ec1c-d114-fb49-5d6a38ac2e10.png

Your nameとSay something…を追加していく

835ffd48-a1b9-f857-fa07-6d21bf20a024.png

更新された。
が、react-tutorialにあるserver.pyだと、
_comments.jsonファイルへの更新は含まれていないので、ちょこっと改造する

diff --git server.py server.py
index 7edb6f6..7ffda64 100644
--- server.py
+++ server.py
@@ -47,6 +47,8 @@ class MyHandler(SimpleHTTPRequestHandler):

             # Save the data
             comments.append({u"author": form.getfirst("author"), u"text": form.getfirst("text")})
+            with open('_comments.json', 'w') as f:
+                f.write(json.dumps(comments))
             sendJSON(self)
         else:
             SimpleHTTPRequestHandler.do_POST(self)

_comments.jsonにファイルが保存される形にしてみた。

> python server.py
> open http://localhost:3000/index.html

ページを開いた後、保存を繰り返し、

9055d6ad-9b3f-f375-ea62-757d46a0d20a.png

サーバを止めて、再起動する。
_comments.jsonには、入力した内容が保存されている

[{"text": "Hey there!", "author": "Pete Hunt"}, {"text": "fufafuga", "author": "hogehoge"}, {"text": "uooo", "author": "mogemoge"}]

JSXの概念や、React.jsの使い方とか、
なんとなーくわかってきたような。

サーバサイドレンダリングとか、まだわかってないところばかりなので
いじっていこう。

https://github.com/petehunt/react-server-rendering-example
https://github.com/mhart/react-server-example

104
102
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
104
102