Imparare una nuova tecnologia come React può creare confusione senza esperienza pratica. In qualità di sviluppatore, la creazione di progetti reali è uno dei modi più efficaci per comprendere concetti e funzionalità.

Segui il processo di creazione di un semplice elenco di cose da fare con React e migliora la tua comprensione dei fondamenti di React.

Prerequisiti per la creazione di un elenco di cose da fare

Prima di iniziare questo progetto, ci sono diversi requisiti. Devi avere una conoscenza di base di quanto segue, HTML, CSS, JavaScript, ES6, e Reagisci. Devi avere Node.js e npm, il gestore di pacchetti JavaScript. Hai anche bisogno di un editor di codice, come Visual Studio Code.

Ecco il CSS che verrà utilizzato da questo progetto:

/* stili.css */
.App {
famiglia di font: sans-serif;
Schermo: flettere;
giustificare il contenuto: centro;
align-elementi: centro;
altezza: 100vh;
}
.Fare {
colore di sfondo: grano





instagram viewer
;
allineamento del testo: centro;
larghezza: 50%;
imbottitura: 20px;
scatola-ombra: rgb(0, 0, 0, 0.24) 0px 3px 8px;
margine: auto;
}

Ul {
tipo di stile elenco: nessuno;
imbottitura: 10px;
margine: 0;
}
pulsante {
larghezza: 70px;
altezza: 35px;
colore di sfondo: sandbrown;
confine: nessuno;
dimensione del font: 15px;
font-weight: 800;
bordo-raggio: 4px;
scatola-ombra: rgb(0, 0, 0, 0.24) 0px 3px 8px;
}
.ingresso {
confine: nessuno;
larghezza: 340px;
altezza: 35px;
bordo-raggio: 9px;
allineamento del testo: centro;
scatola-ombra: rgb(0, 0, 0, 0.24) 0px 3px 8px;
}
.Superiore {
Schermo: flettere;
giustificare il contenuto: centro;
spacco: 12px;
}
li {
Schermo: flettere;
giustificare il contenuto: spazio uniforme;
align-elementi: centro;
imbottitura: 10px;
}
li:Prima {
contenuto: "*";
margine destro: 5px;
}

1. Imposta l'ambiente del progetto

Questa fase include tutti i comandi e i file necessari per impostare il progetto. Per iniziare, crea un nuovo progetto React. Apri un terminale ed esegui questo comando:

npx create-react-app lista delle cose da fare

Questo richiede alcuni minuti per installare tutti i file necessari e anche i pacchetti. Crea una nuova applicazione React denominata todo-list. Una volta che vedi qualcosa di simile sei sulla strada giusta:

Passare alla directory del progetto appena creato utilizzando questo comando:

cd lista delle cose da fare

Esegui il tuo progetto in locale con questo comando:

inizio npm

E poi visualizza il progetto nel tuo browser su http://localhost: 3000/.

Nella cartella src del tuo progetto, ci sono un paio di file che non ti servono. Elimina questi file: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Assicurati di cercare istruzioni di importazione nei file disponibili e rimuovi qualsiasi riferimento ai file eliminati.

2. Crea un componente TodoList

Questo è il componente che implementeremo tutti i codici necessari per l'elenco delle cose da fare. Crea un file chiamato "TodoList.js" nella tua cartella src. Quindi per verificare che tutto funzioni come dovrebbe, aggiungi il seguente codice:

importare Reagire da'reagire';
cost TodoList = () => {
ritorno (



Ciao Mondo </h2>
 </div>
 );
};
esportarepredefinito Lista di cose da fare; 

Apri il tuo file App.js, importa il componente TodoList ed esegui il rendering all'interno del componente App. Sarà simile a questo:

importare Reagire da'reagire';
importare'./stili.css'
importare Lista di cose da fare da'./Lista di cose da fare';
cost Applicazione = () => {
ritorno (




 </div>
 );
};
esportarepredefinito Applicazione;

Vai al tuo browser locale che ha localhost: 3000 in esecuzione e controlla per vedere "Hello World" scritto in grassetto. Tutto bene? Al passo successivo.

3. Gestire l'input e la modifica dell'input

Questo passaggio consente di attivare un evento quando si digita un'attività nella casella di input. Importa l'hook useState dal tuo pacchetto React. useState è un hook React che ti consente di gestire lo stato in modo efficiente.

importare Reagisci, { useState } da'reagire';

Utilizzare l'hook useState per creare una variabile di stato denominata "inputTask" con un valore iniziale di una stringa vuota. Inoltre, assegnare la funzione "setInputTask" per aggiornare il valore di "inputTask" in base all'input dell'utente.

cost [inputTask, setInputTask] = useState("");

Crea una funzione chiamata "handleInputChange", inserendo un parametro evento. Dovrebbe aggiornare lo stato inputTask utilizzando la funzione setInputTask. Accedi al valore del target dell'evento con event.target.value. Questo verrà eseguito ogni volta che il valore del campo di input cambia.

cost handleInputChange = (evento) => {
 setInputTask (evento.target.value);
}; 

Restituisce un paio di elementi JSX. Il primo è l'intestazione che recita "My Todo-List", puoi decidere qualsiasi intestazione che ti piace. Includi un paio di attributi nei tuoi elementi di input. tipo = "testo": Questo specifica il tipo di input come testo, valore={inputTask}: Questo associa il valore del campo di input alla variabile di stato inputTask, assicurando che rifletta il valore corrente.onChange={handleInputChange}: Questo chiama la funzione handleInputChange quando il valore del campo di input cambia, aggiornando lo stato di inputTask.

"Fare">
La mia lista delle cose da fare</h1>
"Superiore">
"ingresso" tipo="testo" valore={inputTask}
 onChange={handleInputChange} placeholder="Inserisci un'attività" />

Andando avanti, crea un pulsante che aggiungerà l'attività immessa all'elenco.

"btn">AGGIUNGI</button>
 </div>
</div>

In questa fase, ecco come apparirà l'output del tuo browser.

4. Aggiungi funzionalità al pulsante "AGGIUNGI".

Usa il useState hook per creare una variabile di stato denominata "lista" con un valore iniziale di un array vuoto. La variabile "setList" memorizza l'array di attività in base all'input dell'utente.

cost [lista, setLista] = useState([]);

Crea una funzione handleAddTodo che verrà eseguita quando l'utente fa clic sul pulsante "AGGIUNGI" per aggiungere una nuova attività. Accetta il parametro todo, che rappresenta la nuova attività immessa dall'utente. Quindi, crea un oggetto newTask con un ID univoco generato utilizzando Math.random() e la proprietà todo che contiene il testo di input.

Andando avanti, aggiorna lo stato dell'elenco utilizzando l'operatore di diffusione […list] per creare un nuovo array con le attività esistenti nell'elenco. Aggiungi newTask alla fine dell'array. Ciò garantisce che non mutiamo l'array di stato originale. Infine, reimposta lo stato inputTask su una stringa vuota, cancellando il campo di input quando l'utente fa clic sul pulsante.

cost handleAddTodo = (fare) => {
cost nuovaattività = {
 id: Matematica.casuale(),
 todo: todo
 };
 setList([...elenco, newTask]);
 setInputTask('');
}; 

Includi il al clic attributo all'elemento pulsante con il testo "AGGIUNGI". Quando viene cliccato, attiva il handleAddTodo funzione, che aggiunge una nuova attività allo stato dell'elenco

 handleAddTodo (inputTask)}>AGGIUNGI</button> 

A questo punto, l'output del tuo browser avrà lo stesso aspetto, ma se fai clic sul pulsante "AGGIUNGI" dopo aver inserito un'attività, il campo di input si svuoterà. Se funziona bene, vai al passaggio successivo.

5. Aggiungi un pulsante Elimina

Questo è il passaggio finale per consentire agli utenti di eliminare la propria attività se hanno commesso un errore o hanno completato l'attività. Creare una funzione handleDeleteTodo che funga da gestore di eventi quando l'utente fa clic sul pulsante "Elimina" per un'attività specifica. Prende l'id dell'attività come parametro.

All'interno della funzione, utilizzare il metodo filter sull'array list per creare un nuovo array newList che escluda l'attività con l'id corrispondente. Il metodo filter scorre ogni elemento nell'array list e restituisce un nuovo array contenente solo gli elementi che soddisfano la condizione data. In questo caso, controlla se l'ID di ogni attività è uguale all'ID passato come parametro. Aggiorna lo stato dell'elenco chiamando setList (newList), che imposta lo stato sul nuovo array filtrato, rimuovendo efficacemente l'attività con l'id corrispondente dall'elenco.

cost handleDeleteTodo = (id) => {
cost nuovaLista = lista.filtro((fare) =>
 todo.id !== id
 );
 setList (newList); 
};

Usa il metodo map per scorrere ogni elemento nell'array list e restituire un nuovo array. Quindi, crea un file

Accedi alla proprietà todo di ciascun oggetto todo. creare infine un pulsante che, se cliccato, attivi la funzione handleDeleteTodo con l'id del task corrispondente come parametro, permettendoci di eliminare il task dalla lista.

<Ul>
{ lista.mappa((fare) => (
<linome della classe="compito"chiave={todo.id}>
 {todo.todo}
<pulsanteal clic={() => handleDeleteTodo (todo.id)}>Eliminapulsante>
li>
))}
Ul>

Ecco come dovrebbe apparire il tuo codice finale:

importare Reagisci, { useState } da'reagire';
cost TodoList = () => {
cost [inputTask, setInputTask] = useState('');
cost [elenco, setList] = useState([]);
cost handleAddTodo = () => {
cost nuovaattività = {
 id: Matematica.casuale(),
 cose da fare: inputTask
 };
 scaletta([...elenco, nuovo compito]);
 setInputTask('');
 };
cost handleDeleteTodo = (id) => {
cost nuovaLista = lista.filtro((fare) => todo.id !== id);
 setList (newList);
 };
cost handleInputChange = (evento) => {
setInputTask(evento.bersaglio.valore);
 };
ritorno (
<divnome della classe="Fare">

Il mio To-FareElenco

<divnome della classe="Superiore">
<ingressonome della classe="ingresso"tipo="testo"valore={inputTask}
 onChange={handleInputChange} placeholder="Inserisci un'attività" />
<pulsantenome della classe="btn"al clic={handleAddTodo}>AGGIUNGEREpulsante>
div>
<Ul>
 { lista.mappa((fare) => (
<linome della classe="compito"chiave={todo.id}>
 {todo.todo}
<pulsanteal clic={() => handleDeleteTodo (todo.id)}>
Eliminare
pulsante>
li>
 ))}
Ul>
div>
 );
};
esportarepredefinito Lista di cose da fare; 

Ecco come sarà il tuo output finale, con entrambi i pulsanti aggiungi ed elimina che funzionano come previsto.

Congratulazioni, hai creato un elenco di cose da fare che aggiunge ed elimina attività. Puoi andare oltre aggiungendo stile e più funzionalità.

Usa i progetti del mondo reale per imparare a reagire

La pratica può essere un modo efficace per imparare. Ti consente di applicare i concetti e le migliori pratiche di React in modo pratico, rafforzando la tua comprensione del framework. Ci sono un sacco di progetti là fuori, dovresti trovare quelli giusti.