„React“ funkciniai komponentai, atramos ir „JSX“ - „React.js“ pamoka pradedantiesiems

„React“ yra viena iš populiariausių „JavaScript“ bibliotekų, skirtų kurti vartotojo sąsajas.

Jei norite tapti „front-end“ kūrėju arba susirasti darbą interneto svetainių kūrimo srityje, jums tikriausiai būtų naudinga išsamiai išmokti „React“.

Šiame įraše jūs sužinosite keletą „React“ pagrindų, tokių kaip komponento kūrimas, JSX sintaksė ir „Props“. Jei neturite ar mažai turite „React“ patirties, šis įrašas skirtas jums.

Pradedantiesiems, štai kaip galite įdiegti „React“.

Kas yra JSX?

Pirmas dalykas, kurį suprasite įdiegę pirmąjį „React“ projektą, yra tai, kad „JavaScript“ funkcija pateikia HTML kodą:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Tai yra specialus ir tinkamas „React“ sintaksės plėtinys, vadinamas JSX („JavaScript XML“). Paprastai su „frontend“ susijusiuose projektuose HTML, CSS ir „JavaScript“ kodus laikome atskiruose failuose. Tačiau „React“ tai veikia kiek kitaip.

„React“ projektuose mes nekuriame atskirų HTML failų, nes „JSX“ leidžia rašyti HTML ir „JavaScript“ kartu kartu tame pačiame faile, kaip aukščiau pateiktame pavyzdyje. Tačiau galite atskirti savo CSS kitame faile.

Pradžioje JSX gali pasirodyti šiek tiek keista. Bet nesijaudinkite, jūs priprasite.

JSX yra labai praktiškas, nes bet kokį „JavaScript“ kodą (logiką, funkcijas, kintamuosius ir t. T.) HTML viduje taip pat galime vykdyti tiesiogiai naudodami garbanotas petnešas {}, pavyzdžiui:

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

{text}

); }

Taip pat galite priskirti HTML žymas „JavaScript“ kintamiesiems:

const message = 

React is cool!

;

Arba galite grąžinti HTML vidinę „JavaScript“ logiką (pvz., „If-else“ atvejus):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Nesigilinsiu į daugiau informacijos apie JSX, tačiau rašydami JSX įsitikinkite, kad atsižvelgėte į šias taisykles:

  • HTML ir komponentų žymos visada turi būti uždarytos
  • Kai kurie atributai, tokie kaip „class“, tampa „className“ (nes klasė nurodo „JavaScript“ klases), „tabindex“ tampa „tabIndex“ ir turėtų būti parašyta „camelCase“
  • Negalime grąžinti daugiau nei vieno HTML elemento vienu metu, todėl būtinai juos suvyniokite į pagrindinę žymą:
return ( 

Hello

World

);
  • arba kaip alternatyva, galite juos suvynioti tuščiomis žymomis:
return (  

Hello

World

);

Taip pat galite žiūrėti mano „React for Beginners“ pamoką, kad gautumėte daugiau informacijos:

Kas yra funkciniai ir klasės komponentai?

Įpratus prie JSX sintaksės, kitas dalykas, kurį reikia suprasti, yra komponentų pagrindu sukurta „React“ struktūra.

Jei dar kartą peržiūrėsite šio įrašo viršuje esantį kodo pavyzdį, pamatysite, kad JSX kodą grąžina funkcija. Bet „App“) funkcija nėra įprasta funkcija - ji iš tikrųjų yra komponentas. Taigi, kas yra komponentas?

Kas yra komponentas?

Komponentas yra nepriklausomas, daugkartinio naudojimo kodo blokas, kuris padalija vartotojo sąsają į mažesnes dalis. Pvz., Jei „React“ kūrėme „Twitter“ vartotojo sąsają:

Užuot sukūrę visą vartotojo sąsają po vienu failu, mes galime ir turėtume suskirstyti visas sekcijas (pažymėtas raudona spalva) į mažesnes nepriklausomas dalis. Kitaip tariant, tai yra komponentai.

„React“ turi dviejų tipų komponentus: funkciniusir klasė. Pažvelkime į kiekvieną dabar išsamiau.

Funkciniai komponentai

Pirmasis ir rekomenduojamas „React“ komponentų tipas yra funkciniai komponentai. Funkcinis komponentas iš esmės yra „JavaScript“ / ES6 funkcija, kuri pateikia „React“ elementą (JSX). Remiantis oficialiais „React“ dokumentais, toliau nurodyta funkcija yra galiojantis funkcinis komponentas:

function Welcome(props) { return 

Hello, {props.name}

; }

Arba taip pat galite sukurti funkcinį komponentą su rodyklės funkcijos apibrėžimu:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Ši funkcija yra tinkamas „React“ komponentas, nes ji priima vieną objekto argumentą „props“ (kuris reiškia ypatybes) su duomenimis ir grąžina „React“ elementą. - reactjs.org

Jei norite naudoti komponentą vėliau, pirmiausia turite jį eksportuoti, kad galėtumėte jį importuoti kitur:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Importavę galite iškviesti komponentą, kaip šiame pavyzdyje:

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

Taigi funkcinis „React“ komponentas:

  • yra „JavaScript“ / ES6 funkcija
  • turi grąžinti „React“ elementą (JSX)
  • visada prasideda didele raide (pavadinimo sutartis)
  • prireikus parametrą laiko rekvizitais

Kas yra klasės komponentai?

Antrasis komponento tipas yra klasės komponentas. Klasės komponentai yra ES6 klasės, kurios grąžina JSX. Žemiau matote tą pačią pasveikinimo funkciją, šį kartą kaip klasės komponentą:

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

Hello, {this.props.name}

; } }

Skirtingai nei funkciniai komponentai, klasės komponentai turi turėti papildomą „render“ () metodą JSX grąžinti.

Kodėl verta naudoti klasės komponentus?

Anksčiau mes naudojome klasės komponentus dėl „būsenos“. Senesnėse „React“ versijose (versija <16.8) nebuvo įmanoma naudoti būsenos funkcinių komponentų viduje.

Todėl mums reikėjo funkcinių komponentų tik vartotojo sąsajai atkurti, o duomenų komponentams ir kai kurioms papildomoms operacijoms (pvz., Gyvavimo ciklo metodams) naudoti klasių komponentus.

Tai pasikeitė įvedus „React Hooks“, o dabar būsenas galime naudoti ir funkciniuose komponentuose. (Aš būsime aprašęs būseną ir kabliukus savo tolesniuose įrašuose, todėl kol kas jų nesijaudinkite).

Klasės komponentas:

  • yra ES6 klasė, bus komponentas, kai jis „pratęs“ React komponentą.
  • jei reikia, paima Propą (konstruktoriuje)
  • turi būti pateikiamas ()metodas grąžinti JSX

Kas yra rekvizitas reakcijoje?

Kita svarbi komponentų samprata yra tai, kaip jie bendrauja. „React“ turi specialų objektą, vadinamą rekvizitu (reiškia nuosavybę), kurį naudojame duomenims perkelti iš vieno komponento į kitą.

Tačiau būkite atsargūs - palaikykite tik duomenų perdavimo vienakryptį srautą (tik iš tėvų į vaiko komponentus). Su rekvizitais neįmanoma perduoti duomenų iš vaiko tėvams ar to paties lygio komponentams.

Peržiūrėkime anksčiau pateiktą „App“ () funkciją, kad sužinotume, kaip perduoti duomenis su rekvizitais.

Pirmiausia turime nustatyti pasveikinimo komponento atramą ir priskirti jam vertę:

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

Rekvizitai yra pasirinktinės vertės, taip pat komponentai tampa dinamiškesni. Kadangi „Welcome“ komponentas yra vaikas čia, turime apibrėžti jo tėvų („App“) rekvizitus, kad galėtume perduoti reikšmes ir gauti rezultatą paprasčiausiai prisijungę prie rekvizito „vardas“:

function Welcome(props) { return 

Hello, {props.name}

; }

„React Prop“ yra tikrai naudingi

Taigi „React“ kūrėjai naudoja rekvizitus perduoti duomenis ir jie yra naudingi šiam darbui. Bet kaip dėl duomenų tvarkymo? Rekvizitai naudojami perduoti duomenis, o ne jais manipuliuoti. Duomenų tvarkymą naudodamas „React“ apžvelgsiu savo būsimuose įrašuose čia, „freeCodeCamp“.

Tuo tarpu, jei norite sužinoti daugiau apie „React & Web“ kūrimą, nedvejodami užsiprenumeruokite mano „YouTube“ kanalą.

Ačiū, kad skaitėte!