【React（Typescript）】ヘッダーナビゲーションの実装例

# 作るもの
![スクリーンショット 2023-07-29 5.32.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1850625/74c5a14b-f308-863b-3bfb-d07a13795383.png)

<img width="2000" alt="ヘッダーナビゲーション.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1850625/2bc4782e-7a76-83f3-16f9-e61f7c4e8de8.gif">

# 実装例
- React（Typescript）の雛形を作成する。
```terminal:terminal
npx create-react-app header --template typescript
```

- src配下にcomponentsディレクトリを作成し、その中に、Header.tsx、Header.css、Navigation.tsxを作成する。
```tsx:Header.tsx
import React from 'react';
import { Link } from 'react-router-dom';
import './Header.css'; // Headerコンポーネントに対応するCSSファイルをインポート

const Header: React.FC = () => {
  return (
    <header className="header">
      <Link to="/" className="logo">
        My Restaurant
      </Link>
      <nav>
        <ul className="nav-links">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/menu">Menu</Link>
          </li>
          <li>
            <Link to="/locations">Locations</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;
```

```css:Header.css
/* src/components/Header.css */
.header {
  background-color: #222;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}

.nav-links {
  display: flex;
}

.nav-links li {
  margin-left: 1.5rem;
  list-style: none;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: #ffca28;
}
```

```tsx:Navigation.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const Navigation: React.FC = () => {
  return (
    <nav className="header-navigation">
      <Link to="/signin">Sign In</Link>
      <Link to="/signup">Sign Up</Link>
    </nav>
  );
};

export default Navigation;
```

- srcディレクトリ配下の、App.tsxを以下のように書き換える。
```tsx:App.tsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Navigation from './components/Navigation';

const Home: React.FC = () => {
  return <h2>Home Page</h2>;
};

const Menu: React.FC = () => {
  return <h2>Menu Page</h2>;
};

const Locations: React.FC = () => {
  return <h2>Locations Page</h2>;
};

const Contact: React.FC = () => {
  return <h2>Contact Page</h2>;
};

const App: React.FC = () => {
  return (
    <Router>
      <Header />
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/menu" element={<Menu />} />
        <Route path="/locations" element={<Locations />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;
```

- サーバーを起動する。
```terminal:terminal
npm start
```

- 以下の画面が表示されれば成功！
![スクリーンショット 2023-07-29 5.44.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1850625/8842e083-3492-be00-aa63-83d312d057db.png)