React

Takaisin

React on selkeäasti yleisin web framework. Se mahdollistaa käyttöliittymän määrittämisen uudelleenkäytettävillä palikoilla, jotka kirjoitetaan sen omalla jsx-kielellä. jsx voi ajatella javascriptinä johon voi kirjoittaa html sekaan. React tukee myös typescript, jolloin koodi elää tsx tiedostoissa. Yleisesti react vähentää koodin toistoa, etenkin jos samat elementit toistuvat paljon. Esimerkiksi tämä sivu gitlab pages ei ole tehty reactilla yksinkertaisuuden vuoksi, joten joka sivulle pitää kopioida jonkun verran asioita, ja jos esimerkiksi haluaa vaihtaa fonttia, se pitää vaihtaa joka sivulle erikseen.

React asentaminen

React on aggressiivisen unopinionated. Tämä tarkoittaa että sitä voi käyttää monella tavalla. Harmillisesti kaikki niistä eivät ole yhtä mukavia, ja tilanne elää. Nämä ohjeet eivät päde enää muutaman vuoden päästä, mutta jos on oppinut tausta-ajatuksen, uuteen järjestelmään siirtyminen on usein melko helppoa.

Että voimme käyttää reactia, tulee meidän asentaa node. Node ajaa js koodia ilman selainta, ja react kehitysympäristö toimii nodella. React projektin voi alustaa monella eri tavalla. Nykyinen suosittu vaihtoehto on vite. Noden mukana asentuu node package manager (npm), jolla voimme käyttää vite. Ohjeet löytää Täältä.

React ja gitlab pages

Gitlab pages runner pitää säätää niin että se osaa tehdä sivun oikein. .gitlab-ci.yml pitää tehdä muutama muutos.

• Lisää scripts osioon npm install ja npm run build
• Vaihda artifacts alla oleva polku osoittamaan sinne minne vite laittaa lopullisen sivun, tod näk kansio jonka nimi on dist
• Jos ei toimi, tarkista runnerin logit, voi olla että ajat komentoja väärässä kansiossa. Saa kysyä apua jos tulee suru puseroon.

Häihälän mielipide reactista

React on todennäköisesti yksinkertaisempaa jos kaikki on asetettu toimimaan ja mitään ei tarvitse päivittää, mutta se tuo mukanaan erinäistä sähläämistä. Jos käyttää raakaa html+css+js comboa, sama koodi tulee toimimaan 30v päästä ongelmitta. Jos käyttää vite+react+node, sitä pitänee viimeistään parin vuoden päästä päivittää jos haluaa muutoksia (käännös tulee toimimaan 30v myös, muttei siihen halua tehdä käsin muutoksia). Päivittäminen voi vaatia isoja muutoksia. Toisaalta jälkimmäinen mahdollistaa valtavan nodejs pakettiekosysteemin käytön, eli jos haluaa esimerkiksi valmiin komponenttikirjaston missä on kaikenlaista hienoa, niitä on useita mistä voi valita. Moni pyörä pitää kehittää uudestaan jos ei kehitä niin että saa käyttää nodejs paketteja.

Jos haluaa työllistyä nyt, selkeästi helpoin tapa on osata react.