[React]~MovieApp1: ~画面遷移の実装をしよう!~

こんにちは、KOUKIです。

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

今回は、Bootstrapを使って画面を作成し、画面間の遷移の処理を実装しましょう。

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

前回

Reactの開発環境をDockerを使って構築しました

事前準備

フォルダ/ファイル

モジュール

@type/react*は、ReactをTypeScriptで実装できるようにするためのもので、これらを導入しないと実装時に以下のエラーが出ます。

TypeScript error in /go-movies/src/App.tsx(6,5):

Could not find a declaration file for module ‘react/jsx-runtime’. ‘/go-movies/node_modules/react/jsx-runtime.js’ implicitly has an ‘any’ type.

If the ‘react’ package actually exposes this module, consider sending a pull request to amend ‘https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react’ TS7016

Bootstrapの導入

CSSのフレームワークであるBootstrapを導入しましょう。

publicフォルダ配下のindex.htmlに、BootstrapのCDNを追加します。

以下のファイルを修正します。

画面を表示してみましょう。Bootstrapが適用されているはずです。

画面遷移処理

先ほど、App.tsxにナビゲーションを実装しました。

各ナビゲーションに設定されているリンク先にページ遷移するために、React Routerを導入します。

これで、画面遷移できるようになりました。

次回

次回は、コンポーネント化とStateの実装を行います

記事まとめ

記録

参考書籍


ソースコード

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

index.html

index.tsx

App.tsx

コメントを残す