자 프로젝트 실행하기 위해서 cra 명령어를 입력한다.
shop라는 하위폴더가 생성이 되고 App.js에서 HTML들은 지우고 div 하나만 남겨두고 시작한다.
npx create-react-app shopimport logo from "./logo.svg";
import "./App.css";
import { Button } from "bootstrap";
function App() {
return (
<div className="App">
</div>
);
}
export default App;그리고 이번에는 메뉴디자인을 편리하게 해주는 bootstrap를 이용한다.
리액트에 맞게 바꾼 Bootstrap를 설치한다.
npm install react-bootstrap bootstrap@5.1.3yarn으로도 빠르게 설치가능
yarn add react-bootstrap bootstrap
Bootstrap CSS파일을 요구할 때도 있으니까 index.html파일의 head태그 안에 아래 코드를 복붙해준다.
이 코드를
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>index.html 안에 head내에 넣는다.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
react-bootstrap에서 코드를 복붙해도 상관없고 그냥 bootstrap사이트에서 복붙해도 상관없다.
bootstrap의 button type을 한번 넣어보자.
bootstrap: https://getbootstrap.com/docs/5.1/components/buttons/
react-bootstrap: https://react-bootstrap.github.io/getting-started/introduction/
import logo from "./logo.svg";
import "./App.css";
import { Button } from "bootstrap";
function App() {
return (
<div className="App">
<button type="button" class="btn btn-primary">Primary</button>
</div>
);
}
export default App;
<출처 coding apple: React 리액트 기초부터 쇼핑몰 프로젝트까지!>
https://codingapple.com/course/react-basic/
React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌
누구나 마음 한켠엔 나만의 웹서비스를 만들고 싶어합니다. 프론트엔드는 어찌저찌 하겠는데 서버 만드는게 어렵고 귀찮다고요? 그렇다면 Firebase를 쓰십시오. 구글이 웹서버를 대신 만들어
codingapple.com
'React > ShoppingMallProject' 카테고리의 다른 글
| Node+Express 서버 & React 연동 (0) | 2021.11.17 |
|---|---|
| CSS대신 SASS쓰기 (0) | 2021.11.08 |