---
# System prepended metadata

title: Viikko 10- (Tehtävä 6)

---

# Viikko 10- (Tehtävä 6)


Tehtävässä 6 ryhdyttiin web-ohjelmointiin Reactin avulla. Tehtävän aiheeksi valitsin tennispelaajat. Node.js tehtyä backendiä muokkasin hieman vastaamaan tennispelaajille ominaisia piirteitä ja API kutsuja siten että ne paremmin tukisivat React / React-Bootstrap frontendiä. Bootstrap:issä käytin suoraan React-Bootstrap kirjastoa.

React käyttöliittymässä käytin Bootstrapin Navbaria, lomakkeita ja taulukkoa, sekä erilaisia nappuloita.

Kuva: React-käyttöliittymä.
![](https://i.imgur.com/pygquLU.png)

Toiminnallisuutta käyttöliittymässä oli tietokannassa olevien pelaajien tarkasteleminen, uusien pelaajien lisääminen ja olemassa olevien poistaminen. Tarkastelu oli mahdollista sivun alalaitaan lisätyn päivittyvän taulukon avulla, lisääminen sivun ylälaidan lomakkeena avulla ja poistaminen taulukon nappuloiden avulla.

Tehtävässä ilmeni erilaisia haasteita varsinkin erilaisten Reactin tyylien yhteensovittamisessa, joten päädyin käyttämään pääosin "vanhanaikaisempaa" luokkapohjaista lähestymistapaa. Sivuston ulkonäöstä voi myös olla montaa mieltä.

Tehtävä oli hyvin opettavainen monista web-ohjelmoinnin osa-alueista ja Reactin käyttäminen tuli jo tutummaksi. Nämä mielessäpitäen voikin sitten lähteä kehittämäään tehtävän 7. portfoliosivua.

Github linkki:
https://github.com/Lauritor/Teht6