Create App

Create React App#

Run create-react-app, substitute my-app for your app name.

npx create-react-app my-app --template typescript --use-npm

Prettier#

Instructions from CRA Docs.

npm install -D husky lint-staged prettier

Add the following to package.json

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

React Router#

Install the following packages.

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

You could now paste/use the following in App.tsx. You will make your own Page components - this is only an example of where to start with the Router.

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <Switch>
          <Route exact path="/">
            <div>Home Page</div>
          </Route>
          <Route path="/about">
            <div>About Page</div>
          </Route>
        </Switch>
      </div>
    </Router>
  );
}