[React] 리액트(React)에 부트스트랩(BootStrap) 적용하기

티스토리 뷰

[React] 리액트(React)에 부트스트랩(BootStrap) 적용하기

JoonPyo-Hong 2021. 8. 28. 22:52

이전 글 - 리액트 프로젝트 생성과 실행

[React] React 프로젝트 생성과 실행

리액트 프로젝트 생성을 위한 프로그램 설치 1. Node.js 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Npm / Yarn Yarn Fast, reliable, and s..

joonpyo-hong.tistory.com

리액트에 부트스트랩 설치 방법은 아래의 3개의 방법 중에서 1개를 선택해서 사용하면 된다.

1. CDN 설치

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 
 crossorigin="anonymous"/> // v5.1.0 사용(작성일 기준 최신 버전)

index.html의 <head> 태그 안에 cdn을 추가해준다.

cdn이 변경될 수 있으니 bootstrapcdn에서 최신버전으로 사용해주자.

2. yarn으로 설치

터미널에 명령어를 입력한다.

yarn add react-bootstrap bootstrap

3. npm으로 설치

npm install react-bootstrap bootstrap

주의사항

yarn 또는 npm으로 설치시 index.js에

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

를 추가 해야한다.

적용법

bootstrapk.com에서 원하는 UI를 가져와서 사용하면 된다.

CSS · 부트스트랩

에 약간의 패딩과 수평 구분선이 있는 기본 스타일의 .table 클래스를 추가하세요. 그건 매우 불필요해 보이지만, 캘린더와 날짜선택기 같은 플러그인들을 위해 테이블이 널리 사용되는 것을 감

bootstrapk.com

저작자표시

'[React]' 카테고리의 다른 글

[React] 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 파일을 로드할 수 없습니다. (0)	2021.07.22
[React] React 프로젝트 생성과 실행 (0)	2021.07.21

Joonpyo-Hong

티스토리 뷰