Reactで画面遷移を実装していきます。
Reactとは、Facebookが開発したオープンソースのJavaScriptライブラリです。SPA(シングルページアプリケーション)を作成する時に使用されます。
Reactプロジェクトの作成
Node.jsがインストールされているかを確認
node -v
npm -v
Reactプロジェクトを作成するコマンドを実行
npx create-react-app my-app
プロジェクトディレクトリに移動
cd my-app
プロジェクトを起動
npm start
ブラウザでhttp://localhost:3000にアクセスすると、Reactアプリが表示される
初期のディレクトリ構造
「npx create-react-app my-app」コマンドで作成した場合、このようなディレクトリ構造になっているかと思います。
my-app/
├── node_modules/ # インストールされたパッケージ
├── public/ # 公開用の静的ファイル
│ ├── favicon.ico # ファビコン
│ ├── index.html # アプリのエントリーポイント
│ ├── logo192.png # ロゴ画像（192x192）
│ ├── logo512.png # ロゴ画像（512x512）
│ ├── manifest.json # ウェブアプリの設定
│ └── robots.txt # 検索エンジン向けの設定
├── src/ # アプリのソースコード
│ ├── App.css # Appコンポーネント用のCSS
│ ├── App.js # メインのアプリコンポーネント
│ ├── App.test.js # Appコンポーネントのテスト
│ ├── index.css # 全体のスタイル
│ ├── index.js # アプリのエントリーポイント
│ └── reportWebVitals.js # パフォーマンス測定用のファイル
├── .gitignore # Gitに含めないファイルの設定
├── package.json # プロジェクトのメタデータと依存関係
├── README.md # プロジェクトの説明
└── yarn.lock / package-lock.json # 依存関係のロックファイル
react-router-domのインストール
Reactで画面遷移させるには、react-router-domが必要になるのでインストール
npm install react-router-dom
ページを作成する
srcディレクトリの中にpagesディレクトリを作成し、その中にページのファイルを作成していきます。
├── src/ # アプリのソースコード
│ ├── pages
├── ここにページのファイルを作成していく
ページのファイルの中身
今回はpage1.js、page2.js、page3.jsの3つのファイルを作成します。
画面遷移したことがわかりやすいように、それぞれ数字を変更して保存してください。
const Page1 = () => {
return (
<>
<h1>page1</h1>
</>
)
}
export default Page1
作成した後は、こういうディレクトリ構造になっています。
├── src/ # アプリのソースコード
│ ├── pages
├── page1.js
├── page2.js
├── page3.js
App.jsの中身を変更
App.jsファイルの中身のdivタグの中身とcssの記述を削除します。
function App() {
return (
<div>
</div>
);
}
export default App;
画面遷移させるために先ほどインストールしたreact-router-domの中のRouter, Routes, Route, Linkが必要なのでimportする。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function App() {
return (
<div>
</div>
);
}
export default App;
さらにルーティンを設定します。
先ほど作成したpage1.js、page2.js、page3.jsをimportし、このように記述します。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Page1 from './pages/page1'
import Page2 from './pages/page2'
import Page3 from './pages/page3'
function App() {
return (
<div>
<Router>
{/* ルーティングの設定 */}
<Routes>
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
<Route path="/page3" element={<Page3 />} />
</Routes>
</Router>
</div>
);
}
export default App;
画面遷移がしやすいようにナビゲーションメニューを追加する。
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Page1 from './pages/page1'
import Page2 from './pages/page2'
import Page3 from './pages/page3'
function App() {
return (
<div>
<Router>
{/* ナビゲーションメニュー */}
<nav>
<ul>
<li>
<Link to="/page1">Page1</Link>
</li>
<li>
<Link to="/page2">Page2</Link>
</li>
<li>
<Link to="/page3">Page3</Link>
</li>
</ul>
</nav>
{/* ルーティングの設定 */}
<Routes>
<Route path="/page1" element={<Page1 />} />
<Route path="/page2" element={<Page2 />} />
<Route path="/page3" element={<Page3 />} />
</Routes>
</Router>
</div>
);
}
export default App;ブラウザで動作確認
ブラウザで開くと、クリックで画面遷移できていることを確認できます。
コメント