1. Jos kymmenien vuosien ohjelmointikokemuksella heittäydyt UI rakentelun pariin, niin kannattaa siirtää kaikki aiemmin opittu sivuun hetkeksi, helpottaa kummasti.
2. Koska kehitys kehittyy on seinän noustessa pystyyn suositeltava Google-haku:
“{mitä olenkaan hakemassa} after:{tämävuosi}-01-01”
3. Mitä tarvitaan?
Node, npm ja IDE suositteluna on Visual Studio Code.
4. Ensimmäinen projekti luodaan esim VS Coden terminaalissa:
Siirry hakemistoon, jonka alle haluat projektin tehdä ja sitten:
npx create-react-app projekti
Tämä luo perusmallin react projektin tiedostorakenteesta ja pienen esimerkkiaplikaation.
Siirry projektihakemistoon
cd projekti
5. Käynnistetään developer-palvelin. Samanaikaisesti tämä käynnistää selaimeen aplikaatiosivun.
npm start
6. Ensimmäinen oma react-komponentti
- React-komponentti alkaa isolla kirjaimella, on joko funktio tai luokka ja se voi sisältää tilatiedon.
Alla esimerkkinä Eka.jsx joka määrittelee Eka luokkakomponentin.
Tämä tallennetaan hakemistoon projekti/src nimellä Eka.jsx
Yksinkertainen komponentti, joka näyttää laatikon missä numero, joka alustetaan komponentin propertyllä start. Toiminnallisuutena komponentissa on arvon lisäys, vähennys ja palautus alkuarvoon. Arvoa säilytetään komponentin tilamuuttujassa counter.
Komponentti saadaan näkyviin projektin etusivulle projekti/src/App.js lisäämällä seuraavat kaksi riviä.
7. TypeScript eli bonusvinkki.
Eka.jsx on react-komponentti javascriptillä toteutettuna. Kun olet aloitteleva React-toteuttaja, kannattaa ottaa TypeScript alusta asti mukaan kuvioon. Sen käyttö saattaa tuntua hankalalta, kun käännösvirheet tuntuvat hidastavan työntekoa. Pikkuhiljaa ne alkavat vähenemään ja alkaa arvostamaan että käännös ei mene läpi yksinkertaisen typon takia. Puhdasta javascriptiä käyttäen virhe tulee pahimmillaan esiin vasta tuotannossa.
Ja näin aloitat React projektin TypeScriptin kera.
npx create-react-app projekti --template=typescript
Ja ei muuta kun omaa projektia tekemään, Happy hacking!
Kirjoittaja Juri Laihonen on T-Basen konsultti, joka omaa vuosikymmenien kokemuksen perinteisistä ohjelmointitekniikoista, TypeScript/Reactiin Juri tutustui ensi kertaa loppuvuodesta 2020.
Ota yhteyttä, jos tarvitset apua React-projekteissa tai olet kiinnostunut muista palveluistamme.
Tutustu myös näihin:
Mikropalveluarkkitehtuuri ja Azure Functions
Perinteisessä sovellusarkkitehtuurissa käyttöliittymän taustalla on yleensä palvelukerros, joka koostuu rajapinnoista. Sovelluksen koon mukaan rajapintoja voi
Ei koodi debuggaamalla kulu
Kirjoitin joskus aiemmin kielimuurista asiakkaan ja koodarin välillä blogissa Pardon my Jargon. Samassa raapustuksessa vilisi