| Main | Sub | Version |
|---|---|---|
| Visual Studio Code | latest | |
| Node.js with npm | v14 (LTS) | |
| Create React App | latest | |
| Typescript | 4.3.5 or later | |
| React | 17 | |
| Chakra-UI | latest | |
| Redux | latest | |
| Redux Toolkit | createAction | latest |
| createSlice | ||
| createAsyncThunk | ||
| createReducer | ||
| createEntityAdapter | ||
| createSelector | ||
| REACT FINAL FORM | latest | |
| React Helmet Async | latest | |
| react-intl | latest | |
| Storybook | latest |
- Support dark mode.
- Support i18n (english and japanese).
sc1x800.mp4
sc2x800.mp4
git clone git@github.com:treetips/ts-cra-rtk-chakraui-example.git
cd ts-cra-redux-toolkit-chakra-ui-example
npm i# Start json-server
npm run json-server
# Start react
npm run start
# Start Storybook
npm run storybook| Name | url |
|---|---|
| React | http://localhost:3000/ |
| API | http://localhost:3001/api/tasks |
| http://localhost:3001/api/tasks/1 | |
| Storybook | http://localhost:6006/ |
| Dir 1 | Dir 2 | Description |
|---|---|---|
| components | entrypoints | Entry point component referenced by Router. |
| pages | A component used only on a specific page. | |
| projects | Components used throughout the project. | |
| uiParts | A generic component that is not limited to a project. | |
| constants | Constants. | |
| hooks | Global custom hooks. | |
| store | Redux files (re-ducks pattern) . |
|
| types | Type definitions. | |
| utility-types | TypeScript Utility Types. |
${PresentationalComponent Name}
├── container.tsx
├── hooks.ts
├── index.ts
└── presenter.tsx| File Name | Description |
|---|---|
| container.tsx | Container Component. |
| hooks.ts | Custom hook for Presentational Component. |
| index.ts | Barrel |
| presenter.test.tsx | Unit test for Presentational Component. |
| presenter.tsx | Presentational Component. |
| presenter.stories.tsx | Storybook. |
The application's color settings are managed by the following files.
- src/theme.ts
- src/hooks/useAppTheme.ts
If you use <MenuList> , you will see the following warning.
index.js:110 Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the `offset` modifier, as well as the `padding` option in the `preventOverflow` and `flip` modifiers.
This is a problem with Popper.js, which is used internally, and this also happens in v1.6.4.