cloud9環境でReactの検証② -コンポーネント-

2016/9/17 関連記事情報を追加しました。

久しぶりに触ると、信じられないぐらい忘れていました。
思い出しながら執筆していきます。
（後React.jsではなくReactと記載する方がいいみたいですね）

1. Hello!World!

---

まず、cloud9環境でReact.jsの検証① -導入- で書いたコードを見直していきます。

app.js

import React from "react";
import ReactDOM from "react-dom";

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
            </div>
        );
    }
});

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

Reactではコンポーネントを組み合わせてページを作っているようです。renderメソッドを持ったJavascriptのオブジェクトをReact.createClassに渡すことで、Reactコンポーネントを作成しています。renderメソッドは、1つのコンポーネントを'''return'''する必要があります。
コードでいうと下記の部分になります。

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
            </div>
        );
    }
});

ReactDOM.render では、コンポーネントのインスタンスを作成し、第2引数のDOMの要素にマークアップを挿入します。

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

1. 複数のコンポーネント

---

render メソッドでは単一のコンポーネントしかreturnできませんが、下記のように記載することで、複数のコンポーネントを返すことができます。

app.js

import React from "react";
import ReactDOM from "react-dom";

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
                <Comment1 />
                <Comment2 />
            </div>
        );
    }
});

var Comment1 = React.createClass({
    render: function() {
        return(
            <div className="comment1">
                React is Wonderful!
            </div>
        );
    } 
});

var Comment2 = React.createClass({
    render: function(){
        return(
            <div className="comment2">
                Thanks!
            </div>
        );
    }
});

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

また、下記のように入れ子で記載することも当然可能です。
（なんかマトリョーシカみたいですね）

app.js

import React from "react";
import ReactDOM from "react-dom";

var CommentBox = React.createClass({
    // <CommentBox />のレンダリング
    render: function() {
        return (
            <div className="commentBox">
                Hello!World!
                <Comment1 />
            </div>
        );
    }
});

var Comment1 = React.createClass({
    render: function() {
        return(
            <div className="comment1">
                React is Wonderful!
                <Comment2 />
            </div>
        );
    } 
});

var Comment2 = React.createClass({
    render: function(){
        return(
            <div className="comment2">
                Thanks!
            </div>
        );
    }
});   

// id='content'に<CommentBox />を埋め込む
ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
);

ページで確認すると下図のように表示されています。

この記事については、この辺で終わりにします。
ほったらかすとかなり忘れることが分かったので、こまめに執筆しようと思います。

1. 引用

---

React チュートリアル

1. 関連記事

---

cloud9環境でReactの検証① -導入-
cloud9環境でReactの検証③ -変数の扱い-
cloud9環境でReactの検証④ -ループ-
Cloud9環境でReactの検証⑤ -Ajax、state管理-