- yarn create react-app starter-project --template TypeScript
- yarn add -D typescript @types/node @types/react @types/react-dom @types/jest @typescript-eslint/scope-manager
- yarn add -D node-sass
- yarn add -D scss-loader typings-for-scss-modules-loader
- yarn add -D redux @reduxjs/toolkit react-redux @types/react-redux
- yarn add -D @material-ui/core @material-ui/icons
- Edit tsconfig.json:
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"es6", "dom",
...
...
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
8. yarn add -D styled-components @types/styled-components
9. yarn add -D react-router-dom @types/react-router-dom
10. yarn add -D enzyme enzyme-adapter-react-16 react-test-renderer
11. yarn add -D enzyme-to-json
12. yarn add sinon @types/sinon
13. yarn add puppeteer jest-puppeteer ts-jest
14. yarn add yarn add @types/puppeteer @types/expect-puppeteer @types/jest-environment-puppeteer
15. Create these folders:
src/components
src/features
src/layout
src/pages
src/redux
src/recoil/atoms
16. mkdir src/components src/features src/layout src/pages src/redux src/recoil/atoms
17. npx generate-react-cli component Header
18. Change generate-react-cli.json to
{
"usesTypeScript": true,
"usesCssModule": false,
"cssPreprocessor": "scss",
"testLibrary": "Enzyme",
"component": {
"default": {
"path": "src/components",
"withStyle": true,
"withTest": true,
"withStory": false,
"withLazy": false
},
"page": {
"customTemplates": {
"component": "templates/page/component.tsx",
"style": "templates/page/style.scss",
"test": "templates/page/test.tsx"
},
"path": "src/pages",
"withLazy": false,
"withStory": false,
"withStyle": true,
"withTest": true
},
"layout": {
"customTemplates": {
"component": "templates/component/component.tsx",
"style": "templates/component/style.scss",
"test": "templates/component/test.tsx"
},
"path": "src/layout",
"withLazy": false,
"withStory": false,
"withStyle": true,
"withTest": true
}
}
}
https://drive.google.com/file/d/1nlgGdZLfsfmElS1xVGW6BoB_1jTtRT7x/view?usp=sharing
