I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

React è una delle librerie JavaScript front-end più popolari. Molte aziende usano React per sviluppare le loro interfacce utente e ha guadagnato grande popolarità tra gli sviluppatori.

È facile creare un semplice programma con React, come questa app contatore di base. Iniziare con un semplice tutorial ti aiuterà a cogliere alcuni dei concetti fondamentali ma importanti di React.

Funzionalità dell'app contatore

In questo progetto, svilupperai un'applicazione contatore con le seguenti caratteristiche:

  1. Aumenta il pulsante di conteggio: Questo aumenterà il conteggio di uno.
  2. Pulsante Diminuisci conteggio: Questo diminuirà il conteggio di uno.
  3. Pulsante di reset: Questo imposterà il conteggio a zero.

Concetti base di React

Prima di andare avanti, devi comprendere alcuni di questi concetti di base in React che utilizzerai in questo progetto:

instagram viewer
  1. Componenti: I componenti sono gli elementi costitutivi fondamentali delle applicazioni React. Contengono codice indipendente e riutilizzabile. Utilizzando i componenti è possibile suddividere l'interfaccia utente in parti separate. È quindi possibile riutilizzare quelle parti e lavorare con esse in modo indipendente.
  2. Stato: In React puoi usare un oggetto per memorizzare i dati che rappresentano lo stato di un componente. Ciò consente ai componenti di gestire e aggiornare i propri dati. Lo stato di un componente determina il modo in cui viene visualizzato e si comporta.
  3. Componenti funzionali: Il componente funzionale di React è semplicemente una funzione JavaScript che accetta oggetti di scena come argomento e restituisce un elemento React (JSX).
  4. Puntelli: puoi usare oggetti di scena, abbreviazione di "proprietà", per passare i dati da un componente padre a un componente figlio. Gli oggetti di scena sono una delle parti integranti di React e puoi farlo usa gli oggetti di scena per eseguire diverse operazioni in React.
  5. Ganci: React Hooks sono funzioni integrate che ti consentono di gestire lo stato e altre funzionalità di React come i metodi del ciclo di vita all'interno dei componenti funzionali. Possono anche aiutarti a scrivere codice conciso e chiaro. Vedrai presto come gestire lo stato con il file usaStato() gancio.

Il codice utilizzato in questo progetto è disponibile in a Deposito GitHub ed è gratuito per l'uso con la licenza MIT.

Passaggio 1: impostazione del progetto

Apri il tuo terminale ed esegui il seguente comando per iniziare:

npx creare-react-app reazione-contatore-app

Questo sarà creare una nuova app di reazione, pronto per iniziare a costruire il tuo progetto. Genererà una struttura di file system con diversi file e cartelle.

Eseguire il seguente comando nel terminale per avviare il server di sviluppo:

npm inizio

Quel comando dovrebbe aprire una nuova scheda nel tuo browser, puntando a http://localhost: 3000. Tutte le modifiche che apporterai al progetto verranno automaticamente aggiornate qui.

Passaggio 2: creazione dello scheletro dell'applicazione contatore

Apri il src/App.js file ed elimina tutto il codice predefinito presente lì. Ora, crea uno scheletro dell'applicazione usando il seguente codice:

importare Reagisci, { useState } da"reagire";

funzioneApp() {
cost [count, setCount] = useState(0);
permettere conteggioincremento = () => {
// Da aggiungere in seguito
};
permettere decrementCount = () => {
// Da aggiungere in seguito
};
permettere resetCount = () => {
// Da aggiungere in seguito
}

ritorno (
<divnome della classe="app">
<P>Conteggio: {conteggio}P>
<divnome della classe="bottoni">
div>
div>
);
}

esportarepredefinito Applicazione;

La prima istruzione importa il file useState gancio dal reagire modulo. Usalo per creare il contare state e inizializzatelo a 0. È possibile modificare il valore di contare usando il setCount funzione.

Userai il incrementoConteggio, decrementCount, E resetCount funzioni successivamente per aumentare, diminuire e azzerare il valore del contatore.

Potresti notare le parentesi graffe { } utilizzate attorno alla variabile count nel markup. Ciò essenzialmente consente al parser JSX di sapere che dovrebbe trattare il contenuto all'interno di quelle parentesi graffe come JavaScript.

Passaggio 3: aggiunta della funzionalità all'applicazione contatore

È necessario creare tre pulsanti per implementare la funzionalità dell'applicazione contatore: il pulsante di decremento del conteggio, il pulsante di incremento del conteggio e il pulsante di ripristino. Aggiungere il seguente codice all'interno del file pulsanti div:

<Pulsantetitolo={"Decremento"} azione={decrementCount} />
<Pulsantetitolo={"Incremento"} azione={incrementCount} />
<Pulsantetitolo={"Ripristina"} azione={resetCount} />

Quando fai clic su questi pulsanti, il decrementCount, incrementoConteggio, E resetCount le funzioni verranno eseguite. Nota che stai passando il titolo E azione oggetti di scena dal genitore App componente al bambino Pulsante componente.

Aggiorna queste funzioni nel file App.js file con il seguente codice:

permettere conteggioincremento = () => {
setCount (conta + 1);
};

permettere decrementCount = () => {
setCount (conteggio - 1);
};

permettere resetCount = () => {
impostaConteggio (0);
}

IL setCount funzione aggiornerà lo stato del contare.

Tieni presente che non hai ancora creato il componente Pulsante. Crea un nuovo componenti cartella in src directory e quindi creare un nuovo file denominato Button.js. È buona norma tenere tutti i componenti nella stessa cartella.

Aggiungere il seguente codice nel file componenti/Button.js file:

importare Reagire da"reagire";

funzionePulsante(oggetti di scena) {
permettere { azione, titolo } = oggetti di scena;
ritorno<pulsanteal clic={azione}>{titolo}pulsante>;
}

esportarepredefinito Pulsante;

IL Pulsante componente riceve i dati tramite oggetti di scena. La funzione quindi dsetructures questi oggetti di scena in variabili separate, usandoli per popolare il markup che restituisce.

Il codice riutilizza questo componente tre volte per creare i pulsanti di incremento, decremento e ripristino.

Infine, importa il componente Button nella parte superiore del file App.js pagina utilizzando il seguente codice:

importare Pulsante da"./componenti/Bottone";

Ecco come apparirà il codice finale nel file App.js file:

importare Reagisci, { useState } da"reagire";
importare Pulsante da"./componenti/pulsante";

funzioneApp() {
cost [count, setCount] = useState(0);

permettere conteggioincremento = () => {
setCount (conta + 1);
};

permettere decrementCount = () => {
setCount (conteggio - 1);
};

permettere resetCount = () => {
impostaConteggio (0);
}

ritorno (
<divnome della classe="app">
<P>Conteggio: {conteggio}P>
<divnome della classe="bottoni">
<Pulsantetitolo={"Decremento"} azione={decrementCount} />
<Pulsantetitolo={"Incremento"} azione={incrementCount} />
<Pulsantetitolo={"Ripristina"} azione={resetCount} />
div>
div>
);
}

esportarepredefinito Applicazione;

Segui le migliori pratiche di React

Puoi scrivere il codice React in diversi modi, ma è importante strutturarlo nel modo più pulito possibile. Questo ti assicurerà di poterlo mantenere facilmente e può aiutare a migliorare le prestazioni complessive della tua applicazione.

Puoi seguire diverse pratiche React consigliate dalla comunità React come evitare codice ripetitivo, scrivere test per ciascun componente React, utilizzare la destrutturazione degli oggetti per oggetti di scena e seguire la denominazione convegni.