Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

„React“ yra viena iš populiariausių „JavaScript“ bibliotekų. Daugelis įmonių naudoja „React“ savo vartotojo sąsajoms kurti ir ji sulaukė didelio populiarumo tarp kūrėjų.

Su React nesunku sukurti paprastą programą, tokią kaip ši pagrindinė skaitiklio programa. Pradėję nuo paprastos pamokos, galėsite suprasti kai kurias pagrindines, bet svarbias „React“ sąvokas.

„Counter App“ ypatybės

Šiame projekte ketinate sukurti skaitiklio programą su šiomis funkcijomis:

  1. Mygtukas Padidinti skaičių: Tai padidins skaičių vienu.
  2. Mygtukas Sumažinti skaičių: Tai sumažins skaičių vienu.
  3. Perkrovimo mygtukas: Taip skaičius bus nustatytas į nulį.

Pagrindinės reakcijos sąvokos

Prieš eidami į priekį, turite suprasti kai kurias iš šių pagrindinių „React“ sąvokų, kurias naudosite šiame projekte:

  1. Komponentai: komponentai yra pagrindiniai „React“ programų blokai. Juose yra nepriklausomas, daugkartinio naudojimo kodas. Naudodami komponentus galite padalinti vartotojo sąsają į atskiras dalis. Tada galite pakartotinai naudoti tas dalis ir dirbti su jomis savarankiškai.
    instagram viewer
  2. valstybė: React galite naudoti objektą duomenims, atspindintiems komponento būseną, saugoti. Tai leidžia komponentams valdyti ir atnaujinti savo duomenis. Komponento būsena lemia, kaip jis atvaizduojamas ir veikia.
  3. Funkciniai komponentai: „React“ funkcinis komponentas yra tiesiog „JavaScript“ funkcija, kuri priima rekvizitus kaip argumentą ir grąžina „React“ elementą (JSX).
  4. Rekvizitas: Norėdami perduoti duomenis iš pirminio komponento į antrinį komponentą, galite naudoti rekvizitus (ypatybių santrumpa). Rekvizitai yra viena iš neatskiriamų „React“ dalių ir jūs galite naudokite rekvizitus, kad atliktumėte keletą „React“ operacijų.
  5. Kabliukai: „React Hooks“ yra įmontuotos funkcijos kurios leidžia valdyti būseną ir kitas „React“ funkcijas, pvz., gyvavimo ciklo metodus funkciniuose komponentuose. Jie taip pat gali padėti jums parašyti glaustą ir aiškų kodą. Netrukus pamatysite, kaip galite valdyti būseną naudodami useState() kabliukas.

Šiame projekte naudojamas kodas yra a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją.

1 veiksmas: projekto nustatymas

Atidarykite terminalą ir paleiskite šią komandą, kad pradėtumėte:

npx sukurti-react-app react-counter-app

Tai bus sukurti naują reagavimo programą, pasiruošę pradėti kurti savo projektą. Jis sukurs failų sistemos struktūrą su keliais failais ir aplankais.

Paleiskite šią komandą terminale, kad paleistumėte kūrimo serverį:

npm pradėti

Ši komanda turėtų atidaryti naują skirtuką jūsų naršyklėje, nurodydama http://localhost: 3000. Visi projekto pakeitimai, kuriuos atliksite, bus automatiškai atnaujinti čia.

2 veiksmas: sukurkite skaitiklio programos skeletą

Atidaryk src/App.js failą ir ištrinkite visą ten esantį numatytąjį kodą. Dabar sukurkite programos skeletą naudodami šį kodą:

importuoti Reaguoti, { useState } iš"reaguoti";
funkcijaProgramėlė() {
konst [count, setCount] = useState(0);
leisti incrementCount = () => {
// Norėdami pridėti vėliau
 };
leisti decrementCount = () => {
// Norėdami pridėti vėliau
 };
leisti ResetCount = () => {
// Norėdami pridėti vėliau
 }


grąžinti (
<divklasės pavadinimas="programėlė">
<p>Skaičius: {count}p>
<divklasės pavadinimas="mygtukai">
div>
div>
);
}
eksportuotinumatytas Programėlė;

Pirmasis teiginys importuoja useState kablys nuo reaguoti modulis. Naudokite jį norėdami sukurti skaičiuoti būseną ir inicijuokite ją į 0. Galite pakeisti vertę skaičiuoti naudojant setCount funkcija.

Jūs naudosite incrementCount, decrementCount, ir ResetCount vėliau veikia, kad padidintų, sumažintų ir iš naujo nustatytų skaitiklio vertę.

Galite pastebėti, kad žymėjime aplink skaičiaus kintamąjį naudojami riestiniai skliaustai { }. Tai iš esmės leidžia JSX analizatoriui žinoti, kad tuose skliaustuose esantį turinį jis turėtų traktuoti kaip „JavaScript“.

3 veiksmas: pridėkite funkcionalumą prie skaitiklio programos

Turite sukurti tris mygtukus, kad įdiegtumėte skaitiklio programos funkcijas: skaičiavimo mažinimo mygtuką, skaičiavimo didinimo mygtuką ir nustatymo iš naujo mygtuką. Įtraukite šį kodą viduje mygtukai div:

<Mygtukastitulą={"Sumažėjimas"} veiksmas={decrementCount} />
<Mygtukastitulą={"Prieaugis"} veiksmas={incrementCount} />
<Mygtukastitulą={"Nustatyti iš naujo"} veiksmas={resetCount} />

Kai spustelėsite šiuos mygtukus, decrementCount, incrementCount, ir ResetCount funkcijos veiks. Atkreipkite dėmesį, kad praeinate titulą ir veiksmas rekvizitas iš tėvų Programėlė komponentas vaikui Mygtukas komponentas.

Atnaujinkite šias funkcijas App.js failą su tokiu kodu:

leisti incrementCount = () => {
 setCount (skaičiuoti + 1);
};
leisti decrementCount = () => {
 setCount (skaičius - 1);
};
leisti ResetCount = () => {
 setCount (0);
}

The setCount funkcija atnaujins būseną skaičiuoti.

Atminkite, kad dar nesukūrėte mygtuko komponento. Sukurti naują komponentai aplanke esančiame src katalogą, tada sukurkite naują failą pavadinimu Button.js. Gera praktika visus komponentus laikyti tame pačiame aplanke.

Pridėkite šį kodą komponentai/Button.js failas:

importuoti Reaguoti iš"reaguoti";
funkcijaMygtukas(rekvizitai) {
leisti {veiksmas, pavadinimas} = rekvizitai;
grąžinti<mygtukąpaspaudus={veiksmas}>{title}mygtuką>;
}
eksportuotinumatytas Mygtukas;

The Mygtukas komponentas gauna duomenis per rekvizitus. Tada funkcija šiuos rekvizitus suskirsto į atskirus kintamuosius, naudodama juos grąžinamam žymėjimui užpildyti.

Kodas pakartotinai naudoja šį komponentą tris kartus, kad sukurtų padidinimo, mažinimo ir atstatymo mygtukus.

Galiausiai importuokite mygtuko komponentą, esantį viršuje App.js puslapis naudojant šį kodą:

importuoti Mygtukas iš"./components/Botton";

Taip atrodys galutinis kodas App.js failas:

importuoti Reaguoti, { useState } iš"reaguoti";
importuoti Mygtukas iš"./components/Button";
funkcijaProgramėlė() {
konst [count, setCount] = useState(0);


leisti incrementCount = () => {
 setCount (skaičiuoti + 1);
 };


leisti decrementCount = () => {
 setCount (skaičius - 1);
 };


leisti ResetCount = () => {
 setCount (0);
 }


grąžinti (
<divklasės pavadinimas="programėlė">
<p>Skaičius: {count}p>
<divklasės pavadinimas="mygtukai">
<Mygtukastitulą={"Sumažėjimas"} veiksmas={decrementCount} />
<Mygtukastitulą={"Prieaugis"} veiksmas={incrementCount} />
<Mygtukastitulą={"Nustatyti iš naujo"} veiksmas={resetCount} />
div>
div>
 );
}
eksportuotinumatytas Programėlė;

Laikykitės geriausios reakcijos praktikos

„React“ kodą galite rašyti įvairiais būdais, tačiau svarbu jį susisteminti kuo tiksliau. Tai užtikrins, kad galėsite lengvai ją prižiūrėti ir padės pagerinti bendrą programos našumą.

Galite laikytis kelių „React“ bendruomenės rekomenduojamų „React“ praktikų, pavyzdžiui, vengti pasikartojančio kodo, rašyti kiekvieno „React“ komponento testus, naudojant objektų naikinimą rekvizitais ir sekantį pavadinimų suteikimą konvencijos.