I always avoid DRY (don't repeat yourself), but for some reasons, I do this to refresh my mind, my knowledge about the toolings that I'm going to use in new project.
-
Step 1
npx create-react-app my-app --template typescript OR npx create-react-app my-app --template cra-template-pwa-typescript (to make progressive web apps)
-
Step 2
Follow this gist of mine setup tailwind in react app
-
Step 3
Remove boilarplate and update dependencies list
-
Step 4
npm install --save react-router-dom
-
Step 5
Install usefull dependencies, for example:
- luxon (instead of moment.js),
- clsx (to create class-strings conditionally),
- cond-construct (to render stuff conditionally)
- react-hot-toast (to display beautiful toast)
- @headlessui/react (unstyled ui components for react)
npm i react-hot-toast clsx @headlessui/react cond-construct luxon
-
Step 6
Setup eslint and configure with react-typescript:
npm i --save-dev eslint typescript@latest
npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
Add plugin for react (react, react-hooks)
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-react
-
Step 7
Setup prettier setting up prettier with eslint vscode