Reacționează cursul de prăbușire pentru începători, partea a 2-a

În prima parte a acestei serii de tutori am folosit Create-reacționează aplicație instrument pentru a crea o aplicație pentru exemplul de lucru ca punct de pornire pentru aplicația noastră de galerie "Movie Mojo".

În partea a doua, vom aborda adăugarea primei componente personalizate pentru a afișa carduri individuale de film. Vom vedea, de asemenea, cum folosirea elementelor de recuzită ne permite să personalizăm aspectul componentelor prin transmiterea datelor mai degrabă decât prin codarea greu a acestora.

Acest lucru demonstrează flexibilitatea și reutilizarea componentelor și modul în care pot fi folosite ca module de construcție puternice în aplicațiile dvs. React.

Prima noastră componentă

OK, să creăm o componentă! Pentru a începe, vom păstra lucrurile destul de simple și vom refactorul antetului HTML în componenta proprie.

Reacțiile moderne de reacție recomandă separarea fiecărei componente din aplicația dvs. într-un fișier separat. Vom urmări acest principiu și în proiectele dvs. / src / componente / folder, creați un fișier nou numit Header.js și deschideți-l într-un editor de text.

În partea de sus a fișierelor componente, începem întotdeauna prin importul bibliotecilor necesare, al altor componente (cum putem asambla componente) și a unor elemente suplimentare de care avem nevoie (de exemplu, stiluri). import declarația face parte din ES6 și ne permite să păstrăm proiectele noastre extrem de modulare.

Pentru noi

componentă, trebuie să importem doar biblioteca React, pe care o putem face cu această afirmație:

import React, Component de la "reacție";

Aceasta importă întreaga bibliotecă React și o face disponibilă prin Reacţiona variabil. De asemenea, importă component obiect direct, astfel încât să îl putem folosi fără a fi nevoit să îl calificăm în mod special cu un precedent Reacţiona. referință obiect.

Cu alte cuvinte, dacă nu am importat în mod explicit component obiect atunci ar trebui să-l accesăm după cum urmează:

React.Component

Dar pentru că am importat component direct, o putem folosi singură, fără a face referire la Reacţiona variabil. Nu contează care dintre ele este folosită și este doar preferată.

Apoi, pentru a crea efectiv componenta, extindem component obiect de a crea o clasă nouă care definește noastre

componentă. După import declarație, tip:

clasa Header extinde Component  export implicit App;

Aici, folosim o clasă ES6 ca container pentru componente. Clasele reprezintă o modalitate excelentă de a încapsula întregul cod necesar pentru a descrie componenta dvs..

S-ar putea să fi observat, de asemenea, că fișierul component se termină cu o declarație de export. Acest lucru, după cum vă puteți aștepta, va exporta componenta noastră și o va pune la dispoziția altor fișiere din proiectul nostru.

La minim, toate componentele React sunt obligate să aibă o metodă de randare, care returnează o anumită marcare. Aceasta ar putea fi HTML, alte componente React sau un amestec de ambele.

Adăugați acest lucru în interiorul clasei componente:

render () return React.createElement ('div', null, 'Buna ziua, aceasta este o componenta React!');

React.createElement () metoda creează un element HTML (a

în acest caz) și adaugă un anumit conținut la acesta. Salvați modificările la Header.js și se deschide App.js.

Pentru a folosi o componentă React în interiorul unei alte componente, trebuie mai întâi să o importăm, deci adăugați-o la lista declarațiilor de import din partea de sus a App.js:

importați antetul de la "./Header";

Rețineți cum nu trebuie să adăugați .js extinderea fișierului așa cum se presupune. De asemenea, pentru că

componenta este în același folder ca și al nostru nu trebuie să specificăm calea completă.

De fapt, dacă încercați să utilizați importați antetul de la "./components/Header"; din interior App.js, veți obține o eroare de compilare.

Acum putem adăuga

componentă în declarația de returnare la fel ca orice element HTML. Cu toate acestea, există o avertizare. Poti numai returnați un element de nivel superior într-o metodă de returnare a componentelor.

Deci acest lucru nu este permis:

render () return ( 
 
 );

Dacă doriți să returnați mai multe elemente, atunci trebuie să le înfășurați toate într-un singur element de înfășurare:

render () return (  
 
 
 );

Deci, asigurați-vă că adăugați

componentă în interiorul

pentru a evita erorile.

clasa App extinde Component render () return (    Descoperă-ți filmul Mojo!
 
  Bine ați venit în aplicația "Movie Mojo" React! 
 
 );

Acest lucru va duce la noi

componenta fiind redată.

Pentru a finaliza

, vom elimina următorul bloc de cod HTML App.js și adăugați-l la Header.js.

 Descoperă-ți filmul Mojo!

Cu toate acestea, s-ar putea să fi observat că există o problemă. În App.js componenta rendering metoda returneaza ceea ce arata ca HTML. Cu toate acestea, în Header.js există doar un singur apel React.createElement (). Ce se întâmplă?

Răspunsul este JSX. În App.js folosim JSX pentru a scrie sintaxa asemănătoare HTML pentru a defini ieșirea componentelor noastre. Comparați acest aspect cu definiția noastră pentru componente Header.js.

React.createElement ('div', null, 'Buna ziua, aceasta este o componenta React!');

Acesta este modul în care trebuie să scriem componentele React fără JSX. De fapt, sub capotă, acesta este modul în care JSX este compilat înainte de a putea fi redat la browser.

Nu vi se cere să utilizați JSX deloc pentru componentele dvs. React; depinde în întregime de dvs. Dar aproape toate componentele pe care le veți întâlni vor fi scrise în JSX pentru că este mult mai ușor de scris.

Este, de asemenea, foarte ușor de citit pentru alții să vă dea codul. Imaginați-vă că trebuie să studiați un proiect React care conține zeci de componente diferite, scrise în JavaScript simplu!

Prin urmare, nu ar trebui să ne surprindă faptul că vom folosi JSX pentru definirea componentelor în restul seriei tutorial.

Mergeți și înlocuiți React.createElement () apel cu echivalentul JSX de la care am copiat App.js. Ta Header.js fișierul ar trebui să arate astfel:

import React, Component de la "reacție"; class Header extinde Component render () return (  Descoperă-ți filmul Mojo!
 
 );  export default Header;

În timp ce JSX ne permite mult mai multă flexibilitate în scrierea componentelor noastre, rețineți că nu este un HTML real pe care îl scriem, ci o abstractizare a acestuia.

Puteți vedea acest lucru în fragmentul de cod de mai sus. Observați în

eticheta pe care am folosit-o numele clasei Decat clasă pentru a indica unde vrem să declarăm o clasă CSS? Acest lucru se datorează faptului că toate JSX-ul este compilat până la JavaScript pur, și clasă este un cuvânt rezervat în ES6 JavaScript.

De asemenea, să tweak stilurile antetului. Deschis App.css și editați .App-header Clasa CSS a fost:

.App-header fundal-color: steelblue; înălțime: 70px; padding: 20px; culoare albă;

Aceasta actualizează culoarea de fundal a antetului și reduce înălțimea.

Componente de recuzită

Până acum, ale noastre

componenta este statică. Aceasta înseamnă că afișează conținut fix care nu se schimbă niciodată. Dar componentele pot fi făcute dinamice, iar conținutul de afișare poate fi introdus în ele prin recuzita de componente. Acest lucru face ca componentele să devină mult mai utile, deoarece devin generice și reutilizabile.

Gândiți-vă la elemente de recuzită a componentelor similare cu etichetele HTML. De exemplu, a

tagul poate avea atribute pentru id, clasă, stil și așa mai departe, care ne permit să atribuim valori unice pentru acel specific

element.

Putem face același lucru și pentru componentele React. Spuneți că nu dorim ca antetul nostru să trimită textul fix "Descoperă-ți filmul Mojo!" tot timpul. Nu ar fi mai bine dacă antetul nostru ar putea afișa orice text?

Spre deosebire de atributele HTML, putem numi elemente de recuzită a componentelor noastre, indiferent de ce ne place. Interior App.js, actualizați

eticheta care urmează să fie:

Apoi, actualizați

component pentru a utiliza text sprijini.

 This.props.text

Rezultă că antetul nostru afișează orice text este adăugat la text prop App.js.

Să aruncăm o privire mai atentă la modul în care ne-am referit text în interior Header.js folosind:

This.props.text

Asamblările curly spun pur și simplu JSX că avem niște JavaScript pe care vrem să le evaluăm. Acest lucru îl deosebește de text. Dacă nu am folosit nici un bretele curat, șirul literal this.props.text ar fi produs, ceea ce nu este ceea ce dorim.

acest cuvântul cheie se referă la Antet clasa de componente și recuzită este un obiect care conține toate valorile trecute de la

. În cazul nostru, recuzită obiect conține doar o singură intrare, dar puteți adăuga cât de mult vă place în practică.

Al nostru

componenta este acum mult mai generică și nu conține un șir de coduri greu. Aceasta este o bună practică atunci când scrieți componentele React. Cu cât le generați mai generic, cu atât sunt mai reutilizabile.

Aceasta este o veste bună atunci când dezvoltați aplicații React viitoare, deoarece puteți reutiliza componente din proiectele anterioare, deci nu trebuie să scrieți nimic de la zero.

Am folosit popiri de mai sus pentru a transmite o șir fixă în

componentă, dar și elemente de recuzită pot trece variabilele, referințele funcțiilor și componentele.

Pentru a trimite o variabilă prin recuzită, am putea face așa ceva, unde antet este o variabilă:

Inspectarea componentelor reactive

Există un instrument foarte util disponibil pentru browserul Chrome, care vă permite să examinați informații despre aplicația dvs. React.

Instrumentele de dezvoltator implicite vă permit numai vizualizarea elementelor HTML normale, însă cu extensia Tools React Developer instalată, puteți naviga prin toate componentele React din aplicația dvs..

Odată ce este instalat, deschideți instrumentele de inspector de browser și faceți clic pe noul disponibil Reacţiona tab. Observați că în loc de elementele HTML, veți vedea ierarhia componentelor React din aplicația dvs. Faceți clic pe pentru a le selecta.

Odată selectată, informațiile despre o componentă sunt afișate în fereastra din dreapta. componenta nu are nici o recuzită și astfel fereastra este goală. Dar dacă selectați

componentă interioară atunci veți vedea textul "text" în care am trecut.

Instrumentele pentru dezvoltatori React sunt foarte utile pentru depanare, mai ales atunci când ajungeți la dezvoltarea unor aplicații React mai complexe, deci merită să vă obișnuiți să le folosiți pentru aplicații mai simple.

De asemenea, puteți utiliza instrumentele React dezvoltator pentru a inspecta starea aplicației, la care vom ajunge în următorul tutorial.

Concluzie

În acest tutorial ați învățat cum să împărțiți aplicația în componente separate pentru ao face mai modulară. Componentele de recuzită vă permit să transmiteți valori componentelor individuale, similar cu modul în care adăugați atribute elementelor HTML.

De asemenea, am văzut cum să folosim noi instrumente de inspectori pentru a examina componentele și datele de recuzită.

În partea a 3-a, vom adăuga statul în aplicația noastră pentru a ne ajuta să gestionăm mai eficient datele noastre.

Cod

Reacționează cursul de prăbușire pentru începători, partea a 3-a

Reacționează cursul de crash pentru începători, partea 1