どうも。どっことです。Reactの実装について調べてみたのでその備忘録を載せたいと思います。
Reactの基本ルール
パーツ設計
- パーツ=
Componentを組み合わせて画面を構築する - 値(
state)をもとにDOMを生成 - JSXでHTMLを書く
- デザイン(CSS)は設計しない
- 参考ページでは、初期表示の実装を以下でやっている
ReactDOM.render(
<MyComponent />,
/* Reactが生成したコードを#mainに書き出す*/
document.getElementById('main')
);
上記は、以下でも実現できる。
export default App;Reactの実装基本
- React.Componentを継承（extends）してコンポーネントといわれる「パーツ」を実装する
extends React.Componentは決まり文句render()の返り値は１つのDOMしか設定できない
Stateを使う
Stateは自身が管理する値の集まり- Reactは
Stateによって表示を変化させることがメイン機能
Propsを使う
- 呼び出し元から
attributeで値を渡してもらえる - 値どころか、メソッドも渡してもらえる
JSXタグ
- HTMLタグとは違った概念。
- 多分JSXタグはReactで定義したクラスが使えるぽく見える
- JSXタグは頭文字を大文字にする必要あり
- JSXタグは
attributeを使うことでpropsとして値を渡せる - 値どころか関数も渡せる
- 関数を渡せるので部品コンポーネントから画面コンポーネントに処理を委任させることもできそう。
- クラス名は
classではなく、classNameで指定する。 -
JSXタグのコンポーネント内に別のJSXタグのコンポーネントを記述すれば、親のコンポーネントから
props.childrenで子のコンポーネントを参照できる - 属性でまとめて値を渡すことができる
- そのコンポーネントが何の値を使うかを明示できた方が良いから、まとめて渡すはよくないという所感
イベント
- クリックイベントは、アロー関数を省略すると画面表示時に処理内容を評価してしまう。
- ループ処理によるリスト表示
-
key-valueで定義したitemsをmap関数でループさせ、1つずつアイテムを作り親コンポーネントに渡す。
return items.map((_item,_key) => {
return(<li key={_key}>{_item.value}</li>)
})
CSSによるデザイン適用
- Reactにはデザインに関する機能はない。
- CSSinJSという考え方があり、デザインもJSに含めて考える形が主流になる可能性がある。
- ライブラリ読み込むのと、CSS読み込むのを別々に記述するのは面倒。
- １つで済めば楽だよね。
-
styleオブジェクトを定義して、HTMLタグを記述するときにそのコンテナを
styleのattributeに渡すことで、レイアウトを管理しやすくできる。
Routeに値を持つコンポーネントを渡す
componentではなくrenderを使うことで指定できる。- 別ページへの遷移は以下の通り
<Link to="/">Home</Link>パラメータを含むURLを制御する
- URLにパラメータを持たせたいときは以下のような設定する。
<Route component="{EditPage}/" path="/edit/:id"></Route>-
上記を設定したら
propsに値が設定されるので、以下のように参照して利用する。
<p>ID:{props.match.params.id}</p>