Reactの基本ルール

パーツ設計

• パーツ（Component）を組み合わせて画面を構築する。
• 値（state）をもとにDOMを生成する。
• JSXでHTMLを記述する。
• デザイン（CSS）そのものはReact自体では設計しない。
• 参考ページでは、初期表示の実装を以下のように行っている。

ReactDOM.render(
  <MyComponent />,
  /* Reactが生成したコードを#mainに書き出す */
  document.getElementById('main') 
);

上記は、現代のコンポーネント単位の開発においては以下のようにエクスポートすることでも実現できる。

export default App;

Reactの実装基本

• React.Component を継承（extends）して、コンポーネントと呼ばれる「パーツ」を実装する。
• extends React.Component はクラスコンポーネントにおける決まり文句だ。
• render() の返り値は、ルートとして1つのDOM（1つの親要素）しか設定できない。

Stateを使う

• State はコンポーネント自身が管理する値の集まりだ。
• Reactは State の変化によって表示を動的に変化させることがメイン機能となる。

Propsを使う

• 呼び出し元から attribute（属性）経由で値を渡してもらうことができる。
• 値だけでなく、メソッド（関数）を渡すことも可能だ。

JSXタグ

• 通常のHTMLタグとは違った概念である。
• JSXタグには、Reactで定義したクラス（コンポーネント）をそのまま使用することができる。
• JSXタグは頭文字を大文字にする必要がある（小文字のままだと通常のHTMLタグと誤認されるため）。
• JSXタグは attribute を使うことで、 props として子に値を渡せる。
• 値だけでなく関数も渡すことが可能だ。
• 関数を渡せるため、部品コンポーネントから画面（親）コンポーネントに処理を委任させる（逆方向のデータフローを実現する）こともできる。
• クラス名は class ではなく、 className で指定する。
• JSXタグのコンポーネント内に別のJSXタグや要素を記述すれば、親のコンポーネントから props.children でその子要素を参照できる。
• 属性をスプレッド構文などでまとめて渡すこともできるが、そのコンポーネントが何の値を使うかを明示できた方が良いため、一括で丸ごと渡す手法はあまり良くないというのが個人的な所感だ。

イベント

• クリックイベント（onClick など）にアロー関数（() => fetch()）を使わず直接関数を記述する場合、括弧の有無などを間違えると画面表示（レンダリング）時に処理内容が評価・実行されてしまうため注意が必要だ。
• ループ処理によるリスト表示の際は、 key-value で定義した items を map 関数でループさせ、1つずつ要素を生成して親コンポーネントに返す。

return items.map((_item, _key) => {
    return(<li key={_key}>{_item.value}</li>)
})

CSSによるデザイン適用

• React自体にはデザインに関する固有の機能はない。
• CSS in JS という考え方があり、デザインもJSに含めて管理する形が主流になる可能性がある。
• ライブラリの読み込みとCSSの読み込みを別々に記述するのは面倒であるため、1つで済めば非常に楽だ。
• style オブジェクトを定義し、HTMLタグを記述する際にそのオブジェクトを style 属性に渡すことで、インラインスタイルとしてレイアウトを管理しやすくできる。

Routeに値を持つコンポーネントを渡す

• react-router（旧バージョン）等において、ルートに値を保持したコンポーネントを渡す際は、 component 属性ではなく render 属性を使うことで指定できる。
• 別ページへの遷移は以下のように記述する。

<Link to="/">Home</Link>

パラメータを含むURLを制御する

• URLにパラメータを持たせたいときは、以下のようなルーティング設定を行う。

<Route component={EditPage} path="/edit/:id"></Route>

• 上記を設定すると、遷移先のコンポーネントの props に値が注入されるため、以下のように参照して利用する。

<p>ID:{props.match.params.id}</p>

参考

• React初心者のまとめ（基本編：1/3） - Qiita
• React初心者のまとめ（基本編：2/3） - Qiita
• React初心者のまとめ（基本編：3/3） - Qiita

画面遷移先にパラメータを送る

必要な実装は以下の3点。

• クリックした時の遷移処理（メソッド定義）
• クリックした時の遷移処理（JSX側でのコール）
• ルーティングの設定

クリックした時の遷移処理(1)

今回は、クリックしたら /secondpage のページに遷移するように実装する。

handleClick() {
  this.props.history.push('/secondpage')
}

クリックした時の遷移処理(2)

実際にリンク（ボタン）をクリックした際に、画面遷移させるメソッドをコールする。

<button onClick={() => this.handleClick()}>画面遷移</button>

ルーティングの実装

画面遷移を受け付けるためにルーティングを設定する。以下の通り。

<Route exact={true} path='/secondpage' component={SecondPage} />

ルーティングの実装は上から順番にマッチング処理が行われる。 そのため、ルート / の設定を一番下にしておかないと、 /secondpage に遷移しようとしてもルート / のページが誤って表示されてしまうケースがあるため注意が必要。

参考

• Reactで画面遷移先に値を送る - Qiita