행위

"REACT + Material UI Table 이용 admin dashboard 만들기"의 두 판 사이의 차이

DB CAFE
13번째 줄: 13번째 줄:
 
<source lang=javascript>
 
<source lang=javascript>
 
yarn add recharts
 
yarn add recharts
 +
</source>
 +
== 불필요 파일 정리 ==
 +
=== public/index.html ===
 +
<source lang=javascript>
 +
<!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 --/>
 +
<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>
 +
</source>
 +
=== src/index.js ===
 +
<source lang=javascript>
 +
import React from 'react';
 +
import ReactDOM from 'react-dom';
 +
import App from './App';
 +
 +
ReactDOM.render (
 +
<React.StrictMode>
 +
<App />
 +
</React.StrictMode>,
 +
document.getElementById('root')
 +
);
 +
</source>
 +
=== src/App.js ===
 +
<source lang=javascript>
 +
function App() {
 +
return <div className="App">Hello</div>
 +
}
 +
export default App
 +
</source>
 +
== 프로젝트 실행 하기 ==
 +
<source lang=javascript>
 +
yarn start
 
</source>
 
</source>

2024년 3월 10일 (일) 14:24 판

thumb_up 추천메뉴 바로가기

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

yarn create react-app react-admin-dashboard

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

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

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

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

3.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 --/>
	<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>

3.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')
);

3.3 src/App.js[편집]

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

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

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