Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

오늘도 코딩하나

[React] (2)react-bootstrap 설치 본문

React/Lecture

[React] (2)react-bootstrap 설치

오늘도 코딩하나 2024. 5. 24. 16:32

 

1. react-bootstrap

https://react-bootstrap.netlify.app/docs/getting-started/introduction

 

Introduction | React Bootstrap

Learn how to include React Bootstrap in your project.

react-bootstrap.netlify.app

(1) react-bootstrap 설치

npm install react-bootstrap bootstrap

 

(2-1) index.html - <head> 안에 import 시켜주기

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

(2-2) App.js 

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

-> 2-1 / 2-2 중에 하나의 방법으로 하면 된다.

 

** bootstrap vs react-bootstrap

  - bootstrap : 상태값과 클래스를 사용

  - react-bootstrap : function과 hooks 사용

 

'React > Lecture' 카테고리의 다른 글

[React] (6) Lifecycle과 useEffect  (1) 2024.06.04
[React] (5) 리액트 라우터  (0) 2024.05.28
[React] (4) 데이터 가져오기  (0) 2024.05.24
[React] (3) image  (0) 2024.05.24
[React] (1)프로젝트 생성  (0) 2023.12.20
'React/Lecture' Related Articles more