React lietotnes struktūras un izveides pamati

Izpratne par React lietojumprogrammas struktūru ir ļoti svarīga efektīvai izstrādei un programmēšanai. Šajā rokasgrāmatā jūs uzzināsiet, kā React lietotne ir strukturēta un kā to integrēt tīmekļa vietnē. Mēs aplūkosim indeksa HTML faila struktūru, atbilstošo JavaScript failu un JSX un ES6 moduļu pamatjēdzienus.

Galvenie secinājumi

• React lietojumprogrammu avota fails ir index.html.
• React izmanto "saknes mezglu" jēdzienu kā visu komponentu enkuru.
• Lai izveidotu saknes mezglu, kurā tiek atveidoti React elementi, tiek izmantota metode createRoot.
• JSX ir JavaScript sintaktiskais paplašinājums, kas nodrošina HTML līdzīgu sintaksi.
• ES6 moduļi ir svarīgi React koda strukturēšanai.

Soli pa solim

1. Izprotiet index.html

Kad izveidojat React lietojumprogrammu, jūs nevarat izvairīties no index.html faila aplūkošanas. Tas ir jūsu lietotnes koda ievades punkts un ielādē nepieciešamos skriptus. Tipiskā failā jūs redzēsiet div ar ID root. Šis DIV kalpo kā visas React lietojumprogrammas saknes mezgls.

2. Importējiet nepieciešamos moduļus main.jsx failā.

Komponentā main.jsx, kas tiek ielādēts no index.html, ir redzami importētie moduļi. Šeit importējiet React, ReactDOM un, iespējams, CSS. Moduļi ir nepieciešami, lai izveidotu lietojumprogrammu un nodrošinātu, ka jūs varat izmantot labākās pieejamās funkcijas. Pārliecinieties, ka importējat ReactDOM no react-dom/client.

3. izveidojiet saknes mezglu

Tagad jums ir jāizveido React saknes mezgls. Tas tiek darīts, izmantojot metodi createRoot. Jūs to pārnesat uz DOM elementu, ko iepriekš definējāt index.html. Jūs piekļūstat div ar ID root un iniciējat saknes mezglu.

4. Izmantojot render metodi

Pēc saknes mezgla izveides izmantojiet renderēšanas metodi. Šeit jūs nododat JSX elementus, kas ir jāattēlo. JSX izskatās gandrīz kā HTML, taču tas tiek tulkots JavaScript. Piemēram, jūs varat vienkārši atveidot tādu teksta mezglu kā "Hello World".

5. JSX sintakses izpratne

JSX ir JavaScript un HTML sajaukums. Tas nozīmē, ka JavaScript rakstāt HTML līdzīgu kodu. Tas ļauj vienkārši un saprotami veidot lietotāja saskarnes struktūru. Iepriekš minētajā piemērā jūs esat uzrakstījis vienkāršu tekstu divkopā. Tas ir pirmais solis React komponenta izveidē.

6. Uz komponentu balstīta struktūra

Lai strukturētu savu lietotni, ieteicams izmantot komponentes. Tā vietā, lai vienkārši atveidotu HTML, jums vajadzētu izmantot React komponentes, kuras importējat savā lietotnē. Tas ne tikai uzlabo jūsu koda lasāmību, bet arī veicina atkalizmantojamību. Piemēram, ieteicams izveidot lietotnes komponentu un pēc tam to ievietot, izmantojot JSX.

7 DOM un interaktivitātes atjaunināšana

Turpinot, varat pievienot interaktīvus elementus, piemēram, pogas, kas maina vērtības. React nodrošina efektīvu DOM atjaunināšanu, lai atkārtoti tiktu atveidotas tikai nepieciešamās lietotāja saskarnes daļas. Šajā brīdī jūs varat redzēt, kā lietotnes saskarne reaģē, kad lietotāji ar to mijiedarbojas.

8 Programmas komponenta importēšana un atveidošana

Lai gan iepriekšējos piemēros mēs galvenokārt strādājām ar vienkāršu HTML, vienmēr jāatceras, ka lietotāja saskarni ir efektīvāk sadalīt komponentēs. Jūs varat importēt lietotnes komponenti main.jsx un pēc tam ievietot to, izmantojot renderēšanu. Tādējādi jūs ievērosiet React labāko praksi.

Kopsavilkums

Izmantojot iepriekš aprakstītos soļus, jūs esat sapratuši React lietotnes pamatstruktūras un funkcijas. Tagad jūs zināt, kā pareizi izveidot saknes mezglu, izmantot JSX un importēt komponentes. Šīs zināšanas veido stabilu pamatu jūsu ceļojumam React izstrādes pasaulē.