React-toiminnalliset komponentit, rekvisiitta ja JSX - React.js-opas aloittelijoille

React on yksi suosituimmista JavaScript-kirjastoista käyttöliittymien rakentamiseen.

Jos haluat tulla käyttöliittymän kehittäjä tai löytää web-kehitystyö, sinun kannattaa todennäköisesti oppia React perusteellisesti.

Tässä viestissä aiot oppia joitain Reactin perusteita, kuten komponentin luominen, JSX-syntakse ja rekvisiitta. Jos sinulla ei ole tai on vain vähän kokemusta Reactista, tämä viesti on sinulle.

Ensinnäkin, miten voit asentaa React.

Mikä on JSX?

Ensimmäinen asia, jonka huomaat ensimmäisen React-projektin asentamisen jälkeen, on se, että JavaScript-toiminto palauttaa HTML-koodin:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Tämä on erityinen ja kelvollinen Reactin syntaksilaajennus, jota kutsutaan nimellä JSX (JavaScript XML). Normaalisti frontendiin liittyvissä projekteissa pidämme HTML-, CSS- ja JavaScript-koodit erillisissä tiedostoissa. Reactissa tämä toimii kuitenkin hieman eri tavalla.

React-projekteissa emme luo erillisiä HTML-tiedostoja, koska JSX antaa meille mahdollisuuden kirjoittaa HTML ja JavaScript yhdistettynä samaan tiedostoon, kuten yllä olevassa esimerkissä. Voit kuitenkin erottaa CSS: n toiseen tiedostoon.

Alussa JSX saattaa tuntua hieman oudolta. Mutta älä huoli, totut siihen.

JSX on hyvin käytännöllinen, koska voimme myös suorittaa minkä tahansa JavaScript-koodin (logiikka, toiminnot, muuttujat ja niin edelleen) HTML: n sisällä suoraan kiharoiden aaltosulkeilla {}, kuten tämä:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Voit myös määrittää HTML-tunnisteita JavaScript-muuttujille:

const message = 

React is cool!

;

Tai voit palauttaa HTML-koodin JavaScript-logiikkaan (kuten if-muut tapaukset):

render() { if(true) { return 

YES

; } else { return

NO

; } }

En käsittele tarkempia tietoja JSX: stä, mutta varmista, että otat huomioon seuraavat säännöt kirjoittaessasi JSX: tä:

  • HTML- ja komponenttitunnisteet on aina suljettava
  • Joistakin määritteistä, kuten "luokka", tulee "luokan nimi" (koska luokka viittaa JavaScript-luokkiin), "tabindex" tulee "tabIndex", ja se tulisi kirjoittaa camelCase
  • Emme voi palauttaa useampaa kuin yhtä HTML-elementtiä kerralla, joten varmista, että käärit ne ylätagiin:
return ( 

Hello

World

);
  • tai vaihtoehtoisesti voit kääri ne tyhjillä tunnisteilla:
return (  

Hello

World

);

Voit myös katsoa React for Beginners -oppaasta lisätietoja:

Mitä ovat toiminnalliset ja luokan osat?

JSX-syntaksin totuttamisen jälkeen seuraava ymmärrettävä asia on Reactin komponenttipohjainen rakenne.

Jos palaat tämän viestin yläosassa olevaan esimerkkikoodiin, näet, että JSX-koodi palautetaan toiminnon avulla. Mutta App () -toiminto ei ole tavallinen toiminto - se on itse asiassa komponentti. Joten mikä on komponentti?

Mikä on komponentti?

Komponentti on itsenäinen, uudelleenkäytettävä koodilohko, joka jakaa käyttöliittymän pienempiin paloihin. Esimerkiksi, jos rakennamme Twitterin käyttöliittymää Reactin kanssa:

Sen sijaan, että koko käyttöliittymä rakennettaisiin yhdeksi tiedostoksi, voimme ja meidän pitäisi jakaa kaikki (punaisella merkityt) osiot pienempiin itsenäisiin kappaleisiin. Toisin sanoen nämä ovat komponentteja.

Reactilla on kahden tyyppisiä komponentteja: toiminnallinenja luokka. Katsotaanpa kutakin nyt tarkemmin.

Toiminnalliset komponentit

Reactin ensimmäinen ja suositeltava komponenttityyppi on toiminnalliset komponentit. Toiminnallinen komponentti on pohjimmiltaan JavaScript / ES6-funktio, joka palauttaa React-elementin (JSX). Reactin virallisten asiakirjojen mukaan alla oleva toiminto on kelvollinen toiminnallinen komponentti:

function Welcome(props) { return 

Hello, {props.name}

; }

Vaihtoehtoisesti voit myös luoda toiminnallisen komponentin nuolitoiminnon määritelmällä:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Tämä toiminto on kelvollinen React-komponentti, koska se hyväksyy yhden "props" (joka tarkoittaa ominaisuuksia) -objektiargumentin datalla ja palauttaa React-elementin. - reactjs.org

Voidaksesi käyttää komponenttia myöhemmin, sinun on ensin vietävä se, jotta voit tuoda sen muualle:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Tuonnin jälkeen voit soittaa komponentille kuten tässä esimerkissä:

import Welcome from './Welcome'; function App() { return ( ); }

Joten Reacton toimiva komponentti:

  • on JavaScript / ES6-funktio
  • täytyy palauttaa React-elementti (JSX)
  • alkaa aina isolla kirjaimella (nimeämiskäytäntö)
  • ottaa rekvisiitta tarvittaessa parametrina

Mitä ovat luokan komponentit?

Toinen komponenttityyppi on luokan komponentti. Luokkakomponentit ovat ES6-luokkia, jotka palauttavat JSX: n. Alla näet saman tervetulotoimintomme, tällä kertaa luokan komponenttina:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

Toisin kuin toiminnalliset komponentit, luokan osilla on oltava ylimääräinen render () -menetelmä JSX: n palauttamiseksi.

Miksi käyttää luokan osia?

Aikaisemmin käytimme luokan komponentteja "tilan" vuoksi. Reactin vanhemmissa versioissa (versio <16.8) ei ollut mahdollista käyttää tilaa toiminnallisten komponenttien sisällä.

Siksi tarvitsimme toiminnallisia komponentteja vain käyttöliittymän hahmontamiseen, kun taas käytimme luokan komponentteja tiedonhallintaan ja joitain lisätoimintoja (kuten elinkaarimenetelmiä).

Tämä on muuttunut React Hooksin käyttöönoton myötä, ja nyt voimme käyttää tiloja myös toiminnallisissa komponenteissa. (Aion kattaa valtion ja koukut seuraavissa viesteissäni, joten älä välitä niistä toistaiseksi).

Luokan komponentti:

  • on ES6-luokka, on komponentti, kun se 'laajentaa' React-komponenttia.
  • vie rekvisiitta (konstruktorissa) tarvittaessa
  • on oltava renderöity ()menetelmä JSX: n palauttamiseksi

Mitä ovat rekvisiitat reagoivat?

Toinen tärkeä komponenttien käsite on niiden kommunikointi. Reactilla on erityinen esine, jota kutsutaan rekvisiitaksi (tarkoittaa omaisuutta), jota käytämme tietojen siirtämiseen komponentista toiseen.

Mutta ole varovainen - tukee vain tiedonsiirtoa yksisuuntaisena kulkuna (vain vanhemmalta lapselle -osille). Rekvisiitalla ei ole mahdollista siirtää tietoja lapselta vanhemmalle tai samalla tasolla oleville komponenteille.

Tarkastellaan uudelleen yllä olevaa App () -toimintoa, jotta voimme nähdä, kuinka tietoja välitetään rekvisiitta.

Ensinnäkin meidän on määriteltävä rekvisiitta tervetulokomponenttiin ja annettava sille arvo:

import Welcome from './Welcome'; function App() { return ( ); }

Rekvisiitat ovat mukautettuja arvoja ja ne myös tekevät komponenteista dynaamisempia. Koska Welcome-komponentti on lapsi tässä, meidän on määriteltävä rekvisiitta sen vanhemmalle (App), jotta voimme välittää arvot ja saada tuloksen yksinkertaisesti avaamalla potkurin "nimi":

function Welcome(props) { return 

Hello, {props.name}

; }

React-rekvisiitta on todella hyödyllistä

Joten React-kehittäjät käyttävät rekvisiittaa tietojen välittämiseen, ja ne ovat hyödyllisiä tähän työhön. Mutta entä tietojen hallinta? Rekvisiittaa käytetään tietojen välittämiseen, ei niiden manipulointiin. Aion käsitellä tietojen hallintaa Reactilla tulevissa viesteissäni täällä freeCodeCampissa.

Sillä välin, jos haluat oppia lisää React- ja Web-kehityksestä, tilaa rohkeasti YouTube-kanavani.

Kiitos, että luit!