Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

React on yksi suosituimmista käyttöliittymän JavaScript-kirjastoista. Monet yritykset käyttävät Reactia käyttöliittymiensä kehittämiseen ja se on saavuttanut laajan suosion kehittäjien keskuudessa.

Reactilla on helppo rakentaa yksinkertainen ohjelma, kuten tämä peruslaskurisovellus. Suoraviivaisesta opetusohjelmasta aloittaminen auttaa sinua ymmärtämään joitain Reactin peruskäsitteitä, mutta tärkeitä.

Counter-sovelluksen ominaisuudet

Tässä projektissa aiot kehittää laskurisovelluksen, jossa on seuraavat ominaisuudet:

  1. Lisää laskentaa -painike: Tämä lisää määrää yhdellä.
  2. Laskea -painike: Tämä vähentää määrää yhdellä.
  3. Nollaus painike: Tämä asettaa luvun nollaan.

Reaktion peruskäsitteet

Ennen kuin jatkat eteenpäin, sinun on ymmärrettävä joitain näistä Reactin peruskäsitteistä, joita tulet käyttämään tässä projektissa:

  1. Komponentit: Komponentit ovat React-sovellusten ydinrakennuspalikoita. Ne sisältävät itsenäisen, uudelleen käytettävän koodin. Komponenttien avulla voit jakaa käyttöliittymän erillisiin osiin. Voit sitten käyttää näitä osia uudelleen ja työskennellä niiden kanssa itsenäisesti.
    instagram viewer
  2. Osavaltio: Reactissa voit käyttää objektia komponentin tilaa kuvaavien tietojen tallentamiseen. Näin komponentit voivat hallita ja päivittää omia tietojaan. Komponentin tila määrittää, kuinka se renderöi ja käyttäytyy.
  3. Toiminnalliset komponentit: Reactin funktionaalinen komponentti on yksinkertaisesti JavaScript-funktio, joka hyväksyy rekvisiitta argumenttina ja palauttaa React-elementin (JSX).
  4. Rekvisiitta: Voit käyttää rekvisiitta - lyhenne sanoista "ominaisuudet" - siirtääksesi tietoja pääkomponentista alakomponenttiin. Rekvisiitta on yksi Reactin olennaisista osista, ja voit käytä rekvisiittaa suorittaaksesi useita toimintoja Reactissa.
  5. Koukut: React Hooks ovat sisäänrakennettuja toimintoja joiden avulla voit hallita tila- ja muita React-ominaisuuksia, kuten elinkaarimenetelmiä toiminnallisten komponenttien sisällä. Ne voivat myös auttaa sinua kirjoittamaan tiiviin ja selkeän koodin. Pian näet, kuinka voit hallita tilaa useState() koukku.

Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.

Vaihe 1: Projektin määrittäminen

Avaa terminaali ja suorita seuraava komento aloittaaksesi:

npx luoda-react-app react-counter-app

Tämä tulee luo uusi reagointisovellus, valmiina aloittamaan projektin rakentamisen. Se luo tiedostojärjestelmärakenteen, jossa on useita tiedostoja ja kansioita.

Käynnistä kehityspalvelin suorittamalla seuraava komento päätteessä:

npm alkaa

Tämän komennon pitäisi avata selaimessasi uusi välilehti, joka osoittaa http://localhost: 3000. Kaikki projektiin tekemäsi muutokset päivitetään automaattisesti tänne.

Vaihe 2: Counter-sovelluksen luurankon luominen

Avaa src/App.js tiedosto ja poista kaikki siellä oleva oletuskoodi. Luo nyt sovelluksen luuranko käyttämällä seuraavaa koodia:

tuonti Reagoi, { useState } alkaen"reagoi";
toimintoSovellus() {
konst [count, setCount] = useState(0);
antaa incrementCount = () => {
// Lisätään myöhemmin
 };
antaa decrementCount = () => {
// Lisätään myöhemmin
 };
antaa resetCount = () => {
// Lisätään myöhemmin
 }


palata (
<divluokan nimi="sovellus">
<s>Määrä: {count}s>
<divluokan nimi="painikkeet">
div>
div>
);
}
viedäoletuksena Sovellus;

Ensimmäinen lause tuo useState koukku reagoida moduuli. Käytä sitä luomaan Kreivi tila ja alusta se arvoon 0. Voit muuttaa arvoa Kreivi käyttämällä setCount toiminto.

Tulet käyttämään incrementCount, decrementCount, ja resetCount toimii myöhemmin laskurin arvon suurentamiseksi, pienentämiseksi ja nollaamiseksi.

Saatat huomata merkinnöissä laskentamuuttujan ympärillä olevat kiharat hakasulkeet { }. Tämä antaa JSX-jäsennimen tietää, että sen pitäisi käsitellä näiden aaltosulkeiden sisällä olevaa sisältöä JavaScriptina.

Vaihe 3: Toimintojen lisääminen laskurisovellukseen

Sinun on luotava kolme painiketta laskurisovelluksen toiminnallisuuden toteuttamiseksi: laskutuspainike, lisäyslaskentapainike ja nollauspainike. Lisää seuraava koodi sisään painikkeita div:

<Painikeotsikko={"Vähennys"} toiminta={decrementCount} />
<Painikeotsikko={"Lisäys"} toiminta={incrementCount} />
<Painikeotsikko={"Nollaa"} toiminta={resetCount} />

Kun napsautat näitä painikkeita, decrementCount, incrementCount, ja resetCount toiminnot toimivat. Huomaa, että ohitat otsikko ja toiminta rekvisiitta vanhemmilta Sovellus osa lapselle Painike komponentti.

Päivitä nämä toiminnot App.js tiedosto seuraavalla koodilla:

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

The setCount toiminto päivittää tilan Kreivi.

Huomaa, että et ole vielä luonut Button-komponenttia. Luoda uusi komponentit -kansiossa src hakemistoon ja luo sitten uusi tiedosto nimeltä Button.js. On hyvä käytäntö pitää kaikki komponentit samassa kansiossa.

Lisää seuraava koodi komponentit/Button.js tiedosto:

tuonti Reagoi alkaen"reagoi";
toimintoPainike(rekvisiitta) {
antaa { toiminta, otsikko } = rekvisiitta;
palata<-painikettaklikkaamalla={toiminta}>{title}-painiketta>;
}
viedäoletuksena Painike;

The Painike komponentti vastaanottaa tietoja rekvisiittajen kautta. Funktio dsestructures nämä rekvisiittat erillisiksi muuttujiksi ja käyttää niitä palauttamaansa merkinnän täyttämiseen.

Koodi käyttää tätä komponenttia uudelleen kolme kertaa lisäys-, vähennys- ja nollauspainikkeiden luomiseen.

Tuo lopuksi Button-komponentti tiedoston yläosassa App.js sivu käyttämällä seuraavaa koodia:

tuonti Painike alkaen"./components/Botton";

Tältä lopullinen koodi näyttää App.js tiedosto:

tuonti Reagoi, { useState } alkaen"reagoi";
tuonti Painike alkaen"./components/Button";
toimintoSovellus() {
konst [count, setCount] = useState(0);


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


antaa decrementCount = () => {
 setCount (luku - 1);
 };


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


palata (
<divluokan nimi="sovellus">
<s>Määrä: {count}s>
<divluokan nimi="painikkeet">
<Painikeotsikko={"Vähennys"} toiminta={decrementCount} />
<Painikeotsikko={"Lisäys"} toiminta={incrementCount} />
<Painikeotsikko={"Nollaa"} toiminta={resetCount} />
div>
div>
 );
}
viedäoletuksena Sovellus;

Noudata parhaita reagointikäytäntöjä

React-koodia voi kirjoittaa eri tavoilla, mutta on tärkeää, että se rakennetaan mahdollisimman selkeästi. Tämä varmistaa, että voit ylläpitää sitä helposti ja voi auttaa parantamaan sovelluksesi yleistä suorituskykyä.

Voit noudattaa useita React-yhteisön suosittelemia React-käytäntöjä, kuten välttää toistuvaa koodia, testien kirjoittaminen jokaiselle React-komponentille, objektien tuhoaminen rekvisiittalle ja seuraava nimeäminen yleissopimuksia.