Project Setup

Create React App

rich@Richs-MacBook-Pro Projects % npx create-react-app app-admin --template typescript --use-npm

Creating a new React app in /Users/rich/Projects/app-admin.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1921 packages, and audited 1922 packages in 41s

145 packages are looking for funding
  run `npm fund` for details

19 vulnerabilities (9 moderate, 10 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

Initialized a git repository.

Installing template dependencies using npm...

added 48 packages, changed 1 package, and audited 1970 packages in 6s

146 packages are looking for funding
  run `npm fund` for details

19 vulnerabilities (9 moderate, 10 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1969 packages in 3s

146 packages are looking for funding
  run `npm fund` for details

19 vulnerabilities (9 moderate, 10 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created app-admin at /Users/rich/Projects/app-admin
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd app-admin
  npm start

Happy hacking!

Check that is runs

rich@Richs-MacBook-Pro Projects % cd app-admin
rich@Richs-MacBook-Pro app-admin % npm start

> app-admin@0.1.0 start
> react-scripts start

Compiled successfully!

You can now view app-admin in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.3:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Connect to Github

rich@Richs-MacBook-Pro app-admin % git remote add origin git@github.com:buggy/app-admin.git
rich@Richs-MacBook-Pro app-admin % git checkout -b develop
Switched to a new branch 'develop'
rich@Richs-MacBook-Pro app-admin % git push -u origin develop
Enumerating objects: 24, done.
Counting objects: 100% (24/24), done.
Delta compression using up to 16 threads
Compressing objects: 100% (23/23), done.
Writing objects: 100% (24/24), 361.36 KiB | 1.78 MiB/s, done.
Total 24 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:buggy/app-admin.git
 * [new branch]      develop -> develop
Branch 'develop' set up to track remote branch 'develop' from 'origin'.

Add React Router

Install the dependencies:

rich@Richs-MacBook-Pro app-admin % npm install --save react-router-dom

added 13 packages, and audited 1982 packages in 5s

146 packages are looking for funding
  run `npm fund` for details

19 vulnerabilities (9 moderate, 10 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
rich@Richs-MacBook-Pro app-admin % npm install --save-dev @types/react-router-dom

added 3 packages, and audited 1985 packages in 3s

146 packages are looking for funding
  run `npm fund` for details

19 vulnerabilities (9 moderate, 10 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Import the router and route

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

Update the App function to render Hello when you visit /hello but display the original welcome when you’re on the homepage

function App() {
  return (
    <Router>
      <div className="App">
        <Route exact path="/">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.tsx</code> and save to reload.
            </p>
            <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
              Learn React
            </a>
          </header>
        </Route>
        <Route exact path="/hello">
          <h1>Hello</h1>
        </Route>
      </div>
    </Router>
  );
}

Test

rich@Richs-MacBook-Pro app-admin % npm start

> app-admin@0.1.0 start
> react-scripts start

Compiled successfully!

You can now view app-admin in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.3:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Modify App.tsx to just have the routing

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";

import "./App.css";

function App() {
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="*" component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Create a pages folder adding Home and NotFound based on the old App.tsx/App.css/App.test.tsx