React on yksi suosituimmista JavaScript-kirjastoista käyttöliittymien rakentamiseen.
Jos haluat ryhtyä front-end-kehittäjäksi tai löytää web-kehittäjän työpaikan, hyötyisit todennäköisesti Reactin perusteellisesta oppimisesta.
Tässä postauksessa opit Reactin perusteita, kuten komponentin luomisen, JSX-syntaksin ja Propsin. Jos sinulla ei ole lainkaan tai vain vähän kokemusta Reactista, tämä postaus on sinua varten.
Alkajaisiksi voit asentaa Reactin näin.
Mikä on JSX?
Ensimmäinen asia, jonka huomaat ensimmäisen React-projektisi asentamisen jälkeen, on se, että JavaScript-funktio palauttaa jonkin verran HTML-koodia:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Tämä on Reactin erityinen ja kelvollinen syntaksilaajennus, jota kutsutaan JSX:ksi (JavaScript XML). Normaalisti frontendiin liittyvissä projekteissa pidämme HTML-, CSS- ja JavaScript-koodin erillisissä tiedostoissa. Reactissa tämä toimii kuitenkin hieman eri tavalla.
React-projekteissa emme luo erillisiä HTML-tiedostoja, koska JSX:n avulla voimme kirjoittaa HTML:n ja JavaScriptin yhdistettynä samaan tiedostoon, kuten yllä olevassa esimerkissä. Voit kuitenkin erottaa CSS:n toiseen tiedostoon.
Aluksi JSX saattaa tuntua hieman oudolta. Mutta ei hätää, siihen tottuu kyllä.
JSX on hyvin käytännöllinen, koska voimme myös suorittaa mitä tahansa JavaScript-koodia (logiikkaa, funktioita, muuttujia ja niin edelleen) HTML:n sisällä suoraan käyttämällä aaltosulkeita { }, esimerkiksi näin:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Myös voit määrätä HTML-tunnisteita JavaScript-muuttujille:
const message = <h1>React is cool!</h1>;Tai voit palauttaa HTML:ää JavaScript-logiikan sisällä (kuten if-else-tapauksissa):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}En mene tarkemmin JSX:n yksityiskohtiin, mutta varmista, että otat huomioon seuraavat säännöt JSX:ää kirjoittaessasi:
- HTML- ja komponenttitunnisteiden on aina oltava suljettuja < />
- Jotkut attribuutit, kuten ”class” muuttuu ”className”-merkinnäksi (koska class viittaa JavaScript-luokkiin), ”tabindex”-merkintä muuttuu ”tabIndex”-merkinnäksi, ja ne tulisi kirjoittaa camelCase
- Emme voi palauttaa useampaa kuin yhtä HTML-elementtiä kerralla, joten varmista, että ne kääritään vanhemman tagin sisään:
return ( <div> <p>Hello</p> <p>World</p> </div>);- tai vaihtoehtoisesti voit kietoa ne tyhjiin tageihin:
return ( <> <p>Hello</p> <p>World</p> </>);Voit myös katsoa lisätietoa React for Beginners -oppaastani:
Mitä ovat funktionaaliset & luokkakomponentit?
JSX-syntaksiin tottumisen jälkeen seuraava asia, joka pitää ymmärtää, on Reactin komponenttipohjainen rakenne.
Jos palaat tämän postauksen alussa olevaan esimerkkikoodiin, huomaat, että JSX-koodi palautetaan funktiolla. Mutta App( ) -funktio ei ole tavallinen funktio – se on itse asiassa komponentti. Mikä siis on komponentti?
Mikä on komponentti?
Komponentti on itsenäinen, uudelleenkäytettävä koodilohko, joka jakaa käyttöliittymän pienempiin osiin. Jos esimerkiksi rakentaisimme Twitterin käyttöliittymän Reactilla:
Sen sijaan, että rakentaisimme koko käyttöliittymän yhden tiedoston alle, voimme ja meidän kannattaa jakaa kaikki osiot (punaisella merkityt) pienempiin itsenäisiin paloihin. Toisin sanoen nämä ovat komponentteja.
Reactissa on kahdenlaisia komponentteja: toiminnallisia ja luokkakomponentteja. Tarkastellaan nyt kumpaakin tarkemmin.
Funktionaaliset komponentit
Reactin ensimmäinen ja suositeltava komponenttityyppi on funktionaaliset komponentit. Funktionaalinen komponentti on periaatteessa JavaScript/ES6-funktio, joka palauttaa React-elementin (JSX). Reactin virallisten dokumenttien mukaan alla oleva funktio on kelvollinen funktionaalinen komponentti:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}Vaihtoehtoisesti voit luoda funktionaalisen komponentin myös nuolifunktiomääritelmällä:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Tämä funktio on kelvollinen React-komponentti, koska se hyväksyy yhden ”props”-objektiargumentin (joka tarkoittaa ominaisuuksia), jossa on dataa, ja palauttaa React-elementin. – reactjs.org
Voidaksesi käyttää komponenttia myöhemmin, sinun täytyy ensin viedä se, jotta voit tuoda sen jonnekin muualle:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Tuonnin jälkeen voit kutsua komponenttia kuten tässä esimerkissä:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Eli toiminnallinen komponentti Reactissa:
- on JavaScript/ES6-funktio
- on palautettava React-elementti (JSX)
- alkaa aina isolla alkukirjaimella (nimeämiskonventio)
- ottaa tarvittaessa propsin parametrina
Mitä ovat luokkakomponentit?
Toinen komponenttityyppi on luokkakomponentti. Luokkakomponentit ovat ES6-luokkia, jotka palauttavat JSX:ää. Alla näet saman Tervetuloa-funktiomme, tällä kertaa luokkakomponenttina:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Erotteluna funktionaalisista komponenteista, luokkakomponenteilla on oltava ylimääräinen render( ) -metodi JSX:n palauttamista varten.
Miksi käyttää luokkakomponentteja?
Käytimme aiemmin luokkakomponentteja ”tilan” vuoksi. Reactin vanhemmissa versioissa (versio < 16.8) ei ollut mahdollista käyttää tilaa funktionaalisten komponenttien sisällä.
Siten tarvitsimme funktionaalisia komponentteja vain UI:n renderöintiin, kun taas käytimme luokkakomponentteja datan hallintaan ja joihinkin ylimääräisiin operaatioihin (kuten elinkaaren metodeihin).
Tämä on muuttunut React Hooksin käyttöönoton myötä, ja nyt voimme käyttää tiloja myös funktionaalisissa komponenteissa. (Käsittelen tiloja ja koukkuja seuraavissa postauksissani, joten älä välitä niistä toistaiseksi).
Luokan komponentti:
- on ES6-luokka, siitä tulee komponentti, kun se ’laajentaa’ React-komponenttia.
- ottaa Propsin (konstruktorissa) tarvittaessa
- on oltava render( ) metodi JSX:n palauttamista varten
Mitä ovat Propsit Reactissa?
Toinen tärkeä käsite komponenteissa on se, miten ne kommunikoivat. Reactissa on erityinen objekti nimeltä prop (lyhenne sanoista property), jota käytämme tiedon kuljettamiseen komponentilta toiselle.
Mutta ole varovainen – propsit kuljettavat dataa vain yksisuuntaisesti (vain vanhemmilta lapsikomponenteille). Propsin avulla ei ole mahdollista siirtää dataa lapsesta vanhemmalle tai samalla tasolla oleville komponenteille.
Katsotaan vielä kerran yllä olevaa App( ) -funktiota, jotta nähdään, miten dataa siirretään propsin avulla.
Ensin meidän on määriteltävä Tervetuloa-komponentille prop ja annettava sille arvo:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Propsit ovat mukautettuja arvoja ja ne myös tekevät komponenteista dynaamisempia. Koska Welcome-komponentti on tässä lapsi, meidän on määriteltävä propsit sen vanhemmalle (App), jotta voimme välittää arvoja ja saada tuloksen yksinkertaisesti käyttämällä propin ”nimi”:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
Reactin propsit ovat todella käyttökelpoisia
React-kehittäjät käyttävät siis propsia tietojen välittämiseen, ja ne ovat käyttökelpoisia tässä tehtävässä. Mutta entä datan hallinta? Propsia käytetään datan välittämiseen, ei sen manipulointiin. Aion käsitellä datan hallintaa Reactilla tulevissa postauksissani täällä freeCodeCampissa.
Sillä välin, jos haluat oppia lisää React & Web-kehityksestä, voit vapaasti tilata YouTube-kanavani.
Kiitos lukemisesta!