Reactを基礎から学ぶためのメモ．
まずは，Webサービスを作るにあたってのReactの挙動を理解．

#サービスをつくる構成要素の違い
まずはじめに，どちらも部品という意味を持つ"モジュール（Module）"と"コンポーネント（Component）"という言葉について確認する．
##モジュール（Module)とは
関数などの機能を提供するソースコード中の部品．

##コンポーネント（Component）とは
GUIを構成する一つ一つのそれだけで完結した部品．
何かで利用することはできるが，交換可能というものではない．

#React
##React実行の流れ
トップページ（index.html）→index.js→App.js
の流れで処理が進む．

##index.html
下記,<div id="root"></div>の中に後述するindex.jsの中身が動的にレンダリングされることになる．
また，ここで読み込まれるbundle.jsはwebpackでビルドされたファイルである．

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <div id="root"></div>
  <script type='text/javascript' src="./dist/bundle.js" ></script>
</body>
</html>

##Reactコンポーネント（App.js）の作成
ReactコンポーネントのApp.jsを作成する．
その際以下の３つを守る．

React.Componentを継承する
renderメソッドでDOMを返す
export defaultで外部から参照できるようにする

App.js

import React from 'react'

export default class App extends React.Component {

  render () {
    return <h1>Hello, world!</h1>
  }

}

##index.jsファイルの作成
Reactアプリを実行する際，一番最初に呼び出されるindex.jsファイルを作成する．
下記，最も簡易的なindex.jsの例

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

のようにReactDOMによって作成されたReactコンポーネントは，新しいDOMとして指定できるようになる．
そして最終的なレンダリングは，この各Reactコンポーネントのrenderメソッドにおいて返却されるDOMが描画されることになる．