cra-template-wdever

Template for my side projects.

EXAMPLE

Modules

• default CRA Typescript modules
• redux
• redux-saga
• redux-toolkit
• axios
• moment
• query-string
• polyfill
• react-router-dom
• styled-components

Config

• ESLint with airbnb rule and Typescript
• Prettier

Architecture

• public : CRA's default public dir
• src
  • assets : Some assets like fonts / images
  • components : All of your components. but NO ROUTE
  • hooks : Custom hooks that access to redux store or dispatch actions
  • pages : Just route your pages. combine components.
  • store : Write redux code. Ducks pattern or separate each files? It's your choice
    • (example of separating each files) action
    • model
    • reducer
    • saga
  • utils : A collection of useful things like functions, custom hooks, utility styles, utility types
  • App.tsx : Combine all your pages and route them
  • root.tsx : Base settings for redux, react-router-dom, global style
• .env : Cutom enviroment var
• .prettierrc: Prettier configuration
• .eslintrc.json : ESLint configuration

Usage

To use this template, add --template wdever when creating a new app.

For example:

npx create-react-app my-app --template wdever

# or

yarn create react-app my-app --template wdever