1^st Homework

Goal of this homework is to set up your editor and SSH to connect to 4IT580 server, then implement a counter in React.

You will need this setup for during whole semester.

There are 4 steps:

• Connect to server
• Edit file on server
• Implement simple React counter
• Send a link to working React counter

Deadline: Monday 26/9/2022 - 23:59:59

If you have any problems contact your teacher using MS Teams: Tomas Horacek (@hort19).

Connect to Server

Check Your Email for SSH Login

It should be in your school inbox:

• subject: 4IT580: SSH access for
• sender: no-reply@mail.vse.handson.pro
• content:

SSH access for USERNAME

host: vse.handson.pro
login: USERNAME
password: PASSWORD

More info at: https://github.com/cngroupdk/vse-4it580

frontend dev: http://dev.frontend.USERNAME.vse.handson.pro/
frontend production: http://frontend.USERNAME.vse.handson.pro/

Please check your SPAM folder too.
If you did not receive it contact Tomas Horacek (@hort19).

Connect to Server

• follow steps in "Hello, Server!":
  • Connect to Server Using SSH
  • Initial Project Installation
  • VS Code Editor

Edit file on server

• open this file on server: frontend/src/modules/static-pages/pages/Practical01Page.js
  • For those not using VS Code editor, the file is located on server here: /home/USERNAME/code/cviceni/frontend/src/modules/static-pages/pages/Practical01Page.js
• content of Practical01Page.js should be this:

• replace Hello! with Counter: {0}
• save the file
• result should be visible at: http://dev.frontend.USERNAME.vse.handson.pro/practical/01

Create Simple React Counter

Open Practical01Page.js and implement a simple counter.

Here is an example implementation

Acceptation criteria are:

• initial value of counter should be 0
• current value should be visible, eg: Counter: 0
• there should be +1 button
• if user presses the +1 button it should increment the counter by 1
  • user should see new value, eg: Counter: 1
  • user should be able to increment value multiple times
• don't use ugly hacks!

Hints

• you have to use useState hook
  • you have to import useState
• you can get some inspiration in Hello, React!
• or you can read more in React useState docs

Send a Link to Working React Counter

Once you are finished:

• send a link to working React counter
  http://dev.frontend.USERNAME.vse.handson.pro/practical/01
• using MS Teams to: Tomas Horacek (@hort19)

Deadline: Monday 26/9/2022 - 23:59:59

Happy Coding!