INDEX

1. 새로운 리액트 프로젝트 생성
2. React-Bootstrap 라이브러리 설치
3. React-Bootstrap 사용법

1. 새로운 리액트 프로젝트 생성

   npx create-react-app shop
   

2. React-Bootstrap 라이브러리 설치

   

   

   React-Bootstrap

   npm install react-bootstrap bootstrap
   

   

   <link
     rel="stylesheet"
     href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>"
     integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
     crossorigin="anonymous"
   />
   

3. React-Bootstrap 사용법

   import './App.css';
   import { Button } from 'react-bootstrap';
   
   function App() {
     return (
       <div>
         <Button variant="primary">primary</Button>
       </div>
     );
   }
   
   export default App;
   

   3-1. NavBar 생성

   

   

   import logo from './logo.svg';
   import './App.css';
   import { Navbar, Container, Nav } from 'react-bootstrap';
   
   function App() {
     return (
       <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>
     );
   }
   
   export default App;