Projektin alustaminen

Kehitysympäristöt

React-projektin toteuttamiselle ei ole olemassa yhtä ja ainoaa oikeaa tapaa. Yksinkertaisimmillaan projektin voi toteuttaa linkittämällä React-kirjaston JavaScript-tiedostot HTML-sivulle ja kutsumalla kirjaston funktioita dokumentaation mukaisesti. Tämä menetelmä ei ole kuitenkaan sovelluskehityksen näkökulmasta tehokkain tapa, sillä muutosten päivittäminen ja sovelluksen "paketointi" toimivaksi kokonaisuudeksi vaatii erilaisia työvaiheita.

React-kirjaston ympärille on kehitetty useita erilaisia kehitystyökaluja, joilla React-projektin aloittaminen, kehitys ja julkaiseminen on helpompaa. Alla on listä kirjoitushetkellä käytetyimmistä ympäristöistä.

Vite-projektin alustaminen

Tässä materiaalissa käytetään Vite-ympäristöä, koska se on rakenteeltaan kevyt ja se ei sisällä perus-Reactin lisäksi paljoa muuta. Vite on kevyt, mutta soppivan tehokas kehitysympäristö, jonka tavoitteena on mm. tehdä kehityksen aikana tehtävät käännökset nopeasti.Vite ei ole sidottu ainoastaan React-kirjastoon, sen avulla pystyy toteuttamaan sovelluksia myös Vue-, Preact-, Lit- ja Svelte-ympäristöissä.

Projekti aloitetaan antamalla komentorivillä komento:

npm create vite@latest

Komento kysyy sinulta muutaman projektin alustamiseen liittyvän kysymyksen.

Syötä projektin nimeksi react101.
Valitse kehyskirjastoksi react.
Valitse variantiksi JavaScript.

Näiden kysymysten jälkeen Vite alustaa react101-kansioon uuden projektin.

Seuraavaksi asennetaan ohjeistuksen mukaisesti projektin tarvitsemat paketit seuraavilla komennoilla.

cd react101
npm install

Kun kaikki paketit on asennettu, niin komentoriville tulostuu tästä ilmoitus. Tällä kertaa asennettiin 240 eri pakettia, niissä ei ollut haavoittuvuuksia asennushetkellä.

added 240 packages, and audited 241 packages in 30s

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

found 0 vulnerabilities

Projektin avaaminen Visual Studio Codessa

Avataan projekti vielä Visual Studio Codessa seuraavalla komennolla ennen kuin käynnistetään kehitysympäristö.

code .

Tämä komento edellyttää, että koneellesi on asennattu Visual Studio Code sen oletusasetuksilla.

Komento käynnistää uuden ikkunan Visual Studio Codeen ja avaa sinne react101-kansion projektikansioksi. Voit valita Yes, I trust the authors -vaihtoehdon, kun sinulta varmistaan luotatko projektissa olevaan ohjelmakoodeihin.

Kehitysympäristö käynnistäminen

Viimeiseksi käynnistetään kehitysympäristö antamalla komentoriville komento:

npm run dev

Pienen hetken päästä komentoriville tulostuu seuraavan kaltainen teksti:

  VITE v4.3.5  ready in 1866 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Avaa komentorivillä oleva osoite (https://localhost:5173/) selaimessa, niin näet miltä projekti näyttää.

Muutoksen tekeminen

Kokeillaan vielä pienen muutoksen tekemistä alkuperäiseen ohjelmakoodiin, niin näemme miten kehitysympäristö toimii. Avaa src-kansion alta App.jsx-niminen tiedosto ja muokkaa rivillä 19 oleva h1-elementtirivi seuraavanlaiseksi.

      <h1>Vite + React yhteen soppii..</h1>

Tallenna tekemäsi muutokset. Muutokset päivittyvät lähes samanaikaisesti selainsivulle ilman, että joudut päivittämään selainsivua.

Voit tutustua tarkemmin alustuksen yhteydessä luotuun esimerkkipohjaan, siellä on mm. yksinkertainen esimerkki siitä, miten lasketaan kuinka monta kertaa nappia on painettu yhteensä.

Ohjelmakoodin rakenne ja sisältö voi tuntua vielä tässä vaiheessa tosi oudolta, mutta se tulee jatkossa paljon tutummaksi.

Kehitysympäristön käynnistäminen jatkossa

Projektin alustaminen tehdään luonnollisesti ainoastaan kerran. Jos haluat palata myöhemmin takaisin tämän projektin pariin, niin se onnistuu seuraavilla komennoilla.

cd react101
code .
npm run dev

React 101