[REACT] 3_앱 Navbar 구성

리액트-부트스트랩 컴포넌트 검색

 

검색 컴포넌트 : navbar

https://react-bootstrap.github.io/

React-Bootstrap

소스코드 복사 후 App.js 에 붙여넣기

 

App.js

import logo from './logo.svg';									
import './App.css';									
import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap';									
									
function App() {									
  return (									
    <div className="App">									
      {/* NavBar */}									
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">									
        <Container>									
          <Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>									
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />									
          <Navbar.Collapse id="responsive-navbar-nav">									
            <Nav className="me-auto">									
              <Nav.Link href="/">Home</Nav.Link>									
              <Nav.Link href="#pricing">Pricing</Nav.Link>									
              <NavDropdown title="Dropdown" id="collasible-nav-dropdown">									
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>									
                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>									
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>									
                <NavDropdown.Divider />									
                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>									
              </NavDropdown>									
            </Nav>									
            <Nav>									
              <Nav.Link href="#login">로그인</Nav.Link>									
              <Nav.Link eventKey={2} href="#join">									
                회원가입									
              </Nav.Link>									
            </Nav>									
          </Navbar.Collapse>									
        </Container>									
      </Navbar>									
      {/* jumbotron */}									
      {/* cart contents */}									
      {/* more button */}									
    </div>									
  );									
}									
									
export default App;

---