React

Learning React Second Edition

Learning React Second Edition

“Learning React: A Hands-On Guide to Building Web Application Using React and Redux, Second Edition”を読みました。出版は2018年5月。親しみやすい語り口と簡潔なサンプルコードのおかげでサクサク読めました。

React With Reduxのサンプル

React With Reduxのサンプル

React with Reduxのサンプルプログラムです。+/-でインクリメント/デクリメントするシンプルなカウンターアプリです。Reactの状態管理にReduxを使用します。

ReactでTodoアプリを作って公開

ReactでTodoアプリを作って公開

ReactでTodoアプリを作りました。テキストボックスにタスクを入力して一覧表示。タスク項目をクリックするとタスクが一覧から削除されます。動作環境をGithub Pagesに公開しました。

RefsとPortals

RefsとPortals

RefsとPortalsは、ReactからHTMLのDOM要素に直接アクセスするための仕組みです。RefsはコンポーネントのコードからHTML要素へのアクセス経路を作ります。PortalsはReactコンポーネントの範囲外のDOM要素にコンテンツをレンダリングします。

Reactのライフサイクルメソッド

Reactのライフサイクルメソッド

ライフサイクルメソッドはコンポーネントのライフサイクルにしたがって自動的に呼び出されるイベントハンドラの一種です。初期化フェーズ、更新フェーズ、削除フェーズで呼ばれるライフサイクルメソッドを一覧します。

Reactでイベント処理

Reactでイベント処理

Reactでイベントを処理するサンプルです。JSXのコンポーネントタグにイベントリスナを記述してイベントハンドラを登録します。イベントハンドラはコンポーネントのメソッドとして定義します。メソッドをReactの処理の中で参照するためにコンストラクタでバインドする必要があります。

Reactコンポーネントを組み合わせる

Reactコンポーネントを組み合わせる

コンポーネントを組み合わせるサンプルです。SquareLabelCardの3つのコンポーネントを定義し、Cardの中でSquareLabelを呼び出しています。ReactDOM.renderCardに渡したプロパティをCardコンポーネント内でSquareLabelに渡しているところもポイントです。

Reactコンポーネントにスタイルを適用する

Reactコンポーネントにスタイルを適用する

Reactのコンポーネントにスタイルを適用するサンプルです。コンポーネントクラス内でスタイルオブジェクトを生成し、returnするテンプレートのsytle属性から参照する。コンポーネント内部でスタイルの適用まで完結するところがポイントです。