ReactJS & Material-ui Hello world
1 like230 views
This document outlines the steps to start a ReactJS project using Material-UI, including project setup and installation of necessary modules. It also provides configuration for ESLint and instructions for using Korean fonts. Additionally, it mentions creating a basic template for a login and dashboard screen with React Router integration.
![#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"
}
};](https://image.slidesharecdn.com/reactjs-03-191201025955/85/ReactJS-Material-ui-Hello-world-5-320.jpg)
ReactJS & Material-ui Hello world
- 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; }
- 10. Q&A