こんにちは、KOUKIです。
ReactでMovie Appの開発を行なっています。
今回は、Bootstrapを使って画面を作成し、画面間の遷移の処理を実装しましょう。
尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。
前回
事前準備
フォルダ/ファイル
1 2 3 4 |
rm go-movies/src/logo.svg rm go-movies/src/reportWebVitals.ts rm go-movies/src/App.test.tsx rm go-movies/src/App.css |
モジュール
1 2 3 4 |
cd go-movies/ npm install react-router-dom npm i --save-dev @types/react-router-dom npm i --save-dev @types/react |
@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を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head> ... <title>Go Watch Movies</title> <!-- BootstrapのCDNを追加 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> ... </body> </html> |
以下のファイルを修正します。
1 2 3 4 5 6 7 8 9 10 11 12 |
// src/index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// src/App.tsx function App() { return ( <div className="container"> <div className="row"> <h1 className="mt-3"> Go Watch a Movie! </h1> <hr className="mb-3" /> </div> <div className="row"> <div className="col-md-2"> <nav> <ul className="list-group"> <li className="list-group-item"> <a href="/">Home</a> </li> <li className="list-group-item"> <a href="/movies">Movies</a> </li> <li className="list-group-item"> <a href="/admin">Manage Catalogue</a> </li> </ul> </nav> </div> <div className="col-md-10"> </div> </div> </div> ) } export default App; |
画面を表示してみましょう。Bootstrapが適用されているはずです。

画面遷移処理
先ほど、App.tsxにナビゲーションを実装しました。
各ナビゲーションに設定されているリンク先にページ遷移するために、React Routerを導入します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// src/App.tsx import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' export default function App() { return ( <Router> <div className="container"> <div className="row"> <h1 className="mt-3"> Go Watch a Movie! </h1> <hr className="mb-3" /> </div> <div className="row"> <div className="col-md-2"> <nav> <ul className="list-group"> <li className="list-group-item"> <Link to="/">Home</Link> </li> <li className="list-group-item"> <Link to="/movies">Movies</Link> </li> <li className="list-group-item"> <Link to="/admin">Manage Catalog</Link> </li> </ul> </nav> </div> <div className="col-md-10"> <Switch> <Route path="/movies"> <Movies /> </Route> <Route path="/admin"> <Admin /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </div> </div> </Router> ) } const Home = () => { return <h2>Home</h2> } const Movies = () => { return <h2>Movies</h2> } const Admin = () => { return <h2>Manage Catalog</h2> } |
これで、画面遷移できるようになりました。
次回
記事まとめ
参考書籍
ソースコード
ここまで実装したソースコードを下記に記載します。
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>Go Watch Movies</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
index.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// src/index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); |
App.tsx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// src/App.tsx import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' export default function App() { return ( <Router> <div className="container"> <div className="row"> <h1 className="mt-3"> Go Watch a Movie! </h1> <hr className="mb-3" /> </div> <div className="row"> <div className="col-md-2"> <nav> <ul className="list-group"> <li className="list-group-item"> <Link to="/">Home</Link> </li> <li className="list-group-item"> <Link to="/movies">Movies</Link> </li> <li className="list-group-item"> <Link to="/admin">Manage Catalog</Link> </li> </ul> </nav> </div> <div className="col-md-10"> <Switch> <Route path="/movies"> <Movies /> </Route> <Route path="/admin"> <Admin /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </div> </div> </Router> ) } const Home = () => { return <h2>Home</h2> } const Movies = () => { return <h2>Movies</h2> } const Admin = () => { return <h2>Manage Catalog</h2> } |
コメントを残す
コメントを投稿するにはログインしてください。