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が描画されることになる．