renamed steps to setup doc for react frontend stage 01

# React Frontend (Stage 01) - Setup

* Add `docker-compose.yml` at the root of the project

* Add `./react-frontend` directory

* Add `./react-frontend/Dockerfile` to start the react frontend

* Initialize the react app using `create-react-app` using the steps below, choose between

  * Starting from scratch

  * Starting after cloning this repository

## Starting from scratch

For starting without cloning this repository.

### Step 1) potential clean-up

```bash

docker image prune

docker rmi -f node:16

sudo rm ./react-frontend/my-react-app -r

```

### Step 2) Create necessary directory

Create `./react-frontend/my-react-app` directory.

```bash

mkdir ./react-frontend/my-react-app

```

### Step 3) Pull `node:16` image

```bash

docker pull node:16

```

### Step 4) Start and enter the node container

```bash

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 bash

```

### Step 5) Install and use `create-react-app`

```bash

# install create react app (globally in container)

npm install -g create-react-app

# check create react version

create-react-app --version

# create react app

create-react-app .

```

Ignore error response and exit the node container,

```bash

exit

```

Important are the following files,

* `./react-frontend/my-react-app/package.json`

* `./react-frontend/my-react-app/package-lock.json`

Check the changes,

```bash

git status

On branch react-frontend-stage-01

Your branch is up to date with 'origin/react-frontend-stage-01'.

Changes not staged for commit:

  (use "git add <file>..." to update what will be committed)

  (use "git restore <file>..." to discard changes in working directory)

        modified:   react-frontend/my-react-app/package.json

no changes added to commit (use "git add" and/or "git commit -a")

```

### Step 6) Install web-vitals package

```bash

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 npm install web-vitals --save

```

Continue with "Starting after cloning this repository".

## Starting after cloning this repository

For starting with cloning this repository.

Potential steps in the case of problems:

```bash

docker pull node:16 # pull the node image

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 bash # run and access node container with map of local my-react-app dir to app dir 

```

Inside the node container run,

```bash

npm intall # install all packages in package.json

```

### Step 1) Start all services

Step 1.1) Start all services with rebuilded images

```bash

docker-compose up --build

```

```bash

Compiled successfully!

react-frontend_1   | 

react-frontend_1   | You can now view app in the browser.

react-frontend_1   | 

react-frontend_1   |   Local:            http://localhost:3000

react-frontend_1   |   On Your Network:  http://172.18.0.3:3000

react-frontend_1   | 

react-frontend_1   | Note that the development build is not optimized.

react-frontend_1   | To create a production build, use npm run build.

react-frontend_1   | 

react-frontend_1   | webpack compiled successfully

```

Step 1.2) Potentially restart tornado-bakend service in a new terminal

```bash

docker-compose restart tornado-backend

```

```bash

-----------------------------------------------------------------------------------------------------------------------------------

aidaho-tinkering-club-web-app_postgres_1          docker-entrypoint.sh postgres    Up      0.0.0.0:5432->5432/tcp,:::5432->5432/tcp

aidaho-tinkering-club-web-app_react-frontend_1    docker-entrypoint.sh npm start   Up      0.0.0.0:3000->3000/tcp,:::3000->3000/tcp

aidaho-tinkering-club-web-app_tornado-backend_1   python3 blog.py --db_host= ...   Up      0.0.0.0:8888->8888/tcp,:::8888->8888/tcp

```

### Step 2) Check tornado backend and react frontend

* [http://localhost:8888](http://localhost:8888)

* [http://localhost:3000](http://localhost:3000)

### Step 3) Edit src/App.js and save to reload.

Potentially change ownership of `./react-frontend/my-react-app/` using,

```bash

sudo chown -R username:username ./react-frontend/my-react-app/

```

Change the content of the file `./react-frontend/my-react-app/src/App.js` to,

```js

import logo from './logo.svg';

import './App.css';

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React for the AIDAHO certificate!

        </a>

      </header>

    </div>

  );

}

export default App;

```

Save to reload and chekc the change on

* [http://localhost:3000](http://localhost:3000)

 No newline at end of file