【React】タブ表示切替画面作りたい！1からパッケージを作って、簡単に作ってみるよ

投稿者 投稿日:

以前タブ表示切替について記事をあげました

【React】タブ表示（タブ切り替え表示）したいよ！こんな感じどう？

が、

部分的過ぎてわかりずらかったと思うので

改めて、一から作成する記事を書きました

ぜひ参考になればと思います！

さて、一から作っていきましょうか


1. 環境の準備

まず、create-react-appを使用してReactプロジェクトを作成します

npx create-react-app tab-switching-app
cd tab-switching-app

次に、react-router-domをインストールします

npm install react-router-dom@latest

package.jsonはこんな感じです
（すべて一緒ではないかもですが参考ください）

{
  "name": "tab-switching-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.25.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

2. コードの実装

public/index.htmlの実装

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Tab Switching App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

src/index.jsの実装

ReactDOM.createRootを使用して、アプリをレンダリングします

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

src/App.jsの実装

react-router-domのBrowserRouter, Routes, Route, Linkを使用して、タブ切り替えを実装します

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

そして、タブそれぞれの画面を実装します

src/Home.jsの実装

import React from 'react';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <p>Welcome to the home page!</p>
      <p>ホーム画面ですよ！</p>
    </div>
  );
}

export default Home;

src/About.jsの実装

import React from 'react';

function About() {
  return (
    <div>
      <h2>About</h2>
      <p>This is the about page.</p>
      <p>アバウト画面ですよ！</p>
    </div>
  );
}

export default About;

src/Contact.jsの実装

import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
      <p>This is the contact page.</p>
      <p>コンタクト画面ですよ！</p>
    </div>
  );
}

export default Contact;

3. アプリ起動！！

アプリ起動します！

npm start

こんな画面が表示されるでしょう！！



表示されましたかね。。。？

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon