Ilmeisesti jokin tällainen fetissi lyödä useita kärpäsiä yhdellä kertaa vaivaa allekirjoittanutta, joten teen hommat Yeoman:lla.

Jatketaan React-sovelluksen tekemistä. Tavoitteena käyttää JSX:ää ja tehdä pieni esimerkkiohjelma, joka toimii web-selaimella.

Tässä osassa (3) päästään luomaan React-projektin pohja, ja tutustutaan miten projekti on organisoitu ja mitä komentoja sen käsittelyyn löytyy. Vielä ei siis varsinaista koodausta. Se tulee neljännessä osassa.

Sisältö

1. Asennetaan Yeoman
2. Asennetaan reseptitiedosto Reactille
3. Asennetaan valmis pohjaprojekti käyttäen ylläolevia
4. Kehitetään hieman omaa koodia
5. Seurataan, miten live-serveri tarjoaa uuden sisällön samantien
6. Sananen testauksesta
7. Esimerkkiprojektin rakenne

Siis mitä React ?!

Jos tipahdit tälle sivulle aivan satunnaisesti, hyvin lyhyt konteksti:

kerron, miten pääset alkuun web-sovelluksen tekemiseen Facebookin avoimen lähdekoodin ReactJS :ää käyttäen. Kyseessä on suht suosittu, uudenlainen lähestymistapa komponenttipohjaiseen JavaScript-ohjelmointiin.

React ei ole niinkään “uusi” ohjelmointikieli, vaan eräs JavaScriptin johdannainen. Parhaimman selityksen Reactista pähkinänkuoressa löysin Joinexin sivuilta.

React on kohtuullisen voimakkaasti “opinionated” eli se sisältää myös joukon suosituksia, kuinka ratkaista yleisesti kohdattuja ongelmakohtia webin maailmassa. Se, mitä tämä artikkeli ei lainkaan käsittele, on React Native (älypuhelimille suunnattu ohjelmointiympäristö).

Asennetaan Yeoman (eli ‘yo’)

Voit katsella taustoitusta ja ohjeita osoitteesta yeoman.io

Pari keskeistä asiaa:

1. Ohjelman nimi on Yeoman, mutta se on käytössä (ja npm-pakettina) nimellä ‘yo’
2. Yeoman itsessään ei vielä sisällä mitään pohjia; ne asennetaan npm:llä kuten mikä tahansa paketti. Pohjat alkavat aina ‘generator-‘ etuliitteellä.

Siispä meidän tapauksessa ajetaan nämä komennot:

sudo npm install -g yo

Yo tarvitsee vielä projektipohjan (generaattorin)

sudo npm install -g generator-react-webpack

Projektipohja tallennetaan globaaliksi, ts. “pois projektikohtaisesta” kansiosta. Tarvitset siksi superkäyttäjän oikeudet (sudo).

React-projektin alustus yo:lla

Yeoman on yleistyökalu erilaisten valmiiden kehikkojen (alustan) käyttöönottoon. Sillä voi suurinpiirtein samanlaisella reseptillä siis valmistaa webbikoodia, olipa käytössä mikä hyvänsä alusta. Nyt meillä on siis alustana tämä ReactJS.

Pääset tarvittaessa alkuun pelkän React:in kanssa jos asentelet käsin työkalut ja tiedostot. Se, ottaako React kantaa tiedostojen tai kansioiden nimeämiseen – en suoraan sanoen tiedä.

Alla teen Reactin käyntiin polkaisun tosiaan Yeomanilla – joka käynnistyy komennolla  ‘yo’

npm install --save generator-react-webpack

yo react-webpack

Anna Yeomanin rauhassa hoitaa tarvittavat jutut. Omalla koneella homma kesti noin 1 minuutin.

Voit katsella, paljonko levyä kului asennusten jäljiltä:

du -h

Älä ihmettele, jos näet noin 200 megatavua. Itse tärkein src/ -puu on kuitenkin aika pieni. Tästä src :stä käännetään lopulta tuotantoon menevät fileet, joten työkalujen tilankulutus ei haittaa.

Mitä asennuksen jäljiltä löytyy?

src/

./actions
./components
./config
./images
./sources
./stores
./styles

Valmis pohja suosittelee ylläolevaa järjestystä. Se on suht yksinkertainen.

Luntataan komennot

Kehitystä varten jokaisella on usein omat mielikomennot, joilla voidaan mm. suorittaa CSS/LESS/whatever tiedostojen prosessointia ja kaikenlaista tärkeätä oheistoimintaa. npm pulttaa nämä kätevästi talteen tuohon aiemmin mainittuun konfigurointitiedostoon. Luntataan:
less ./package.json

Komennot löytyvät scripts -osiosta.

Testataan! Serveri käyntiin

npm run serve

Nyt tuotos pyörii paikallisesti koneellasi!

Katso selaimella:

http://localhost:8000/

Kun haluat sammuttaa paikallisserverin, painele Ctrl-C terminaalissa.

Seuraavaksi, osassa 4, React -koodia.