Link Search Menu Expand Document

Create React App

  yarn create react-app --template typescript $APP_NAME
  cd $APP_NAME

  volta pin node
  volta pin yarn

  commitizen init cz-conventional-changelog --yarn --dev --exact

Formatting Code Automatically

  yarn add -D husky lint-staged prettier

  echo "{ \"singleQuote\": true, \"jsxSingleQuote\": true }" > .prettierrc.json
  • Edit package.json > prepare script
vim package.json
  "scripts": {
    "prepare": "husky install",
    "start": "react-scripts start",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  • Run prepare script once
yarn run prepare
yarn run v1.22.10
$ husky install
husky - Git hooks installed
✨  Done in 0.13s.
  • Add hooks:
npx husky add .husky/pre-commit "npx lint-staged"

Add the following field to the package.json section:

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write"]

Ant Design

yarn add antd @ant-design/icons
vim src.index.css
@import "~antd/dist/antd.css";

React Router

    yarn add react-router-dom
    yarn add -D @types/react-router-dom


yarn add urql graphql graphql-tag


yarn add @urql/exchange-auth


yarn add recoil

Adding Custom Environment Variables

Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.

These environment variables will be defined for you on process.env. For example, having an environment variable named REACT_APP_NOT_SECRET_CODE will be exposed in your JS as process.env.REACT_APP_NOT_SECRET_CODE.