React : 리액트에서 부트스트랩 사용하기

부트스트랩 홈페이지 바로가기

1. 터미널에 npm install react-bootstrap bootstrap 입력

2. index.html -> link 추가

2-1. css -> import 하기

둘중하나 선택해서 진행

3. 부트스트랩을 사용할 파일에 사용할 종류 import 하기

여러개 사용하려면 아래와 같이 import 해도 괜찮음

import { Button, Container, Nav, Navbar } from 'react-bootstrap';

4. 코드 붙혀넣기

import { Button, Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';

function App() {
  return (
    <div className="App">
      
      <Navbar bg="dark" variant="dark">
        <Container>
          <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>
        </Container>
      </Navbar>
      
    </div>
  );
}

export default App;

5. 결과

예쁜 navbar 생김