こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
ただの個人的アウトプットです
Reactコンポーネント
| 種類 | 役割 |
|---|---|
| Functional Component | 関数定義による作成 |
| Class Component | クラス定義による作成 |
違い
Class Componentには以下の2つができる。
- stateがある。
- ライフサイクルメソッドを定義できる。
コンポーネントの再利用
Reactコンポーネントは設計図のようなもので、再利用可能で、同じ構造のHTMLを作れる。
Reactエレメント
Reactコンポーネントの実体をReactエレメントと呼ぶ
Fragmentコンポーネント
Reactコンポーネントは単一の親要素しか扱えない。
React.Fragmentを使うことで並列にできる。
Todoアプリの作成
stateとイベントハンドリング
| 名称 | 意味 |
|---|---|
| state | 状態を管理する仕組み。何が入力されているか、何が表示するべきかなど |
コンポーネントの準備
Appコンポーネント
アプリの各コンポーネントをまとめ上げる役割。
データ管理を行う。
TodoInputコンポーネント
Todo入力のためのコンポーネントを作成する。
TodoListコンポーネント
propsとして受け取ったtodoListを一つのTodoItemに表示する。
TodoItemコンポーネント
一つ一つのTodoを表すコンポーネント