Esercitazione intermedia React: 3 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Reagire tutorial intermedio

Visualizza il prodotto finito qui.

Cosa imparerai?

Creerai un semplice elenco di cose da fare con React.js e imparerai le parti più complicate di React. I prerequisiti (altamente consigliato) completano la guida introduttiva di react.js. Conoscenza di HTML Conoscenza di CSS Comandi di base della shell Conoscenza decente di JavaScript

Forniture

Tutto il software sarà trattato nel tutorial.

Avrai bisogno di un computer con il seguente software installato:

• npm/filato
• Un IDE che supporta js
• Un browser web

Passaggio 1: Reagire all'esercitazione intermedia

Iniziare

Perché React.js?

Con React.js, il punto è riutilizzare il codice. Ad esempio, supponiamo di avere una barra di navigazione in 100 pagine. Se devi aggiungere una nuova pagina, devi cambiare la barra di navigazione su ogni pagina, il che significa che devi fare la stessa cosa per 100 pagine. Anche con le macro, questo diventa molto noioso.

Installazione di software/pacchetti richiesti

Avrai bisogno:

npm/filato

Come installare:

1. Vai e installa l'ultimo LTS di Node.js
2. FACOLTATIVO: se preferisci il filato come gestore di pacchetti, installa il filato digitando in powershell npm install -g filato
3. Apri powershell/cmd.exe
4. Passa alla directory in cui desideri creare il tuo progetto
5. Digita npx create-react-app.

Hai completato la fase di configurazione. per testarlo, apri PowerShell, vai alla directory del tuo progetto e digita npm start. dovresti ottenere una pagina web caricata sul tuo browser predefinito.

Passaggio 2: Passaggio 1: Iniziare

Per iniziare, elimina i seguenti file dalla directory /src:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Non abbiamo bisogno di questi file.

Organizziamo anche il nostro filesystem. Crea queste directory in /src/:

• js
• css

inserisci App.js nella directory js e App.css nella directory css.

Quindi, riorganizziamo le dipendenze.

in index.js, rimuovi le importazioni per serviceWorker e index.css. Elimina serviceWorker.register(). Reindirizza i percorsi per App.

in App.js, rimuovi l'importazione per logo.svg, poiché non ne abbiamo più bisogno. Reindirizza App.css. eliminare la funzione App() e l'esportazione per App.

In React, abbiamo 2 modi per definire gli elementi. Abbiamo funzioni e classi. le funzioni sono per elementi meno complicati e le classi sono generalmente per componenti più complicati. Poiché una lista di cose da fare è più complicata di un mucchio di HTML, useremo la sintassi della classe.

Aggiungi questo al tuo codice:

pastebin.com/nGXeCpaH

l'html andrà all'interno dei 2 div.

definiamo l'Elemento.

pastebin.com/amjd0jnb

notate come abbiamo definito il valore nello stato. Ne avremo bisogno in seguito.

nella funzione render, sostituisci hi con {this.state.value}

stiamo rendendo il valore passato dallo stato che abbiamo definito.

quindi proviamolo!

nella funzione render di App, sostituiscilo con questo:

pastebin.com/aGLX4jVE

dovrebbe visualizzare un valore: "test".

vediamo se riusciamo a rendere più attività!

invece di fare in modo che React esegua il rendering di un solo elemento, possiamo creare un array di e dire a react di eseguire il rendering dell'array.

cambia la funzione di rendering di in questo modo:

pastebin.com/05nqsw71

questo dovrebbe rendere 10 compiti diversi. Nota come abbiamo aggiunto le chiavi. Queste chiavi sono usate come identificatori per reagire e noi, se ne avessimo bisogno.

Ora che il nostro elenco di attività funziona, troviamo un modo per caricare le attività. È qui che entra in gioco il nostro stato.

aggiungiamo un costruttore al nostro.

pastebin.com/9jHAz2AS

In questo costruttore, abbiamo spostato taskArray dalla funzione render allo stato. eliminare il taskArray e il ciclo for nella funzione di rendering. cambia taskArray nel div in this.state.taskArray.

A questo punto, il tuo codice App.js dovrebbe essere simile a questo:

pastebin.com/1iNtUnE6

Passaggio 3: aggiunta di un modo per aggiungere e rimuovere oggetti

Aggiungiamo un modo per aggiungere e rimuovere oggetti. Pianifichiamolo.

Cosa ci serve?

• Un modo per l'utente di aggiungere oggetti
• Un posto dove riporre gli oggetti
• Un modo per recuperare gli oggetti

Cosa useremo?

• Un elemento
• L'API localstorage con JSON

Iniziamo con l'elemento di input.

sotto {this.state.taskArray}, aggiungi un input e un pulsante al tuo codice

Aggiungere

Dovrebbe esserci un input di testo e un pulsante Aggiungi ora.

Al momento non fa nulla, quindi aggiungiamo 6 metodi al nostro metodo App.

Abbiamo bisogno di un metodo per quando si fa clic sul pulsante e anche quando qualcuno digita l'input. Abbiamo anche bisogno di un modo per generare l'array delle attività, nonché salvare, caricare e rimuovere le attività.

aggiungiamo questi 6 metodi:

pulsanteClic()

inputTyped(evt)

generateTaskArray()

saveTasks(compiti)

getTask()

removeTask(id)

aggiungiamo anche questa variabile al nostro stato:

ingresso

Dobbiamo anche legare le nostre funzioni a questo.

pastebin.com/syx465hD

Iniziamo ad aggiungere funzionalità.

aggiungi 2 attributi allo stesso modo:

questo fa in modo che quando l'utente digita qualcosa nell'input, esegue la funzione.

aggiungi un attributo onClick all'Aggiungi in questo modo:

Aggiungere

quando l'utente fa clic sul pulsante, la funzione viene eseguita.

ora che la parte html è terminata, andiamo avanti con la funzionalità.

Ho già prescritto l'interfaccia API localStorage, quindi sostituisci le funzioni saveTasks, getTasks e removeTask con questo:

pastebin.com/G02cMPbi

iniziamo con la funzione inputTyped.

quando l'utente digita, dobbiamo modificare il valore interno dell'input.

facciamolo usando la funzione setState fornita con react.

this.setState({input: evt.target.value});

in questo modo, possiamo ottenere il valore dell'input.

una volta fatto, possiamo lavorare sulla funzione buttonClick.

dobbiamo aggiungere un'attività all'elenco delle attività. prima estraiamo l'elenco delle attività da localStorage, lo modifichiamo e quindi lo salviamo. Quindi chiamiamo un rendering della taskList per aggiornarla.

var taskList = this.getTasks();

taskList.tasks.push(this.state.input);

this.saveTasks(taskList);

this.generateTaskArray();

otteniamo le attività, inseriamo il valore di input nelle attività e quindi lo salviamo. Quindi generiamo l'array di attività.

ora, lavoriamo sulla funzione generateTaskArray().

abbiamo bisogno di:

• ottenere compiti
• creare una serie di componenti dell'attività
• passare i componenti dell'attività per il rendering

possiamo ottenere le attività e memorizzarle in una variabile con getTasks()

var task = getTasks().tasks

dobbiamo quindi creare un array e popolarlo.

pastebin.com/9gNXvNWe

dovrebbe funzionare ora.

CODICE SORGENTE:

github.com/bluninja1234/todo_list_instructables

IDEE EXTRA:

Funzione di rimozione (molto semplice, aggiungi un clic ed elimina usando removeTask dall'indice delle chiavi)

CSS (anche semplice, scrivi il tuo o usa bootstrap)