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

こんにちは、KOUKIです。

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

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

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

<目次>

前回

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

[React]~MovieApp: dockerで環境構築をしよう!~

事前準備

フォルダ/ファイル

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

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

モジュール

cd go-movies/
npm install react-router-dom
npm i --save-dev @types/react-router-dom
npm i --save-dev @types/react

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を追加します。

<!-- 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>

<!DOCTYPE html>

<head>

...

<title>Go Watch Movies</title>

integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

</head>

<body>

...

</body>

</html>

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

// 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')
);

// 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')

);

// 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;

// src/App.tsx

function App() {

return (

Go Watch a Movie!

</h1>

</div>

<nav>

</li>

<a href="/movies">Movies</a>

</li>

<a href="/admin">Manage Catalogue</a>

</li>

</ul>

</nav>

</div>

</div>

)

}

export default App;

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

画面遷移処理

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

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

// 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>
}

// src/App.tsx

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

export default function App() {

return (

Go Watch a Movie!

</h1>

</div>

<nav>

</li>

<Link to="/movies">Movies</Link>

</li>

<Link to="/admin">Manage Catalog</Link>

</li>

</ul>

</nav>

</div>

</Route>

</Route>

</Route>

</Switch>

</div>

</Router>

)

}

const Home = () => {

return <h2>Home</h2>

}

const Movies = () => {

return <h2>Movies</h2>

}

const Admin = () => {

return <h2>Manage Catalog</h2>

}

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

次回

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

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

記事まとめ

記録

[React]~MovieApp: dockerで環境構築をしよう!~

React~記事まとめ~

参考書籍

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

React.js＆Next.js超入門第2版【電子書籍】[ 掌田津耶乃 ]
価格：2970円 (2021/6/26時点)

楽天で購入

ソースコード

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

index.html

<!-- 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>

<!DOCTYPE html>

<head>

<title>Go Watch Movies</title>

integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

</head>

<body>

</body>

</html>

index.tsx

// 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')
);

// 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

// 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>
}

// src/App.tsx

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

export default function App() {

return (

Go Watch a Movie!

</h1>

</div>

<nav>

</li>

<Link to="/movies">Movies</Link>

</li>

<Link to="/admin">Manage Catalog</Link>

</li>

</ul>

</nav>

</div>

</Route>

</Route>

</Route>

</Switch>

</div>

</Router>

)

}

const Home = () => {

return <h2>Home</h2>

}

const Movies = () => {

return <h2>Movies</h2>

}

const Admin = () => {

return <h2>Manage Catalog</h2>

}

月	火	水	木	金	土	日
						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

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

前回

事前準備

フォルダ/ファイル

モジュール

Bootstrapの導入

画面遷移処理

次回

記事まとめ

参考書籍

ソースコード

index.html

index.tsx

App.tsx

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

前回

事前準備

フォルダ/ファイル

モジュール

Bootstrapの導入

画面遷移処理

次回

記事まとめ

参考書籍

ソースコード

index.html

index.tsx

App.tsx

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

JavaScript(あとCSS)でSticky Navigationを実装…

[Go言語]RWMutexの考察

CSSでDrawingアプリをスタイリングしよう!

JavaScriptでNETFLIXのモバイルナビゲーションを作ろう!

JavaScriptとGo言語でToDoリストアプリを作ろう!~Docker…

React ~基礎編~ JSX

[初学者向け]Helmを学ぼう!~Chartの検証とテストについて理解を深め…

[Go言語]数値を安全にカウントアップする方法

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル