Come creare una semplice app contatore in React

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. Pulsante Aumenta conteggio : questo aumenterà il conteggio di uno.
2. Pulsante Diminuisci conteggio : Questo ridurrà il conteggio di uno.
3. Pulsante di ripristino : 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:

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 utilizzare 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. Oggetti di scena : 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 usarli per eseguire diverse operazioni in React.
5. Hook : React Gli hook sono funzioni integrate che 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 puoi gestire lo stato con l’ hook useState() .

Passaggio 1: impostazione del progetto

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

npx create-react-app react-counter-app

Questo creerà una nuova app di reazione, pronta 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 start

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 file src/App.js ed elimina tutto il codice predefinito presente lì. Ora, crea uno scheletro dell’applicazione usando il seguente codice:

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

La prima istruzione importa l’ hook useState dal modulo react . Utilizzalo per creare lo stato del conteggio e inizializzarlo su 0. Puoi modificare il valore del conteggio utilizzando la funzione setCount .

Utilizzerai in seguito le funzioni incrementCount , decrementCount e resetCount per aumentare, diminuire e reimpostare 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. Aggiungi il seguente codice all’interno del div dei pulsanti :

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

Quando fai clic su questi pulsanti, verranno eseguite le funzioni decrementCount , incrementCount e resetCount . Tieni presente che stai passando il titolo e gli oggetti di scena dell’azione dal componente principale App al componente secondario Pulsante .

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

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


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

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

La funzione setCount aggiornerà lo stato del conteggio .

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

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

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

Il componente Button 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 della pagina App.js utilizzando il seguente codice:

import Button from "./components/Botton";

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

import React, { useState } from "react";
import Button from "./components/Button";


function App() {
  const [count, setCount] = useState(0);

export default App;

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 di React consigliate dalla community di React come evitare codice ripetitivo, scrivere test per ogni componente React, utilizzare la destrutturazione degli oggetti per oggetti di scena e seguire le convenzioni di denominazione.