[React]~MovieApp2: ~コンポーネント化とStateの実装~

こんにちは、KOUKIです。

ReactでMovie Appの開発を行なっています。

今回は、ページのコンポーネント化とReactのStateを実装しましょう。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

画面遷移処理の実装を行いました

事前準備

フォルダ/ファイル

ページのコンポーネント化

Reactでは、ページをコンポーネント単位で作成すると再利用性の高いコードを実装することができます。

Homeページ

前回作成したHomeをコンポーネント化しましょう。

Movieページ

前回作成したMovieをコンポーネント化しましょう。

Adminページ

前回作成したAdminをコンポーネント化しましょう。

App.tsxから読み込む

作成したコンポーネントをApp.tsxから読み込みましょう。

確認

画面遷移ができていれば、成功です。

Movie情報を表示する

Reactには、State(状態)を管理する機能として「useState」提供されています。

例えば、Movie情報をこのuseStateに渡すとReactアプリ内で管理することができるようになります。

const [movies, setMovies] = useState<Movie[]>([])」の行で、Stateを設定しています。

型には、新しく実装したMovieを指定しました。

また、useEffectを利用してページが読み込まれたタイミングで、Movie情報をStateに格納しています。

Movie情報は、以下の処理で画面に表示することができます。

補足:Reactのライフサイクル

Reactのライフサイクルは結構複雑なのですが、このDocumentは結構参考になります。
※クラスコンポーネントで実装した時の用語で説明されています

次回

次回は、ルーティング処理の実装をしましょう

記事まとめ

履歴

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

App.tsx

Home.tsx

Movie.tsx

Admin.tsx

Movie.ts

コメントを残す