Tuotekortti, jossa on kuva, nimi, hinta ja ostonappi, syntyy tekoälyltä, kun sen kuvaa yhdellä lauseella. Kun React-komponentit tehdään tekoälyllä, tekoäly kirjoittaa, muokkaa ja korjaa React-koodia luonnollisella kielellä annettujen ohjeiden perusteella. Ihminen, jolla ei ole koodaustaustaa, voi kuvailla haluamansa käyttöliittymän osan, ja tekoäly tekee siitä toimivan React-komponentin.
React-komponentit lyhyesti
React on JavaScript-kirjasto käyttöliittymien rakentamiseen. Sovellus kootaan pienistä, uudelleenkäytettävistä palasista eli komponenteista, joita ovat esimerkiksi nappi, lomake, korttilista ja navigaatiopalkki.
Tekoälyn tekemä komponentti on tavallista React-koodia, joka vain syntyy sinun kuvauksesi pohjalta. Voit kirjoittaa esimerkiksi:
"Tee komponentti, joka näyttää tuotekortin: kuva, nimi, hinta ja ostonappi."
Tekoäly palauttaa toimivan komponentin, jonka voi liittää sovellukseen sellaisenaan.
Kynnys aloittaa madaltuu. Syntaksia ei tarvitse muistaa, eikä tarvitse tietää, miten tilaa (state) hallitaan Reactissa. Riittää, että osaa kuvailla, mitä ruudulla pitäisi näkyä.
Työkalut, prompti ja iterointi
Komponenttien tekeminen tekoälyllä nojaa kolmeen asiaan: työkaluihin, prompteihin ja iterointiin.
Työkalut. React-komponenttien rakentamiseen käytetään erityisesti näitä:
| Työkalu | Rooli |
|---|---|
| React | Käyttöliittymän peruskirjasto, komponenttien runko |
| Next.js | React-kehys, sivut, reititys, tuotantoon vietävä rakenne |
| Tailwind | Tyylit ja ulkoasu komponenteille valmiilla luokilla |
| Supabase | Tietokanta ja kirjautuminen komponenttien taakse |
| React Native | Samat opit mobiilikomponentteihin |
Yhdistelmiä vertaillaan tarkemmin työkaluvertailuissa.
Prompti. Hyvä prompti kertoo tekoälylle, miltä komponentti näyttää, miten se toimii ja mihin tyyliin se sopii. Esimerkiksi:
"Tee React-komponentti FeatureCard, joka näyttää ikonin, otsikon ja lyhyen tekstin. Käytä Tailwindia, tumma teema, pyöristetyt kulmat."
Prompttikirjastossa on yli 50 valmista pohjaa tällaisiin tilanteisiin, myös React-komponenttien tekemiseen. Aloittelijalle sopii yksinkertainen komponentti, kuten tuotekortti, ja valmis pohja sen promptiksi.
Iterointi. Ensimmäinen versio on harvoin lopullinen. Komponenttia hiotaan pyytämällä tekoälyä muuttamaan yksi asia kerrallaan: "Suurenna otsikkoa", "Lisää napille hover-efekti", "Tee tästä responsiivinen mobiilissa."
Komponentin rakentaminen alusta valmiiksi
Työ alkaa siitä, että komponentin tehtävä kirjoitetaan yhdellä lauseella. Sen jälkeen kuvaillaan ulkoasu: värit, koko, asettelu ja tyyliteema, esimerkiksi Tailwind-luokat. Jos komponentti näyttää tietoa, kuten hinnan, nimen tai kuvan, tekoälylle annetaan esimerkkidata, jotta se tietää, millaista sisältöä korttiin tulee.
Kun prompti on valmis, tekoälyltä pyydetään valmis React-komponentti. Koodi liitetään projektiin ja sitä testataan selaimessa, jolloin nähdään, toimiiko se odotetusti. Muutoksia pyydetään yksi kerrallaan, kunnes komponentti on valmis, ja lopuksi sivu tai näkymä kootaan useista komponenteista.
FeatureCard-esimerkissä tehtävä on näyttää ikoni, otsikko ja lyhyt teksti. Ulkoasuksi riittää tumma teema ja pyöristetyt kulmat Tailwindilla, ja esimerkkidataksi käy yksi ikoni, yksi otsikko ja yksi lause. Jos kortti näyttää selaimessa hyvältä mutta hajoaa puhelimen näytöllä, seuraava pyyntö on "Tee tästä responsiivinen mobiilissa", eikä koko promptia tarvitse kirjoittaa uudelleen.
Samalla tavalla etenevät myös sivuston projekti-ideat, joista 24 on suunniteltu nimenomaan React-pohjaisiksi harjoituksiksi.
Arvioitu aikataulu
| Projekti | Aika | Komponenttien määrä (arvio) |
|---|---|---|
| Portfoliosivu | 30 min | 3-5 |
| SaaS-dashboard | 2 päivää | 15-25 |
| Mobiilisovellus (React Native) | 1 viikko | 20-40 |
Ajat ovat sivustolla esitettyjä arvioita projekteille, joissa rakentaja teettää React-komponentit tekoälyllä alusta loppuun. Yksittäisen komponentin voi tehdä alle 30 minuutissa.
Rajat ja sudenkuopat
Kokonaisuuden hahmottaminen. Jos projektissa on kymmeniä komponentteja, tekoäly voi ehdottaa ratkaisua, joka ei sovi olemassa olevaan rakenteeseen. Silloin sille pitää kertoa tarkemmin, mitä muuta koodissa on.
Pienet ja isot osat. Yksittäinen nappi tai kortti valmistuu minuuteissa. Koko sovelluksen tilanhallinta ja monen komponentin yhteispeli vaativat enemmän iterointia ja ymmärrystä siitä, mitä pyytää.
Sanasto. Jos et tiedä, mitä "state" tai "props" tarkoittaa, tekoälyä on vaikea ohjeistaa tarkasti. Sivuston 59 termin sanasto on tehty tätä varten.
Räätälöidyt tarpeet. Jos tarve on hyvin räätälöity tai vaatii syvällistä suorituskyvyn optimointia, tekoälyn tekemä komponentti on hyvä lähtökohta mutta ei aina lopullinen ratkaisu. Silloin tekoälyn nopeus kannattaa yhdistää omaan tai ammattilaisen tarkistukseen.
Usein kysyttyä
Koodaustausta. React-komponenttien tekemiseen tekoälyllä ei tarvita koodaustaustaa. Riittää, että osaa kuvailla haluamansa lopputuloksen selvästi, ja varsinaisen React-koodin kirjoittaa tekoäly.
Koko sovellus tekoälyllä. Tekoäly voi tehdä koko React-sovelluksen, mutta se kannattaa rakentaa vaiheittain: ensin yksittäiset komponentit, sitten niistä sivut ja lopuksi tietokanta, esimerkiksi Supabase, mukaan.
Promptin tarkkuus. Mitä tarkemmin kuvailet ulkoasun, toiminnan ja esimerkkidatan, sitä lähempänä lopullista ensimmäinen versio on. Epämääräinen prompti tarkoittaa useampaa iterointikierrosta.
React ja React Native aloittelijalle. Valinta riippuu siitä, mitä olet tekemässä. React sopii verkkokäyttöliittymiin, React Native mobiilisovelluksiin. Kummankin opettelu tekoälyn avulla noudattaa samaa periaatetta: kuvaile, generoi, iteroi.
Komponentti ja Next.js-sivu. Komponentti on pienempi, uudelleenkäytettävä osa käyttöliittymää, kuten nappi tai kortti. Next.js-sivu voi koostua useista komponenteista, ja Next.js hoitaa myös reitityksen ja palvelinpuolen logiikan.