Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

React on üks populaarsemaid esiotsa JavaScripti teeke. Paljud ettevõtted kasutavad Reacti oma kasutajaliideste arendamiseks ja see on saavutanud arendajate seas laialdase populaarsuse.

Reactiga on lihtne luua lihtsat programmi, nagu see tavaline loendurirakendus. Arusaadava õpetusega alustamine aitab teil mõista mõningaid Reacti põhilisi, kuid olulisi kontseptsioone.

Rakenduse Counter funktsioonid

Selles projektis töötate välja loendurirakenduse, millel on järgmised funktsioonid:

  1. Loenduse suurendamise nupp: See suurendab arvu ühe võrra.
  2. Nupp Loenduse vähendamise nupp: See vähendab loendust ühe võrra.
  3. Reset-nupp: see seab loenduse nulli.

Reaktsiooni põhimõisted

Enne edasiliikumist peate mõistma mõnda neist Reacti põhikontseptsioonidest, mida selles projektis kasutate:

  1. Komponendid: komponendid on Reacti rakenduste peamised ehitusplokid. Need sisaldavad sõltumatut korduvkasutatavat koodi. Komponentide abil saate kasutajaliidese jagada eraldi osadeks. Seejärel saate neid osi uuesti kasutada ja nendega iseseisvalt töötada.
    instagram viewer
  2. osariik: Reactis saate kasutada objekti komponendi olekut kajastavate andmete salvestamiseks. See võimaldab komponentidel oma andmeid hallata ja värskendada. Komponendi olek määrab, kuidas see renderdub ja käitub.
  3. Funktsionaalsed komponendid: Reacti funktsionaalne komponent on lihtsalt JavaScripti funktsioon, mis aktsepteerib argumendina rekvisiite ja tagastab Reacti elemendi (JSX).
  4. Rekvisiidid: saate kasutada rekvisiite (lühend sõnadest "omadused"), et edastada andmeid ülemkomponendist alamkomponendile. Rekvisiidid on üks Reacti lahutamatutest osadest ja saate seda teha kasutage Reactis mitme toimingu tegemiseks rekvisiite.
  5. Konksud: React Hooks on sisseehitatud funktsioonid mis võimaldavad teil hallata olekut ja muid Reacti funktsioone, näiteks elutsükli meetodeid funktsionaalsete komponentide sees. Samuti võivad need aidata teil kirjutada lühikest ja selget koodi. Peagi näete, kuidas saate olekut rakendusega hallata useState() konks.

Selles projektis kasutatav kood on saadaval a GitHubi hoidla ja seda saate MIT-i litsentsi alusel tasuta kasutada.

1. samm: projekti seadistamine

Alustamiseks avage oma terminal ja käivitage järgmine käsk:

npx luua-reageerida-rakendus reageeri-vasturakendus

See tahe looge uus reageerimisrakendus, mis on valmis teie projekti koostamiseks alustama. See loob mitme faili ja kaustaga failisüsteemi struktuuri.

Arendusserveri käivitamiseks käivitage terminalis järgmine käsk:

npm alustada

See käsk peaks avama teie brauseris uue vahelehe, osutades sellele http://localhost: 3000. Kõik projektis tehtavad muudatused värskendatakse siin automaatselt.

2. samm: loendurirakenduse skeleti loomine

Ava src/App.js faili ja kustutage kogu seal olev vaikimisi kood. Nüüd looge järgmise koodi abil rakenduse skelett:

importida Reageerige, { useState } alates"reageerida";
funktsiooniRakendus() {
konst [count, setCount] = useState(0);
lase incrementCount = () => {
// Hiljem lisamiseks
 };
lase decrementCount = () => {
// Hiljem lisamiseks
 };
lase resetCount = () => {
// Hiljem lisamiseks
 }


tagasi (
<divklassi nimi="rakendus">
<lk>Arv: {count}lk>
<divklassi nimi="nupud">
div>
div>
);
}
eksportidavaikimisi Rakendus;

Esimene väide impordib useState konks reageerida moodul. Kasutage seda loomiseks loendama olek ja lähtestage see 0-ks. Saate väärtust muuta loendama kasutades setCount funktsiooni.

Sa kasutad incrementCount, decrementCountja resetCount toimib hiljem loenduri väärtuse suurendamiseks, vähendamiseks ja lähtestamiseks.

Võite märgata, et märgistuses loendusmuutuja ümber on kasutatud lokkis sulgusid { }. See annab sisuliselt JSX-i parserile teada, et ta peaks käsitlema nende sulgudes olevat sisu JavaScriptina.

3. toiming: lisage loendurirakendusele funktsionaalsus

Loendurrakenduse funktsioonide rakendamiseks peate looma kolm nuppu: loenduri vähendamise nupp, loenduri suurendamise nupp ja lähtestamise nupp. Lisage sisestesse järgmine kood nupud div:

<Nupppealkiri={"Vähendamine"} tegevust={decrementCount} />
<Nupppealkiri={"Kasv"} tegevust={incrementCount} />
<Nupppealkiri={"Lähtesta"} tegevust={resetCount} />

Kui klõpsate neid nuppe, kuvatakse decrementCount, incrementCountja resetCount funktsioonid hakkavad tööle. Pange tähele, et möödute pealkiri ja tegevust rekvisiidid vanemalt Rakendus komponent lapsele Nupp komponent.

Värskendage neid funktsioone jaotises App.js faili järgmise koodiga:

lase incrementCount = () => {
 setCount (count + 1);
};
lase decrementCount = () => {
 setCount (count - 1);
};
lase resetCount = () => {
 setCount (0);
}

The setCount funktsioon värskendab olekut loendama.

Pange tähele, et te pole veel nuppu Button loonud. Loo uus komponendid kaustas src kataloogi ja seejärel looge uus fail nimega Button.js. Hea tava on hoida kõiki komponente samas kaustas.

Lisage jaotisesse järgmine kood komponendid/Button.js fail:

importida Reageerige alates"reageerida";
funktsiooniNupp(rekvisiidid) {
lase { tegevus, pealkiri } = rekvisiidid;
tagasi<nuppuonClick={action}>{title}nuppu>;
}
eksportidavaikimisi Nupp;

The Nupp komponent saab andmeid rekvisiitide kaudu. Funktsioon dsestrueerib need rekvisiidid eraldi muutujateks, kasutades neid tagastatava märgistuse sisestamiseks.

Kood kasutab seda komponenti kolm korda suurendamise, vähendamise ja lähtestamise nuppude loomiseks.

Lõpuks importige nupu ülaosas olev komponent App.js leht kasutades järgmist koodi:

importida Nupp alates"./components/Botton";

Nii näeb lõplik kood välja App.js fail:

importida Reageerige, { useState } alates"reageerida";
importida Nupp alates"./components/Button";
funktsiooniRakendus() {
konst [count, setCount] = useState(0);


lase incrementCount = () => {
 setCount (count + 1);
 };


lase decrementCount = () => {
 setCount (count - 1);
 };


lase resetCount = () => {
 setCount (0);
 }


tagasi (
<divklassi nimi="rakendus">
<lk>Arv: {count}lk>
<divklassi nimi="nupud">
<Nupppealkiri={"Vähendamine"} tegevust={decrementCount} />
<Nupppealkiri={"Kasv"} tegevust={incrementCount} />
<Nupppealkiri={"Lähtesta"} tegevust={resetCount} />
div>
div>
 );
}
eksportidavaikimisi Rakendus;

Järgige reageerimise parimaid tavasid

Reacti koodi saab kirjutada erineval viisil, kuid oluline on selle võimalikult selge ülesehitus. See tagab, et saate seda hõlpsalt hooldada ja võib aidata parandada teie rakenduse üldist jõudlust.

Võite järgida mitmeid Reacti kogukonna soovitatud Reacti tavasid, nagu korduva koodi vältimine, testide kirjutamine iga Reacti komponendi jaoks, kasutades objektide destruktureerimist rekvisiitide jaoks ja järgides nimetamist konventsioonid.