ReactBootStrap 레이아웃 디자인하기

Navbar만들기

react bootstrap
react bootstrap 공식 사이트로 들어간 뒤 navbar를 검색하고 원하는 예제를 긁어와서 붙여줍니다.

function App(){
  return (
    <div className="App">
      <Navbar></Navbar> //여기 마음에 드는 Navbar 예제를 붙여주었어요
    </div>
  )
}

여기까지 하고 실행시키면 에러가 납니다.

컴포넌트 상단에 import를 해줘야 정상적으로 작동됩니다.

import { Navbar } from 'react-bootstrap';

function App(){
  return (
    <div className="App">
      <Navbar></Navbar>
    </div>
     )
    }

다른 컴포넌트들도 있으니 함께 import해주세요

import { Navbar,Nav,NavDropdown,Form,Button,FormControl,Container,Carousel} from 'react-bootstrap'

이런식으로 다른 예제들도 가져와서 수정하시면 됩니다.