React-Bootstrap 사용boot-strap을 사용할 수 있기 때문에 다양한 것을 만져보세요.이번에는 Navbar입니다.
거의 본가 복제품이기 때문에 상세한 상황은 본가를 참조하십시오.

Navbar

머리글에 해당하는 부분.나는 모든 응용 프로그램이 필요할 것이라고 생각한다.
복사부터 해봐.
App.js

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import LOGO from './logo.svg';

class App extends Component {
    render() {
        return (
            <Navbar bg="dark" variant="dark">
                <img
                    src={LOGO}
                    width="30"
                    height="30"
                    alt="React Bootstrap logo"
                />
                <Nav className="mr-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;

↓ 실행 결과

이렇게 되면 스마트폰이나 화면이 작아질 때 선택이 많으면 화면이 붕괴된다.슬프다

스마트폰 같은 걸로 움직이고 싶다!!이럴 때
아래와 같이 쓰면 좋은 느낌을 줄 수 있다.
app.js

import React, { Component } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import LOGO from './logo.svg';

class App extends Component {
    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">
                    <img
                        src={LOGO}
                        width="30"
                        height="30"
                        alt="React Bootstrap logo"
                    />
                    SampleApp
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar >
        );
    }
}
export default App;

expand="true"라고 하면 햄버거 메뉴가 계속 표시됩니다.
둘러싸인 부분은collapse를 표시하지 않습니다
공식이 준비되지 않은 색의 변경 등은 머지않아 쓰일 것이다.