React Functional Components, Props in JSX - React.js Vadnica za začetnike

React je ena izmed najbolj priljubljenih knjižnic JavaScript za gradnjo uporabniških vmesnikov.

Če želite postati front-end razvijalec ali poiskati službo za spletni razvoj, bi vam verjetno koristilo poglobljeno učenje React.

V tej objavi se boste naučili nekaterih osnov Reacta, kot je ustvarjanje komponente, sintaksa JSX in rekviziti. Če z Reactom nimate izkušenj ali jih imate malo, je ta objava za vas.

Za začetek je opisano, kako lahko namestite React.

Kaj je JSX?

Prva stvar, ki jo boste ugotovili po namestitvi prvega projekta React, je, da funkcija JavaScript vrne nekaj kode HTML:

function App() { return ( 

Edit src/App.js and save to reload.

); }

To je posebna in veljavna sintaksna razširitev za React, ki se imenuje JSX (JavaScript XML). Običajno v projektih, povezanih s frontendom, hranimo kodo HTML, CSS in JavaScript v ločenih datotekah. Vendar v React-u to deluje nekoliko drugače.

V projektih React ne ustvarjamo ločenih datotek HTML, ker nam JSX omogoča pisanje HTML-ja in JavaScript-a, združenih v isto datoteko, kot v zgornjem primeru. Vendar lahko svoj CSS ločite v drugo datoteko.

Na začetku se JSX morda zdi nekoliko čuden. A brez skrbi, navadili se boste.

JSX je zelo praktičen, saj lahko v kodo HTML neposredno izvedemo katero koli kodo JavaScript (logiko, funkcije, spremenljivke itd.) Z uporabo kodrastih oklepajev {}, kot je ta:

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

{text}

); }

Prav tako lahko spremenljivkam JavaScript dodelite oznake HTML:

const message = 

React is cool!

;

Lahko pa vrnete HTML znotraj logike JavaScript (na primer, če-drugače):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Ne bom se spuščal v nadaljnje podrobnosti o JSX, vendar med pisanjem JSX upoštevajte naslednja pravila:

  • Oznake HTML in komponente morajo biti vedno zaprte
  • Nekateri atributi, kot je "class", postanejo "className" (ker se razred nanaša na razrede JavaScript), "tabindex" postane "tabIndex" in ga je treba zapisati camelCase
  • Ne moremo vrniti več kot enega elementa HTML hkrati, zato jih obvezno zavijte v nadrejeno oznako:
return ( 

Hello

World

);
  • ali kot drugo možnost jih lahko zavijete s praznimi oznakami:
return (  

Hello

World

);

Za več informacij si lahko ogledate tudi vadnico React for Beginners:

Kaj so funkcionalne in razredne komponente?

Po navajanju na sintakso JSX je naslednja stvar, ki jo moramo razumeti, struktura React-a, ki temelji na komponentah.

Če znova obiščete vzorčno kodo na vrhu te objave, boste videli, da funkcija vrne kodo JSX. Toda funkcija App () ni običajna funkcija - je pravzaprav komponenta. Kaj je torej komponenta?

Kaj je komponenta?

Komponenta je neodvisen blok kode za večkratno uporabo, ki deli uporabniški vmesnik na manjše koščke. Na primer, če smo z Reactom gradili uporabniški vmesnik Twitterja:

Namesto da bi celotnega uporabniškega vmesnika zgradili v eni sami datoteki, lahko vse razdelke (označene z rdečo) razdelimo na manjše neodvisne koščke. Z drugimi besedami, to so sestavni deli.

React ima dve vrsti komponent: funkcionalnoin razred. Oglejmo si vsako zdaj podrobneje.

Funkcionalne komponente

Prva in priporočena vrsta komponent v Reactu so funkcionalne komponente. Funkcionalna komponenta je v bistvu funkcija JavaScript / ES6, ki vrne element React (JSX). V skladu z uradnimi dokumenti React-a je spodnja funkcija veljavna funkcionalna komponenta:

function Welcome(props) { return 

Hello, {props.name}

; }

Lahko pa ustvarite tudi funkcionalno komponento z definicijo funkcije puščice:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Ta funkcija je veljavna komponenta React, ker sprejema en argument "props" (kar pomeni lastnosti) s podatki in vrne element React. - reagirajte.org

Če želite komponento uporabljati pozneje, jo morate najprej izvoziti, da jo lahko uvozite nekam drugam:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Po uvozu lahko komponento pokličete kot v tem primeru:

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

Torej funkcionalna komponenta v Reactu:

  • je funkcija JavaScript / ES6
  • mora vrniti element React (JSX)
  • vedno se začne z veliko začetnico (pravilo poimenovanja)
  • po potrebi vzame rekvizite kot parameter

Kaj so komponente razreda?

Druga vrsta komponente je komponenta razreda. Komponente razredov so razredi ES6, ki vrnejo JSX. Spodaj vidite našo isto funkcijo dobrodošlice, tokrat kot komponento razreda:

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

Hello, {this.props.name}

; } }

Za razliko od funkcionalnih komponent morajo imeti komponente razreda dodatno metodo render () za vrnitev JSX.

Zakaj uporabljati komponente razreda?

Včasih smo uporabljali komponente razreda zaradi "stanja". V starejših različicah React (različica <16.8) ni bilo mogoče uporabiti stanja znotraj funkcionalnih komponent.

Zato smo potrebovali funkcionalne komponente samo za upodabljanje uporabniškega vmesnika, medtem ko bi komponente razreda uporabljali za upravljanje podatkov in nekatere dodatne operacije (kot so metode življenjskega cikla).

To se je spremenilo z uvedbo React Hooks, zdaj pa lahko stanja uporabljamo tudi v funkcionalnih komponentah. (V naslednjih objavah bom pokrival stanje in trnke, zato jih za zdaj ne moti).

Komponenta razreda:

  • je razred ES6, bo komponenta, ko bo "razširila" komponento React.
  • po potrebi vzame Props (v konstruktorju)
  • mora imeti upodabljanje ()metoda za vrnitev JSX

Kaj so rekviziti v Reactu?

Drug pomemben koncept komponent je, kako komunicirajo. React ima poseben objekt, imenovan prop (pomeni lastnost), ki ga uporabljamo za prenos podatkov iz ene komponente v drugo.

A bodite previdni - rekviziti samo prenašajo podatke v enosmernem toku (samo od nadrejene do podrejene komponente). Pri rekvizitih ni mogoče posredovati podatkov od otroka staršem ali komponentam na isti ravni.

Ponovno obiščimo zgornjo funkcijo App (), da vidimo, kako posredovati podatke z rekviziti.

Najprej moramo definirati osnovo za komponento dobrodošlice in ji dodeliti vrednost:

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

Rekviziti so vrednosti po meri in komponente tudi naredijo bolj dinamične. Ker je komponenta dobrodošlice tukaj podrejena, moramo na njenem nadrejenem (App) definirati rekvizite, tako da lahko posredujemo vrednosti in dobimo rezultat, tako da dostopamo do imena "prop":

function Welcome(props) { return 

Hello, {props.name}

; }

Reaktivni rekviziti so resnično uporabni

Torej razvijalci React uporabljajo rekvizite za posredovanje podatkov in so koristni za to delo. Kaj pa upravljanje podatkov? Rekviziti se uporabljajo za posredovanje podatkov in ne za njihovo manipulacijo. Upravljanje podatkov z Reactom bom opisal v naslednjih objavah tukaj na freeCodeCamp.

Če želite medtem izvedeti več o React in spletnem razvoju, se lahko naročite na moj YouTube kanal.

Hvala za branje!