TypeScript React

Install into Linux

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

source ~/.bashrc

--> check if it was loaded correctly

command -v nvm
nvm install node --lst
nvm install-latest-npm
npm install -g typescript

Creating and Running

mkdir Intro-05

cd Intro-05

git clone git@github.com:mr-coxall/ics4u-intro-05-typescript.git
cd ics4u-intro-05-typescript
npx create-react-app . --template cra-template-pwa-typescript
npm start

Adding Prettier and EsLint

npm install prettier --save-dev --save-exact
npm install eslint --save-dev
echo > .prettierignore
echo > .prettierrc
echo > .eslintignore

then add in the following:

in .prettierignore add the following
# Ignore artifacts:

build
coverage

in .prettierrc add the following:

#############################
#############################
## Prettier Linter Rules ##
## Mr Coxall ##
#############################
#############################

{
"trailingComma": "es5",
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"useTabs": false
}

in .eslintignore add the following (came with React and someone did not do Linting on them!)

src/react-app-env.d.ts
src/service-worker.ts
src/serviceWorkerRegistration.ts

Running Prettier and ESLint

npx prettier --write .

npx eslint ./*.*

Publish React App to GitHub Pages

• • add gh-pages packages:
    npm install gh-pages --save-dev

  • add to package.json at top:
    "homepage": "https://mr-coxall.github.io/ics4u-intro-06-typescript",

  • add to start of scripts section in package.json
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

  • commit the changes and push to GitHub, then send it up to GitHub Pages just run:
    npm run deploy

Make React App a Progressive Web App

• • in index.tsx, change to:
    serviceWorkerRegistration.register()

  • if you want, update your favicons in the public directory

  • one of the easiest ways to get a favicon is to use: https://favicon.io/favicon-converter

  • add the following line to all your icon definitions in manifest.json
    "purpose": "any maskable"

  • then run Google's LightHouse process to see if it passes all the requirements

Add in Material UI

• • run:
    npm install @mui/material @emotion/react @emotion/styled
    npm install @fontsource/roboto
    npm install @mui/icons-material