[react] 쇼핑몰 project - set2) 리액트 부트스트랩, 폰트오쏨 적용하기
react 부트스트랩 설치 및 사용
html에서 css를 쉽게 사용하기 위해 부트스트랩을 다운받아 사용했었는데, react에서도 react 부트스트랩이 따로 있다.
- 부트스트랩 설치코드
yarn install react-bootstrap [email protected]
npm install react-bootstrap [email protected]
설치한 부트스트랩 사용하기위해 셋팅
리액트 부트스트랩 css 사용방법에 적힌 코드를 복사해서
- index.js 파일 위에 적을 코그
붙여넣기하면 부트스트랩에 있는 틀을 사용할 수 있다.
import "bootstrap/dist/css/bootstrap.min.css";
fortawesome 폰트오쏨 다운 및 사용
- yarn 명령어로 폰트오쏨을 다운받는다.
yarn add @fortawesome/fontawesome-free
npm install @fortawesome/fontawesome-free
- index.js위에 추가해야하는 코드
import '@fortawesome/fontawesome-free/js/all.js';
폰트오쏨 사이트 : https://fontawesome.com/
리액트 부트스트랩에서 컴포넌트 디자인 갖고오기
컴포넌트를 사용할 파일 내에 import 해와야 한다.
그 다음 원하는 디자인의 코드를 복사 붙여넣기 하면 화면에 잘 뜨는 것을 볼 수있다.
import { Button } from 'react-bootstrap';
function App() {
return (
<div className="App">
<Button variant="primary">Primary</Button>{" "}
</div>
);
}
export default App;
기존 리액트가 아닌 html, css 에서 쓰던 부트스트랩에서 갖고 오는 방식은?
import 할 필요없이 복붙만 하면 됐었다.
Author And Source
이 문제에 관하여([react] 쇼핑몰 project - set2) 리액트 부트스트랩, 폰트오쏨 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@estell/react-쇼핑몰-프로젝트-set2-리액트-부트스트랩-셋팅저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)