Komponentide loomine Reactis on oluline oskus, mida ma tahan sulle lähemalt tutvustada. Sa õpid, kuidas luua lihtsaid funktsioonipõhiseid komponente ja millele tähelepanu pöörata. Komponentide mõistmine muudab keeruliste kasutajaliideste arendamise oluliselt lihtsamaks. Alustame kohe!
Peamised teadmised
- Olemas on kaks peamist Reacti komponentide tüüpi: klassipõhised ja funktsioonipõhised.
- Funktsioonipõhised komponendid on lihtsamad ja vähem veakalded.
- JSX-i kasutatakse UI kirjeldamiseks ja kuvamiseks.
- Komponendid peaksid esindama väikseid, taaskasutatavaid osi sinu rakenduses.
Samm-sammuline juhend Reacti komponentide loomiseks
1. Komponentide alused
Reacti komponendi loomiseks pead omama põhiteadmisi JSX-ist ja funktsiooni struktuurist JavaScriptis. Komponent tegelikult on lihtsalt funktsioon, mis tagastab JSX-i. Loo lihtne funktsioonipõhine komponent.
2. Komponendi defineerimine
Saad luua uue komponendi nimega Kom1. Määra kõigepealt see funktsioon failis main.jsx. Funktsioon on alguses tühi, kuna see ei tagasta midagi.
3. Komponendi kasutamine
Nüüd, kui oled defineerinud komponendi, pead otsustama, kuhu soovid seda kasutada. Lihtsalt asenda olemasolev Appi komponent oma uue Kom1 komponendiga.
4. Komponendi tagastusväärtus
Komponendil peaks alati olema tagastusväärtus. Näiteks võid tagastada nulli, mis tähendab, et komponent ei peaks renderdama ning seega ei loo DOM-elemente. See on kasulik, kui sul on ainult teatud tingimused, mille korral midagi renderitakse.
5. Sisu renderdamine
Nähtava sisu tagastamiseks oma komponendis võid kasutada JSX-i.
6. Vead parandamine läbi lehe uuesti laadimise
Kui komponendi testimisel ilmnevad vead, võib olla kasulik leht uuesti laadida, et tagada kõikide muudatuste õige kuvamine. See on eriti oluline Hot Module Reloadingu kasutamisel.
7. Puhta koodi ja nimetuskonventsioonide järgimine
Kui defineerid oma funktsioone, on tavaks suure algustähega kirjutada. See aitab sul eristada tavapäraste HTML elementide ja sinu loodud komponentide vahel.
8. Komponendi liigutamine eraldi faili
Oma koodi struktuuri parandamiseks peaksid Kom1 komponendi liigutama uude faili Comp1.jsx. See muudab su koodi korrektsemaks ning ennetab võimalikke vigu mitmekordsete juurte tekitamisel.
9. Komponendi importimine
Kui oled loonud uue faili, impordi Comp1 komponent oma main.jsx-sse. Veendu, et nimetad komponendi õigesti, et vältida segadusi.
10. Imporditud komponendi kasutamine
Nüüd saad imporditud Comp1 komponenti kasutada oma main.jsx-s. Ükskõik milliseid muudatusi sa Comp1-s teed, rakendus peaks korrektselt renderduma ilma vigadeta.
11. Olekukäitluse määratlemine konksude abil
Interaktiivsete komponentide loomiseks pead aru saama, kuidas kasutada olekut konksude abil. Järgmine põnev funktsioon on State Hook `useState`, mis aitab teil haldada olekut funktsionaalsetes komponentides.
Kokkuvõte
Oled nüüd uurinud funktsionaalsete React komponentide loomise ja kasutamise põhitõdesid. JSX-i kasutamine ja komponentide struktuuri mõistmine on olulised sinu arengus. Taga hea struktuur oma koodile, liigutades komponendid eraldi failidesse. Pea meeles, et konksude kasutamine on oluline osa Reacti arendamisest, eriti kui soovid olekuga töötada.
Korduma kippuvad küsimused
Kuidas luua React komponent?Sa lood React komponendi, defineerides funktsiooni, mis tagastab JSX-i.
Mis vahe on klassipõhistel ja funktsioonipõhistel komponentidel?Funktsioonipõhised komponendid on lihtsamad ja vajavad vähem boilerplate-koodi võrreldes klassipõhiste komponentidega.
Kuidas ma ei tagasta midagi oma komponendist?Tagastades nulli, ei rendita ühtki DOM-elementi.
Mis on JSX?JSX on JavaScripti süntaksi laiendus, mis võimaldab kirjutada HTML-sarnast süntaksit JavaScripti sees.
Miks peaksin komponendid eraldi failidesse liigutama?See parandab teie koodi loetavust ja vähendab vigade riski, nagu näiteks mitu juur-elementi.
