React Projekta pielāgošana
Ja reiz esat atvēris šo rakstu, tad visdrīzāk esat jau apskatijis informāciju par React komponentiem, bet tagad šajā rakstā jūs koncentrēsities uz mācīšanos pielāgot projektu. Jūs uzzināsiet par programmatūras izstrādes pieeju, detalizēti aprakstot atsevišķu saistīto failu izveidi (associated files), prasību apkopošanu un turpmāko izveidojamo mapju struktūru.
Izkārtojuma izveide
Iedomājieties, ka jums ir dots uzdevums izveidot nedaudz sarežģītāku vietnes izkārtojumu, izmantojot React.
Iespējams šobrīd jūs joprojām nezināt pārāk daudz par React darbību, taču pat ar ierobežotām zināšanām jūs joprojām varat izveidot dažus salīdzinoši interesantus dizainus.
Pašlaik kodēšanas emuāram ir jāizveido vienkāršs uz tipogrāfiju vērsts izkārtojums.
Tas nozīmē, ka jums nebūs jāizmanto attēli, kas ievērojami vienkāršo jūsu uzdevumu.
Izkārtojums, kas jums jāizveido, sastāvēs no šādām sadaļām:
- Galvenā navigācija
- Reklāma (galvenā reklāma)
- Jaunāko ziņu priekšskatījumu saraksts (intros)
- Kājene
Koda organizēšana
Paturot prātā iepriekš minēto struktūru, kā jūs sakārtotu savu kodu?
Šeit var palīdzēt React docs. Viņi piedāvā divas pieejas:
- Grupēšana pēc pazīmēm ( by features )
- Grupēšana pēc faila veida ( by file type )
Viņi arī iesaka neievietot mapes pārāk dziļi un padarīt lietas vienkāršas visu nesarežģot bez vajadzības.
Viņi pat iesaka, ka, ja jums tikko sākot darbu, nevajadzētu pavadīt vairāk nekā piecas minūtes, lai izveidotu projektu.
Ņemot vērā šo padomu, jūs varētu teikt, ka tādam nelielam projektam kā šis, viss varētu būt tik pat vienkārši ,kā komponentu mapes pievienošana un visu komponentu pārvietošana tajā. Tas ir tieši tas, ko jūs darīsit tālāk…
Lietotnes izveide
Tā kā šī lietotne koncentrējas uz pielāgošanu, nosauksim lietotnes pielāgošanas piemēru.
Tālāk ir dota komanda palaist piemērotā mapē savā datorā.
Ar “piemērotu mapi” es domāju: “mapi, kurā jūtaties ērti, instalējot lietojumprogrammu React”.
Tas ietver arī to, ka izvēlētajai mapei būs jābūt pieejamai jūsu lietotājam jūsu OS (operētājsistēmā).
- Tātad izveidojam jaunu mapi ērtā vietā;
- Atveram to caur Visual studio code;
- Visual studio code atveram termināli;
- termināli rakstam sekojošu kodu…
npm init react-app aplikacijas-nosaukumsTādējādi tiks izveidota pavisam jauna sākuma lietotne ar pazīstamu struktūru.
Pārbaudot startera lietotnes src mapi, tā izskatās šādi:
src/
App.js
App.test.js
index.css
index.js
logo.svg
reportWebVitals.js
setupTests.jssrc/
komponenti/
App.js
App.test.js
index.css
index.js
logo.svg
reportWebVitals.js
setupTests.jssrc/
komponenti/
Nav.js
Promo.js
Intro1.js
Intro2.js
Intro3.js
Footer.js
App.js
App.test.js
index.css
index.js
logo.svg
reportWebVitals.js
setupTests.jsŠajā brīdī nav nepieciešams visu sarežģīt. Jums ir komponents Nav, Promo komponents, Intro1, Intro2 un Intro3 komponents. Visbeidzot, ir arī Footer.js komponents.
Tas nozīmē, ka esat pilnībā izplānojis lietotni, pamatojoties uz dažiem paraugprakses veidiem, kā ieteikts oficiālajā React docs vietnē, un pamatojoties uz paša projekta sarežģītības līmeni. Tā kā šis projekts ir salīdzinoši vienkāršs, šī struktūra būs pamatā pareiza.
Šajā rakstā jūs vienkārši izveidosiet visus komponentus komponentu mapē un pēc tam nākamajos rakstos parādīšu, kā importēt tos failā App.js.
“Būves” pamati un sastāvdaļas
Pagaidām veidosim tikai šīs sastāvdaļas. Pēc komponentu mapes pievienošanas esat pievienojis arī visus funkcionālo komponentu failus. Tā kā tie visi pašlaik ir tukši, varat sākt tos pievienot pa vienam.
Lūk, faila Nav.js saturs:
function Nav() {
return (
<nav className="main-nav">
<ul>
<li>Sākums</li>
<li>Raksti</li>
<li>Par mums</li>
<li>Kontakti</li>
</ul>
</nav>
);
};
export default Nav;function Promo() {
return (
<div className="promo-section">
<div>
<h1>Nepalaid garām mūsu piedāvājumu!</h1>
</div>
<div>
<h2>Pieraksties jaunumiem un saņem līdz pat 50% atlaidi!</h2>
</div>
</div>
);
};
export default Promo;Kad esat pabeidzis reklāmas sadaļu, varat koncentrēties uz ievada komponentiem.
Šeit ir Intro1.js:
function Intro1() {
return (
<div className="blog-post-intro">
<h2>Es kļuvu par React izstrādātāju!</h2>
<div>
<p>Esmu pabeidzis studēt React kursus un kļuvis par jauno react izstrādātāju</p>
<p className="link">Lasīt rakstu...</p>
</div>
</div>
);
};
export default Intro1;function Intro2() {
return (
<div className="blog-post-intro">
<h2>Kādēļ es izvēlējos Front-End web izstrādātāja profesiju?</h2>
<div>
<p>Šajā bloga ierakstā, es nosaukšu 10 iemeslus, kāpēc es izvēlējos šo profesiju</p>
<p className="link">Lasīt rakstu...</p>
</div>
</div>
);
};
export default Intro2;function Intro3() {
return (
<div className="blog-post-intro">
<h2>Kāds ir labākais React stilu izveidošanas veids?</h2>
<div>
<p>Šeit ir daudz opciju, no kurām izvēlēties. Apskatīsim labākos un ierastākos veidus no dažiem.</p>
<p className="link">Lasīt rakstu...</p>
</div>
</div>
);
};
export default Intro3;function Footer() {
return (
<div className="copyright">
<p>Izveidots pateicoties kas.id.lv @QvarcY</p>
</div>
);
};
export default Footer;Tagad, kad esat pabeidzis visus lietotnes komponentus, šeit ir vēl dažas interesantas lietas par sintaksi.
Šie ir:
- Atribūta className izmantošana JSX
- Atsevišķu komponentu izmantošana atkārtotam kodam
- Kur ir visi rekvizīti props ?
- Kāpēc es neizmantoju <a> elementu tukšām saitēm?
Sintakses apspriešana
Tagad īsi apspriedīsim četrus iepriekš minētos aizzīmju punktus.
Kāpēc JSX sintaksē izmantot atribūtu className?
Ar JSX tas tik ļoti izskatās pēc HTML, ka ir viegli aizmirst, ka tas patiesībā ir JavaScript kods, nevis HTML.
Lai gan parastajam HTML patiešām ir klases atribūts, kas tiek izmantots, lai uzskaitītu vienu vai vairākas CSS klases, kas izmantojamas konkrētajā HTML elementā, tas nevar īsti darboties JSX. Iemesls ir tāds, ka JSX ir īpašs JavaScript sintakses veids, un vārds klase (class) šajā gadījumā nevar izmantot, jo tas jau ir rezervēts atslēgvārds JSX. Tāpēc React komandai bija jāpieņem kompromiss un ši iemesla dēļ JSX tiek izmantots className, lai uzskaitītu vienu vai vairākas CSS klases, kas jāizmanto konkrētam elementam vai komponentam.
Bet kāpēc izmantot Intro1.js, Intro2.js un Intro3.js? Vai viens no kodēšanas principiem nav DRY pieeja (Don’t Repeat Yourself)- tas ir, pieeja “Neatkārtojies”?
Patiešām, tā ir. Tomēr joprojām ir daži jēdzieni, kas jāapspriež, pirms iemācāties atkārtoti izmantot vienu komponentu ar tā satura variācijām. Tas ir saistīts ar datiem komponentos, taču neuztraucieties, mēs to aplūkosim citā rakstā.
Trešais jautājums ir par rekvizītu objektu props. Tas parasti ir minēts iepriekš visur, bet līdz šim tas nav izmantots. Tas nav izmantots arī šajā piemērā.
Atbilde uz šo jautājumu ir saistīta ar nākamo rakstu ar nosaukumu Komponentu izmantošana React un stils.(visdrīzāk, es to tā arī nosaukšu) rakstā praktiski redzēsiet, kā uzlabot komponentu darbību, izmantojot rekvizītus.
Pēdējais jautājums ir par elementa <a> neizmantošanu tukšām saitēm lietotnē.
Atbilde šeit ir atkarīga no tā, vai šīs saites ir “iekšējās” — lietotnē vai “ārējas”, kas nozīmē, ka tās ved uz kādu ārēju saiti, piemēram, https://www.youtube.com Ja saites ir lietotnes iekšpuses — kā tas ir paredzēts šeit — taga <a> izmantošana vienkārši nav React darbības veids. Jūs uzzināsiet, kāpēc tas tā ir, apspriežot React Router lietošanu.
Secinājums
Pabeidzot šo rakstu, jūs tagad esat uzzinājis par programmatūras izstrādes pieeju, detalizēti aprakstot atsevišķu saistīto failu izveidi, prasību apkopošanu un turpmāko izveidojamo mapju struktūru.
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.