React "Hello World" 表示方法に絞ってのおぼえがき

##はじめに
JavaScriptフレームワークであるReact.jsにて"Hello World"表示方法に絞って思考の整理を兼ねて記事を書こうと思います。
（訂正箇所ありましたらコメントいただけると幸いです。）

環境構築やツール等の説明は記述してません。
(Qiitaにて他の方の詳細記事がありますのでそちらを参照ください。)

##対象者
ReactでとにかくHello Worldの表示方法を知りたい方。

##表示環境
(既に環境のある方は無視してください)
・CodePenを利用した方法
+New Pen　を押した後、JSの設定アイコンから
JavaScript Preprocessor　をBabelに設定。
Add External JavaScript　に下記二つを設定する。
https://fb.me/react-15.1.0.min.js
https://fb.me/react-dom-15.1.0.min.js

##コード

index.html

  <div id="msg"></div>

style.css

#msg{
  padding:5px 10px;
  color:blue;
  border:1px solid lightgray;
}

script.js

var MyComponent = React.createClass({
  displayName:'my component',
  render: function(){
    return (
    <p>Hello world</p>
    );
  }
});

ReactDOM.render(
  <MyComponent/>,
  document.getElementById('msg')
);

上記のコードで青文字の　Hello world　がReactのコンポーネントを使って表示されます。
borderで囲まれている部分がコンポーネント部分を表してます。

##スクリプトの説明
スクリプトは大まかに下記二つの文から成り立っています。

var MyComponent = React.createClass(...);//1
ReactDOM.render(...);//2

##ひとつめの文について
変数MyComponentにはReact.createClassというクラスを設定しています。
「クラス」はES6で利用できるオブジェクトを作る方法です。

createClassはReactのメソッドで、引数に用意されたオブジェクトを元にコンポーネントのクラスを作成します。

引数としては下記項目が利用できます。

displayName コンポーネントの名前。デバッグメッセージとして使われたりする。
render レンダリングされる内容。コードでは関数が値として設定されている。

###renderについて
renderの関数において、HTMLのテキストをreturnの部分に設定します。
ここは「JSX」によって記述されています。JSXとはHTMLで使われているタグを直接JavaScriptのコードに記述できる技術のことです。実行時にはBabelというコンパイラによってJavaScriptの文に変換されます。

##ふたつめの文について
ここでは　ReactDOMオブジェクトのrenderメソッドを実行しています。
ReactDOM.renderは二つの引数をとります。

・第一引数はレンダリングする内容になります。
コードには<MyComponent/>とReact.createClassで作成したコンポーネントのタグが記述してあります。
・第二引数にはレンダリングした結果を表示するDOMが指定されます。
document.getElementById('msg')と記述されることでHTMLのid="msg"に内容が表示されるようになります。

以上でReactを使用して "Hello World"が画面に表示されるようになります。

##おわりに
最後まで読んでいただいてありがとうございました。
本投稿はReactに触れたことがない人が環境設定などの前提部分で煩わしさを感じてやめてしまう前に、Reactでの"Hello World"を体験してもらえればと思い記述しました。
ES6、Babel、仮想DOMなど説明の足りてない部分が多いことは承知してますが、この投稿がこれからReactを触れようとしている人の次のステップへの手助けとなれば幸いです。