fbpx

ReactJS opiskelijan 6 askelta ensimmäisen React-aplikaation ja komponentin tekoon

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:

Haluatko lisätietoja?

Ota suoraan yhteyttä tai jätä meille yhteydenottopyyntö.