A boilerplate Create React App with Typescript, Redux Toolkit, Redux Saga, React Hook Form , React-i18next and Material UI.
- React.js CRUD example with Redux Saga.
- Typescript for type safety
- Core libraries
- Test libraries
- Other tools/libraries
- Opinionated folder structure
- Internationalization for react app using React-i18next
- Material UI Dark Mode support
./src
├── App.tsx # Application entrypoint
├── assets # assets folder contains all the static files (images, fonts, etc).
├── components # shared components
├── config # global configuration, env variables etc.
│ ├── Env.ts
│ └── i18n
├── features
│ ├── feature # 'feature'
│ │ ├── api # API folder contains http service calls
│ │ ├── assets # 'feature' assets folder
│ │ ├── components # 'feature' components
│ │ ├── hooks # 'feature' hooks
│ │ ├── index.ts # entry point for 'feature' public API
│ │ ├── store # 'feature' state stores contains slices, sagas, etc.
│ │ └── types # 'feature' typescript types
│ └── another_feature # 'another_feature'
├── hooks # shared hooks
├── libs # libraries imported or exported that can be used in different projects
│ ├── core
│ └── ui
├── pages # contains all application pages
├── routes # routes configuration
├── store # root store and store settings
└── test/ # contains test utilities and Mock Service Worker setup
└── mswnvm
brew install nvmNode.js v17
nvm install v17.4.0Yarn
npm install --global yarnInstall NPM packages:
yarn installTo start the application in the development mode run:
yarn start📝 Note: Application starts in sandbox-mode, with all backend calls mocked by MSW library. To disable it change REACT_APP_MSW_ENABLED variable to false.
💡 Tip: Open http://localhost:3000 to view application in the browser.
To build the application for production, run:
yarn buildLaunch the test runner in the interactive watch mode:
yarn testSee the section about running tests for more information.
Run yarn coverage to generate code coverage.
To run e2e use below command:
yarn build && yarn test:e2e📝 Note: This script will start the server, wait until application is running, execute e2e tests and after that it will shut down the server.
💡 Tip: To run Cypress in interactive mode, start the application and run
yarn cy:open
Start Storybook in development mode:
yarn storybookTo build Storybook as static web application, run the following command inside project's root directory:
yarn build-storybook💡 Tip: run
npx http-server ./storybook-staticto preview static web application locally.
Running the script yarn format will format the code style of all TypeScript files.
The script yarn lint will run linter in the project. If any code standards or styles are not met in code, it will
display the errors or warnings.
Run yarn lint:fix command to format code and fix automatically any error found - if the linter knows how to fix it😉.
💡 Tip: To enforce code conventions and prevent bad commits this project is setup to use Husky. Husky is used to run validation and format code before every commit. Additionally, it will check if git message is following conventional commits format.
Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy
import paths such as ../../../Component. Wherever you move the file, all the imports will remain intact.
To enable Absoulte imports in Intelij ide go to Settings -> Editor -> Code Style -> TypeScript -> Imports and
enable Use paths relative to tsconfig.json.
Create release version and generate a changelog file:
GITHUB_TOKEN=YOUR-TOKEN yarn release💡 Tip:
--no-ci- allows you to trigger release from no ci environment e.g. local
💡 Tip:
yarn release:dry-run- allows you to see what commands would be run, without committing to git or updating files.
- React Developer Tools
- Redux DevTools
- Testing Playground
- Window Resizer
- React Hook Form - form builder
- i18next-scanner
- TypeScript Deep Dive
- React+TypeScript Cheatsheets
- Redux - style guide
- Redux Toolkit - Getting Started
- React Hook Form - typescript Support
- Bulletproof React
- Jest cheat sheet
- React Hook Form vs. Formik: A technical and performance comparison
- MUI - theme switcher
- Level up your CSS linting using Stylelint
- Create React App: A quick setup guide
- Using TypeScript with Redux Toolkit
- What is Redux Ducks?
- Redux DevTools: Tips and tricks for faster debugging
- Remove React.FC from Typescript template
Distributed under the MIT License. See LICENSE for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent