Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
Dev Containers
extensionnpx degit comnori/vite-template-awesome-soho my-app
git init
Project
├── assets // like svg
├── components // atomic design
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ └── templates
├── config // project configuration
│ ├── i18n // i18next resource
│ │ ├── {lang} // ISO 639-1 Language Code [en,...,ko]
│ │ │ └── translation.json
│ ├── MenuItems.js
│ └── Router.js
├── context // React Context
│ └── {context name} // Context domain name
│ ├── components // Context related components
│ └── hooks // Context related hooks
├── features // Redux
│ └── {reducer name}
├── hooks // common hooks
├── lib // Library configuration
│ ├── components
│ └── {library name}Config.js
├── pages // Pages
│ ├── {domain}
│ │ ├── {page}
│ ├── {page}
│ │ ├── components // children for page
│ │ ├── {page}.jsx
│ │ ├── {page}.module.scss // module scss
└── utils // common utils
Enable(true) / Disable(false)
tsconfig.json
{
...
"checkJs": true,
...
}
Optionnal
If you want to apply or not apply type check to only some parts, check the guide below.
Using typescript
src/config/Router.js
src/config/Menu.js
yarn doc
doc
folder created
yarn type
type
folder created
Ant Design Default theme
The initial theme acts as the system's theme setting.
Ant Design Customize theme
To modify the Antd Theme, set the designToken according to the Ant Design Customize Theme guide.
src/lib/themeConfig.js
const themeConfig = {
themeName: getSystemCurrentTheme,
designToken: {
components: {
Layout: {
headerHeight: 64,
},
},
},
componentSize: "middle",
};