728x90
1. 부트스트랩 사이트에 들어간다.
2. Read the docs로 들어간다.
3. quick start의 설명을 따른다.
public -> index.html 파일에서
첫번째 빨간줄인 중간에 css가 들어있는 줄을 복사하여 <head>안에 넣는다.
두번째 빨간줄인 중간에 js가 들어있는 줄을 복사하여 <body>가 끝나기 전에 넣는다.
3. 요소를 갖고와서 사용한다.
이런식으로!
import List from './List';
import Table from 'react-bootstrap/Table';
import bootstrap from 'bootstrap'
function Table_list() {
return (
<div>
{/* <List items={list}/> */}
<table class="table">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">제목</th>
<th scope="col">글쓴이</th>
<th scope="col">작성일자</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th scope="row">1</th>
<td>아이패드 주인찾아요 </td>
<td>김철수</td>
<td>2022-07-28</td>
</tr>
<tr>
<th scope="row">2</th>
<td>아이패드 찾아요 </td>
<td>최수연</td>
<td>2022-07-29</td>
</tr>
</tbody>
</table>
</div>
);
}
export default Table_list;
만든 결과
아직 많이 허접하다..ㅎ
가져다 쓴 요소들을 수정하는 방법을 아직 모르겠다.
조사해봐야겠다.
참고 영상 :
https://www.youtube.com/watch?v=3Az_hKsL9L8
반응형
'프로젝트 > 정통마켓_React' 카테고리의 다른 글
| [React]페이지네이션 라이브러리 이용한 구현(react-js-pagination) (0) | 2022.08.16 |
|---|---|
| [React]DB 데이터를 화면에 불러오기 (1) | 2022.08.09 |
| [React]react와 mysql 연결 (0) | 2022.08.01 |
| [React] 데이터를 위한 server 만들기 [express, axios] (0) | 2022.07.28 |