리액트 앱을 처음부터 만들기 위한 최고의 방법!
| 라이브러리 | 버전 |
|---|---|
| react (with 🎣Hooks) | ^16.11 |
| react-dom | ^16.11 |
| react-router | ^5.1 |
| react-scripts | 3.3 |
| styled-components | ^4.4 |
| typescript | 3.6 |
| antd | 4.1.5 |
타이틀 수정을 위해서는 index.html에서 현재 React-TypeScript-Boilerplate로 되어있는 부분들을 고쳐야합니다.
<meta
name="apple-mobile-web-app-title"
content="React-TypeScript-Boilerplate"
/><title>React-TypeScript-Boilerplate</title>파비콘 수정을 위해서는 asset에 있는 기존의 이미지 파일들을 대체해야합니다. (현재는 🦞 이모지로 되어있습니다.)
FAVIC-O-MATIC에 접속하여 Every damm size,sir!를 선택하고 Upload Your Image 버튼을 클릭하여 필요한 이미지 파일이 들어있는 압축파일을 받습니다.
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": ["react", "@typescript-eslint", "prettier"],
"env": {
"browser": true,
"jasmine": true,
"jest": true
},
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"parser": "@typescript-eslint/parser"
}tsconfig.json에는 TypeScript의 컴파일러 옵션이 정의되어 있습니다.
다음 커맨드를 통해 가장 기본적인 tsconfig.json를 생성할 수 있습니다.
$ npx tsc --init해당 프로젝트에서는 기본 옵션에서 수정된 tsconfig.json를 사용합니다.
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"noImplicitAny": false,
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"]
}{
"defaultSeverity": "error",
"extends": ["tslint:recommended"],
"jsRules": {},
"rules": {
"quotemark": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"member-access": false
},
"rulesDirectory": []
}{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "always",
"orderedImports": true
}$ npm install
$ npm run start
$ npm run build
MIT