홈페이지 입니다.
https://react-bootstrap.netlify.app/
React Bootstrap | React Bootstrap
The most popular front-end framework, rebuilt for React
react-bootstrap.netlify.app
설치하기
npm install react-bootstrap bootstrap |
포함하기
import 'bootstrap/dist/css/bootstrap.min.css'; import { 필요한것들..... } from 'react-bootstrap'; |
1. create-react-app를 이용하여 app007 프로젝트를 만듭니다.
| 1) 프로젝트 작성 D:\React> npx create-react-app app007 2) 폴더이동 D:\React> cd app007 3) bootstrap 설치 D:\React\app007> npm install react-bootstrap bootstrap 4) visual code 실행 D:\React\app007> code . 5) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 UseBootstrap.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'react-bootstrap';
const UseBootstrap = (props) => {
return (
<>
<Button variant="outline-primary" size="sm">Primary</Button>{' '}
<Button variant="outline-secondary" size="sm">Secondary</Button>{' '}
<Button variant="outline-success" size="sm">Success</Button>{' '}
<Button variant="outline-warning" size="sm">Warning</Button>{' '}
<Button variant="outline-danger" size="sm">Danger</Button>{' '}
<Button variant="outline-info" size="sm">Info</Button>{' '}
<Button variant="outline-light" size="sm">Light</Button>{' '}
<Button variant="outline-dark" size="sm">Dark</Button>
</>
);
}
export default UseBootstrap;
|
cs |
4. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
import UseBootstrap from "./UseBootstrap";
function App(){
return (
<>
<UseBootstrap/>
</>
);
}
export default App;
|
cs |
5. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
cs |
6. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
다른 컴포넌트들도 위와같이 하면 모두 사용이 가능합니다.
홈페이지를 참조하여 사용하시기 바랍니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 23] 이미지 홀더 사용하기 (0) | 2024.10.21 |
|---|---|
| [React Exam 22] bootstrap icon 사용하기 (0) | 2024.10.21 |
| [React Exam 20] jQuery 사용하기 (1) | 2024.10.21 |
| [React Exam 19] 스타일 추가하기 (0) | 2024.10.21 |
| [React Exam 18] 컴포넌트(Component)에 객체를 속성으로 전달하기 (0) | 2024.10.21 |
