[React Bootstrap] Navbar を表示してみる | 心を無にして始める React

2022-04-05

今回は、Navbar コンポーネントを表示します。

準備

まだ components フォルダがなければ作ります。

src を右クリックして New Folder 。

components と入力してフォルダを作ります。

今回は、components フォルダに Navbar のコンポーネントを作って、表示してみます。

公式のドキュメントはここ。

https://react-bootstrap.netlify.app/components/navbar/

Navbar コンポーネントをつくる

component フォルダに Navbar.js を作ります。

Navbar.js を心を無にして編集してみます。

import React from 'react';
import { Navbar as BootstrapNavbar } from 'react-bootstrap';
import NavbarBrand from './NavbarBrand';

function Navbar(props) {
  const {
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapNavbar {...otherProps}>
      {children}
    </BootstrapNavbar>
  );
}

export default Object.assign(Navbar, {
  Brand: NavbarBrand,
});

NavbarBrand.js も続けて作ります。

import React from 'react';
import { Navbar as BootstrapNavbar } from 'react-bootstrap';

function NavbarBrand(props) {
  const {
    id,
    children,
    ...otherProps
  } = props;

  return (
    <BootstrapNavbar.Brand id={id} {...otherProps}>
      {children}
    </BootstrapNavbar.Brand>
  );
}

export default NavbarBrand;

プロジェクトでは、コンポーネントを統一したデザインで利用することが多いです。

そのため、（React Bootstrap のコンポーネントをその場その場でカスタマイズしながら使うよりも、）プロジェクトでコンポーネントにしたものを使うほうが、変更をお手軽に漏れなくできることが多いです。

Navbar コンポーネントを表示する

それでは、 App.js を編集して Navbar コンポーネントを表示します。

import React from 'react';
import './App.css';
import Nav from './components/Nav';
import Navbar from './components/Navbar';

function App() {
  return (
      <Navbar className="px-5" bg="primary" variant="dark">
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
      </Navbar>
  );
}

export default App;

画面を確認してみます。

はい、できました。