ReactJS에 Material-ui 설정을 해서 템플릿을 사용하는 코드 입니다. 소스 코드 https://github.com/lahuman/reactWithMaterialUI

1. Material-UI시작하기
ReactJS#3
임광규

2. #1ReactJS프로젝트생성하기
$ npx create-react-app hello-meterialui
$ cd hello-meterialui

3. #2Meterial-ui모듈설치하기
$ npm install —save @material-ui/core
$ npm install —save @material-ui/icons
$ npm install —save @material-ui/styles
1.StylesProvider
2.CssBaseline

4. #3추가모듈설치하기-Option
$ npm install —save styled-components
styled-components
styled-componentsexample

5. #4.eslint설정(.eslintrc.js)-Option
module.exports = {
"extends": "react-app",
"globals": {
},
"rules": {
"no-console": "off",
"no-constant-condition": "off",
"no-unreachable": "off",
"no-empty": "off",
"no-useless-escape": "off",
"no-throw-literal": "off",
"no-unused-vars": "warn",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"no-redeclare": "off",
"react/jsx-no-duplicate-props": ["warn", { "ignoreCase": false }],
"no-unused-expressions": "off"
}
};

6. #5.한글폰트사용(1)
src/index.cssbody에font-family추가
body {
margin: 0;
font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'NanumBarunGothic', '맑은 고딕',
'Malgun Gothic', '굴림', 'Gulim', '돋움', 'Dotum', 'Helvetica Neue',
'Helvetica', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

7. #5.한글폰트사용(2)
public/index.html에webfont추가
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">

8. #6TemplateMaterialUI
MaterialUITemplate

9. 실습
#1Login화면을만들기
#2Dashboard화면을만들기
#3react-router-dom을이용해서Login과Dashboardpath로접근처
리

10. Q&A