Reageeri funktsionaalsed komponendid, rekvisiidid ja JSX - React.js õpetus algajatele

React on kasutajaliideste loomiseks üks populaarsemaid JavaScripti teeke.

Kui soovite saada esiotsa arendajaks või leida veebiarendustöö, oleks teile Reacti süvendatud õppimisest tõenäoliselt kasu.

Selles postituses saate õppida mõningaid Reacti põhitõdesid, nagu komponendi loomine, JSX-i süntaks ja rekvisiidid. Kui teil pole Reactiga kogemusi või on neid vähe, on see postitus just teile.

Alustuseks saate Reacti installida järgmiselt.

Mis on JSX?

Esimene asi, mida pärast esimese Reacti projekti installimist mõistate, on see, et JavaScripti funktsioon tagastab HTML-koodi:

function App() { return ( 

Edit src/App.js and save to reload.

); }

See on Reacti jaoks spetsiaalne ja kehtiv süntaksilaiend, mida nimetatakse JSX (JavaScripti XML). Tavaliselt hoiame frontendiga seotud projektides HTML, CSS ja JavaScripti koodi eraldi failides. Kuid Reactis töötab see natuke teisiti.

React-projektides ei loo me eraldi HTML-faile, sest JSX võimaldab meil HTML-i ja JavaScripti koos ühte faili kirjutada, nagu ülaltoodud näites. Siiski saate oma CSS-i eraldada muus failis.

Alguses võib JSX tunduda natuke imelik. Kuid ärge muretsege, te harjute sellega.

JSX on väga praktiline, kuna saame ka HTML-i siseselt käivitada mis tahes JavaScripti koodi (loogika, funktsioonid, muutujad ja nii edasi), kasutades lokkis klambreid {}, näiteks:

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

{text}

); }

HTML-silte saate määrata ka JavaScripti muutujatele:

const message = 

React is cool!

;

Või saate HTML-i tagastada JavaScripti loogikas (näiteks if-else juhtumid):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Ma ei hakka JSX-i üksikasjadesse laskuma, kuid veenduge, et arvestaksite JSX-i kirjutamisel järgmisi reegleid:

  • HTML ja komponentide sildid peavad alati olema suletud
  • Mõnest atribuudist, nagu „klass”, saab „klassiNimi” (kuna klass viitab JavaScripti klassidele), „tabindex” saab „tabIndex” ja sellele tuleks kirjutada camelCase
  • Me ei saa korraga tagastada rohkem kui ühte HTML-elementi, seega pakkige need kindlasti vanemasildi sisse:
return ( 

Hello

World

);
  • või alternatiivina võite need pakkida tühjade siltidega:
return (  

Hello

World

);

Lisateabe saamiseks võite vaadata ka minu React for Beginners õpetust:

Mis on funktsionaalsed ja klassi komponendid?

Pärast JSX-i süntaksiga harjumist tuleb järgmisena mõista React'i komponentidel põhinevat struktuuri.

Kui vaatate selle postituse ülaosas näidiskoodi uuesti, näete, et funktsioon tagastab JSX-koodi. Kuid funktsioon App () pole tavaline funktsioon - see on tegelikult komponent. Mis on komponent?

Mis on komponent?

Komponent on iseseisev korduvkasutatav koodiplokk, mis jagab kasutajaliidese väiksemateks tükkideks. Näiteks kui me ehitasime Reactiga Twitteri kasutajaliidese:

Selle asemel, et kogu kasutajaliides ühe faili alla ehitada, saame ja peaksime jagama kõik sektsioonid (tähistatud punasega) väiksemateks iseseisvateks tükkideks. Teisisõnu, need on komponendid.

Reactil on kahte tüüpi komponente: funktsionaalneja klass. Vaatame nüüd kõiki üksikasjalikumalt.

Funktsionaalsed komponendid

Reacti esimene ja soovitatav komponentitüüp on funktsionaalsed komponendid. Funktsionaalne komponent on põhimõtteliselt JavaScripti / ES6 funktsioon, mis tagastab React elemendi (JSX). Reactsi ametlike dokumentide kohaselt on allpool toodud funktsioon kehtiv funktsionaalne komponent:

function Welcome(props) { return 

Hello, {props.name}

; }

Teise võimalusena saate funktsionaalse komponendi luua ka noolefunktsiooni määratlusega:

const Welcome = (props) => { return 

Hello, {props.name}

; }
See funktsioon on kehtiv Reacti komponent, kuna see aktsepteerib üksiku objekti argumenti "props" (mis tähistab omadusi) ja tagastab elemendi React. - reactjs.org

Komponendi hilisemaks kasutamiseks peate selle kõigepealt eksportima, et saaksite selle kuhugi mujale importida:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Pärast selle importimist saate komponendile helistada nagu selles näites:

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

Nii et funktsionaalne komponent Reactis:

  • on JavaScripti / ES6 funktsioon
  • peab tagastama elemendi React (JSX)
  • algab alati suurtähega (nimetamiskord)
  • võtab vajadusel parameetriks rekvisiite

Mis on klassi komponendid?

Teist tüüpi komponent on klassi komponent. Klassikomponendid on ES6 klassid, mis tagastavad JSX-i. Allpool näete meie sama tervitusfunktsiooni, seekord klassi komponendina:

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

Hello, {this.props.name}

; } }

Erinevalt funktsionaalsetest komponentidest peab klassi komponentidel olema JSX-i tagastamiseks täiendav render () meetod.

Miks kasutada klassi komponente?

"Oleku" tõttu kasutasime varem klassi komponente. Reacti vanemates versioonides (versioon <16.8) ei olnud funktsionaalsete komponentide sees olekut võimalik kasutada.

Seetõttu vajasime funktsionaalseid komponente ainult kasutajaliidese renderdamiseks, samas kui andmehalduseks ja mõnedeks täiendavateks toiminguteks (näiteks olelusringi meetodid) kasutaksime klassi komponente.

React Hooksi kasutuselevõtuga on see muutunud ja nüüd saame olekuid kasutada ka funktsionaalsetes komponentides. (Ma kajastan oma järgmisi postitusi olekut ja konksusid, nii et ärge nüüd neid pahandage).

Klassikomponent:

  • on ES6 klass, saab komponendiks, kui see "laiendab" React komponenti.
  • võtab vajadusel Propsi (konstruktoris)
  • peab olema renderdatud ()meetod JSX tagastamiseks

Mis on rekvisiidid reageerimisel?

Teine oluline komponentide mõiste on see, kuidas nad suhtlevad. Reactil on spetsiaalne objekt nimega rekvisiit (tähistab omadust), mida kasutame andmete transportimiseks ühest komponendist teise.

Kuid olge ettevaatlik - toetage andmete transportimist ainult ühesuunalises voos (ainult vanematelt lapsele mõeldud komponentidena). Rekvisiitidega pole võimalik edastada andmeid lapselt vanemale ega samal tasemel komponentidele.

Vaatame uuesti ülaltoodud funktsiooni App (), et näha, kuidas rekvisiitidega andmeid edastada.

Esiteks peame määratlema tervituskomponendis rekvisiidi ja määrama sellele väärtuse:

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

Rekvisiidid on kohandatud väärtused ja need muudavad komponendid ka dünaamilisemaks. Kuna tervituskomponent on siin laps, peame selle vanemal (rakendusel) määratlema rekvisiidid, et saaksime väärtused edastada ja tulemuse saada, lihtsalt pöördudes rekvisiidi "nimi" juurde:

function Welcome(props) { return 

Hello, {props.name}

; }

Reageerimise rekvisiidid on tõesti kasulikud

Seega kasutavad Reacti arendajad andmete edastamiseks rekvisiite ja need on selle töö jaoks kasulikud. Aga kuidas on andmete haldamisega? Rekvisiite kasutatakse andmete edastamiseks, mitte nendega manipuleerimiseks. Räägin andmete haldamisest Reactiga oma tulevastes postitustes siin freeCodeCampis.

Seniks, kui soovite Reacti ja veebiarenduse kohta lisateavet saada, tellige julgelt minu YouTube'i kanal.

Aitäh, et lugesid!