Create React App

p:: CLI, yarn, React

• https://github.com/facebook/create-react-app

APP_NAME=my-app

{
  yarn create react-app --template typescript $APP_NAME
  cd $APP_NAME
 
  volta pin node
  volta pin yarn
}

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";

• How to Change Between Light and Dark Themes in Ant Design

React Router

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

• Quick Start
• Redirects (Auth)

urql

yarn add urql graphql graphql-tag

• https://formidable.com/open-source/urql/docs/basics/react-preact/

Authentication

yarn add @urql/exchange-auth

Recoil

yarn add recoil

• Atom Effects

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.