react-bootstrap 사용법

구글검색

https://react-bootstrap.github.io/

React-Bootstrap

 

Get started 클릭

아래의 페이지가 나온다

 

vscode터미널에 입력해줘서 설치 

npm install react-bootstrap bootstrap

 

 

json 안에 설치되었다고 나온다

 

 

 

bootstrap사용법 

 

1. app.js에 입력

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

 

2. pubilc > index.js head태그안 작성

 

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
  integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
  crossorigin="anonymous"
/>

 

 

원하는 버튼이나 경고창등 사용하기

 

검색창에 원하는거 입력하기

button을 화면에 띄우고싶다면 button을 입력하기

 

 

 

사용하고 싶은 button을 골라서 button태그를 복붙해주면된다

 

 

 

App.js

<Button variant="primary">Primary</Button>

하쥐만!!

 

Button대문자 태그는 컴포넌트 이므로 import를 해와서 사용해줘야한다

처음 Get started 를 눌렀을때 뜨는페이지에 

 import를 해줘야 사용할수있다고 나온다 아래 빨간 체크된것을 App.js에 입력

 

 

 

따란

퍼런색의 버튼이 나와버렸다 

 

Navbar도 한번 해주어보았다

대문자태그를 위의 import {} 안에 입력해주면 

 

 

다크한 Navbar가 나와버린다