Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

React is een van de meest populaire front-end JavaScript-bibliotheken. Veel bedrijven gebruiken React om hun gebruikersinterfaces te ontwikkelen en het is enorm populair geworden onder ontwikkelaars.

Met React is het eenvoudig om een ​​eenvoudig programma te bouwen, zoals deze eenvoudige teller-app. Beginnend met een eenvoudige tutorial, zal je enkele van de fundamentele maar belangrijke concepten van React begrijpen.

Functies van de Teller-app

In dit project ga je een tellerapplicatie ontwikkelen met de volgende features:

  1. Verhoog het aantal knop: hierdoor wordt het aantal met één verhoogd.
  2. Knop Aantal verlagen: hierdoor wordt het aantal met één verlaagd.
  3. Reset knop: Hiermee wordt de telling op nul gezet.

Basisconcepten van reageren

Voordat u verder gaat, moet u enkele van deze basisconcepten in React begrijpen die u in dit project gaat gebruiken:

  1. Componenten
    instagram viewer
    : Componenten zijn de belangrijkste bouwstenen van React-applicaties. Ze bevatten onafhankelijke, herbruikbare code. Met behulp van componenten kunt u de gebruikersinterface opsplitsen in afzonderlijke delen. Die onderdelen kun je dan hergebruiken en er zelfstandig mee aan de slag gaan.
  2. Staat: In React kunt u een object gebruiken om gegevens op te slaan die de status van een component vertegenwoordigen. Hierdoor kunnen componenten hun eigen gegevens beheren en bijwerken. De status van een component bepaalt hoe deze wordt weergegeven en zich gedraagt.
  3. Functionele componenten: De functionele component van React is gewoon een JavaScript-functie die rekwisieten als argument accepteert en een React-element (JSX) retourneert.
  4. Rekwisieten: U kunt props (afkorting van "properties") gebruiken om gegevens van een bovenliggend onderdeel door te geven aan een onderliggend onderdeel. Rekwisieten zijn een van de integrale onderdelen van React en dat kan gebruik rekwisieten om verschillende bewerkingen in React uit te voeren.
  5. Haken: React Hooks zijn ingebouwde functies waarmee u status en andere React-functies zoals levenscyclusmethoden binnen functionele componenten kunt beheren. Ze kunnen je ook helpen om beknopte en duidelijke code te schrijven. U zult snel zien hoe u de status kunt beheren met de gebruikState() haak.

De code die in dit project wordt gebruikt, is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.

Stap 1: het opzetten van het project

Open uw terminal en voer de volgende opdracht uit om aan de slag te gaan:

npx creëren-reageer-app reageer-teller-app

Dit zal maak een nieuwe reactie-app, klaar voor u om te beginnen met het bouwen van uw project. Het genereert een bestandssysteemstructuur met verschillende bestanden en mappen.

Voer de volgende opdracht uit in de terminal om de ontwikkelingsserver te starten:

npm begin

Die opdracht zou een nieuw tabblad in uw browser moeten openen, wijzend naar http://localhost: 3000. Alle wijzigingen die u in het project aanbrengt, worden hier automatisch bijgewerkt.

Stap 2: Het skelet van de tellertoepassing maken

Open de src/App.js bestand en verwijder alle standaardcode die daar aanwezig is. Maak nu een skelet van de applicatie met behulp van de volgende code:

importeren Reageer, { useState } van"Reageer";
functieapp() {
const [telling, setCount] = useState(0);
laten incrementCount = () => {
// Om later toe te voegen
 };
laten decrementCount = () => {
// Om later toe te voegen
 };
laten resetCount = () => {
// Om later toe te voegen
 }


opbrengst (
<divnaam van de klasse="app">
<P>Tel: {count}P>
<divnaam van de klasse="toetsen">
div>
div>
);
}
exporterenstandaard App;

De eerste instructie importeert de gebruikState haak van de Reageer moduul. Gebruik het om de graaf state en initialiseer deze naar 0. U kunt de waarde van de graaf de... gebruiken setCount functie.

Je gebruikt de incrementCount, decrementCount, En resetCount functies later om de waarde van de teller te verhogen, verlagen en resetten.

U ziet misschien de accolades { } die rond de count-variabele in de markup worden gebruikt. Dit laat de JSX-parser in wezen weten dat het de inhoud binnen die accolades als JavaScript moet behandelen.

Stap 3: De functionaliteit toevoegen aan de tellertoepassing

U moet drie knoppen maken om de functionaliteit van de tellertoepassing te implementeren: de knop voor het verlagen van het aantal, de knop voor het verhogen van het aantal en de resetknop. Voeg de volgende code toe in het toetsen div:

<Knoptitel={"Verlagen"} actie={decrementCount} />
<Knoptitel={"Verhogen"} actie={incrementCount} />
<Knoptitel={"Resetten"} actie={resetCount} />

Wanneer u op deze knoppen klikt, wordt de decrementCount, incrementCount, En resetCount functies zullen lopen. Merk op dat u langs de titel En actie rekwisieten van de ouder app onderdeel voor het kind Knop bestanddeel.

Update deze functies in de App.js bestand met de volgende code:

laten incrementCount = () => {
 setCount (tel + 1);
};
laten decrementCount = () => {
 setCount (tel - 1);
};
laten resetCount = () => {
 setCount (0);
}

De setCount functie zal de status van de graaf.

Houd er rekening mee dat u de knopcomponent nog niet hebt gemaakt. Maak een nieuwe aan componenten map in de src directory en maak vervolgens een nieuw bestand met de naam Knop.js. Het is een goede gewoonte om alle componenten in dezelfde map te bewaren.

Voeg de volgende code toe aan het componenten/Button.js bestand:

importeren Reageer van"Reageer";
functieKnop(rekwisieten) {
laten { actie, titel } ​​= rekwisieten;
opbrengst<knopbij klikken={actie}>{titel}knop>;
}
exporterenstandaard Knop;

De Knop component ontvangt gegevens via rekwisieten. De functie structureert deze rekwisieten vervolgens in afzonderlijke variabelen en gebruikt ze om de opmaak die het retourneert te vullen.

De code hergebruikt dit onderdeel drie keer om de knoppen voor verhogen, verlagen en resetten te maken.

Importeer ten slotte de knopcomponent bovenaan het App.js pagina met behulp van de volgende code:

importeren Knop van"./componenten/Botton";

Dit is hoe de uiteindelijke code eruit zal zien in de App.js bestand:

importeren Reageer, { useState } van"Reageer";
importeren Knop van"./componenten/knop";
functieapp() {
const [telling, setCount] = useState(0);


laten incrementCount = () => {
 setCount (tel + 1);
 };


laten decrementCount = () => {
 setCount (tel - 1);
 };


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


opbrengst (
<divnaam van de klasse="app">
<P>Tel: {count}P>
<divnaam van de klasse="toetsen">
<Knoptitel={"Verlagen"} actie={decrementCount} />
<Knoptitel={"Verhogen"} actie={incrementCount} />
<Knoptitel={"Resetten"} actie={resetCount} />
div>
div>
 );
}
exporterenstandaard App;

Volg de Best React-praktijken

Je kunt React-code op verschillende manieren schrijven, maar het is belangrijk om deze zo netjes mogelijk te structureren. Dit zorgt ervoor dat u het gemakkelijk kunt onderhouden en kan helpen om de algehele prestaties van uw toepassing te verbeteren.

U kunt verschillende React-praktijken volgen die worden aanbevolen door de React-community, zoals het vermijden van repetitieve code, het schrijven van tests voor elke React-component, het gebruik van objectvernietiging voor rekwisieten en de daaropvolgende naamgeving conventies.