행위

REACT + Material UI Table 이용 admin dashboard 만들기

DB CAFE

thumb_up 추천메뉴 바로가기

1 REACT + Materail UI Table 이용한 Admin DashBoard 구축[편집]

1.1 REACT 프로젝트 생성[편집]

yarn create react-app react-admin-dashboard

1.1.1 추가 패키지 설치[편집]

- @material-ui/icons : 여러가지 아이콘을 사용 - @material-ui/core : 다양한 기능을 가진 테이블 사용 - Recharts  : 그래프 기능 

yarn add @mui/material @emotion/react @emotion/styled
yarn add recharts

1.1.2 불필요 파일 정리[편집]

1.1.2.1 public/index.html[편집]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
	<!- google font added --/>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;0,1200;0,1300&display=swap" rel="stylesheet"/>

<style>
 * {
	font-family: 'Source Sans Pro', sans-serif;
   }
</style>

      <title>React Admin Dashboard</title>

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

1.1.2.2 src/index.js[편집]

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render (
	<React.StrictMode>
	<App />
	</React.StrictMode>,
document.getElementById('root')
);

1.1.2.3 src/App.js[편집]

function App() {
	return <div className="App">Hello</div>
}
export default App

1.1.3 프로젝트 실행 하기[편집]

yarn start

1.2 NavBar 와 TopBar 추가[편집]

원본 주소 "http://dbcafe.co.kr/wiki/index.php?title=REACT_%2B_Material_UI_Table_이용_admin_dashboard_만들기&oldid=11024"