npx create-react-app shop

bootstrap 설치

npm install react-bootstrap bootstrap

css import 두개 중 하나의 방법으로

src/app.js 에다가

import 'bootstrap/dist/css/bootstrap.min.css';

public/index.html 에다가

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

bootstrap 가져와보기

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

function App() {
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">쇼핑몰</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">인기순위</Nav.Link>
            <Nav.Link href="#pricing">MYPage</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </div>
  );
}

export default App;

위와 같이 사용하여 가져오면 됨!

이미지 넣는 법

대문 사진 아래 3개의 이미지 나오게 만들 것

이미지 나오게 하는 방법 3가지

1. css에 url 경로 입력
2. style backgroundImage 에 넣음 (import 해줘야 함)
3. public 에 넣으면 어디서나 써도 됨.

<img src={process.env.PUBLIC_URL + '/logo.png'} />

위와 같이 사용해줘야 가져올 수 있음