memo.md

react typescript memo

make new project

create-react-app $PROJECTNAME --template typescript

modify tsconfig

{
  "compilerOptions": {
		"baseUrl": "src",
		"noImplicitAny": true,
		"sourceMap": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

install basic packages

npm install @types/react @types/react-dom typescript ts-loader source-map-loader

• typescript official document

install redux

npm install redux redux-saga typescript-fsa typescript-fsa-reducers typescript-fsa-redux-saga

• typescript-fsa-redux-sagaことはじめ

install other libraries

npm install react-router-dom react-redux
npm install @types/react-router-dom @types/react-redux

npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

npm install react-bootstrap bootstrap react-router-bootstrap
npm install @types/react-router-bootstrap

grpc-web

compile

protoc -I backend/echo/ backend/echo/echo.proto --js_out=import_style=commonjs:./src/echo/ --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src/echo/

modify package.json and .env

ref

modify package.json

"eslintConfig": {
    "extends": "react-app",
    "ignorePatterns": ["**/*_pb.js"]
  }

add this line to .env

EXTEND_ESLINT=true

install google-protobuf

It's not protobuf.

ref

npm install google-protobuf

run docker

docker run --rm --net=host -it envoy:v1