튜토리얼

React 리액트 부트스트랩 시작하기

---

🕵️ 리액트에서 부트스트랩을 사용하는 방법이다.

1. 구글에서 react bootstrap 혹은 https://react-bootstrap.github.io/ 링크로 들어간다.

2. React-Bootstrap 이라는 리액트의 라이브러리이다. 들어가면 페이지가 뜬다.

3. 들어가자마자 보이는 Get started 를 눌러서 들어간다

4. npm install react-bootstrap bootstrap 을 visual studio code 에 터미널에서 입력한다.

5. 인스톨이 시작되고 설치가 완료되면 문구가 뜬다

6. 설치가 완료되면 npm start 를 다시 실행한다. 일단 라이브러리 까지 설치는 끝난 상태이며 CSS도 필요하므로 CSS도 import 해준다. App.js 에 import 해준다.

7. import 가 싫다면 link로 된 코드를 복사한다.

8. 이 코드를 프로젝트 내에 public > index.html 에 붙여넣기 한다.

9. index.html 에 이렇게 붙여넣어 준다.

10. 이제 사용을 위해 bootstrap 페이지에서 필요한 스타일을 검색한다. ex) button

11. Example 이 나온다 여기서 아무거나 하나 복사해서 붙여넣어 보자

12. <Button variant="primary">Primary</Button> 이걸 가져와서 App.js를 쓴다고하면 import components를 해야한다. 다시 get started or 위의 example 맨 위의 코드를 보면 import Button from 'react-bootstrap/Button'; 이 있다. 이걸 복사하여 import 해준다.

import 하기 전

import 하고 난 후

13. 그리고 나서 npm start 하고 난 페이지를 보면 아래와 같이 나타난다

---

예제

다른 필요한 디자인도 검색해 보자 ex) NavBar 상단바를 만들어본다.

검색창에 navbar 를 치면 나온다

코드에는

• Navbar
• Container
• Nav
• Brand

태그가 있는데 아래와 같이 대문자로 된 태그가 빨갛게 뜬다.

import Button from 'react-bootstrap'; 의 코드를 저 태그들을 추가해준다.

결과

---