React - blog 프로젝트 생성 & Bootstrap 사용하기

🖤 프로젝트 생성하기

• 작업폴더 shift + 우클릭 -> powershell/터미널 열기
• 터미널에 리액트 프로젝트 생성 명령어 입력하기

npx create-react-app shop

• shop 이라는 폴더를 VScode 에디터로 오픈하기
• App.js에 필요없는 html은 삭제하고 div 하나만 남기기

🖤 React-Bootstrap 사용법

• 버튼이 필요하다면?
• React-Bootstrap 사이트에서 button 검색 후 복붙하면 버튼 생성이 된다.

import {Button} from 'react-bootstrap'

function App(){
  return (
    <div>
      <Button variant="primary">Primary</Button>
    </div>
  )
}

• 부트스트랩 복붙시 주의사항은 대문자로 시작하는 컴포넌트 이름을 상단에서 import 해야한다.

• 상단메뉴가 필요할 땐 Navbar라고 검색하면 된다.

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

function App(){
  return (
    <div>
      <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="#home">MIMIShopt</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
#           <Nav.Link href="#features">Cart</Nav.Link>
        </Nav>
        </Container>
      </Navbar>
    </div>
  )
}

• 검은색 상단바가 완성된다.