React Intermediate õpetus: 3 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:47

React Intermediate õpetus

Vaata valmistoodet siit.

Mida sa õpid?

Loote React.js abil lihtsa ülesannete loendi ja saate teada reageerimise keerukamatest osadest. Eeltingimused (väga soovitatavad) täidavad reage.js alustamisjuhendi. HTML -i tundmine CSS -i tundmine Põhikoorkäskude tundmine Korralikud teadmised JavaScripti kohta

Tarvikud

Õpetuses käsitletakse kogu tarkvara.

Teil on vaja arvutit, kuhu on installitud järgmine tarkvara:

• npm/lõng
• IDE, mis toetab js
• Veebibrauser

Samm: reageerige vahepealsele õpetusele

Alustamine

Miks just React.js?

React.js -i puhul on mõte koodi uuesti kasutada. Oletame näiteks, et teil on 100 lehel navigeerimisriba. Kui peate lisama uue lehe, peate igal lehel muutma navigeerimisriba, mis tähendab, et 100 lehe puhul peate tegema sama. Isegi makrode puhul muutub see väga tüütuks.

Nõutava tarkvara/pakettide installimine

Sa vajad:

npm/lõng

Kuidas installida:

1. Minge ja installige uusim NTS.js LTS
2. VALIKULINE: kui eelistate oma paketihaldurina lõnga, installige lõng, sisestades powershell npm install -g lõnga
3. Avage powershell/cmd.exe
4. Liikuge kataloogi, kuhu soovite oma projekti luua
5. Tippige rakendus npx create-reage-app.

Olete seadistusfaasi lõpetanud. selle testimiseks avage PowerShell, navigeerige oma projekti kataloogi ja tippige npm start. peaksite oma vaikebrauserisse laadima veebilehe.

2. samm: 1. samm: alustamine

Alustamiseks kustutage kataloogist /src järgmised failid:

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

Me ei vaja neid faile.

Korraldame ka oma failisüsteemi. Looge need kataloogid kaustas /src /:

• js
• css

pane App.js js dir ja App.css css dir.

Järgmisena korraldame sõltuvused ümber.

Eemaldage teenuses index.js teenuste importija ja teenuse WorkWorker ning index.css import. Kustuta serviceWorker.register (). Marsruudi rakenduse teed uuesti.

Rakenduses App.js eemaldage logo.svg import, kuna me ei vaja seda enam. Uuesti marsruudi rakendus. Css. kustutage funktsioon App () ja rakenduse eksport.

Reactis on meil kaks võimalust elementide määratlemiseks. Meil on funktsioonid ja klassid. funktsioonid on vähem keerukate elementide jaoks ja klassid on tavaliselt keerukamate komponentide jaoks. Kuna ülesannete loend on keerulisem kui hunnik HTML -i, kasutame klassi süntaksit.

Lisage see oma koodile:

pastebin.com/nGXeCpaH

html läheb kahe jaotise sisse.

määratleme elemendi.

pastebin.com/amjd0jnb

pange tähele, kuidas me osariigis väärtust määratlesime. Vajame seda hiljem.

renderdamisfunktsioonis asendage tere sõnaga {this.state.value}

renderdame meie määratud olekust läbitud väärtuse.

nii et proovime järele!

rakenduse renderdamisfunktsioonis asendage see järgmisega:

pastebin.com/aGLX4jVE

see peaks näitama väärtust: "test".

vaatame, kas suudame teha mitu ülesannet!

selle asemel, et lasta Reactil vaid üks element renderdada, saame selle asemel luua massiivi ja öelda, et reageerida massiivi renderdamiseks.

muutke renderdusfunktsiooni selliseks:

pastebin.com/05nqsw71

see peaks tegema 10 erinevat ülesannet. Pange tähele, kuidas me võtmeid lisasime. Neid võtmeid kasutatakse reageerijate ja meie identifikaatoritena, kui neid vajame.

Nüüd, kui meie ülesannete loend töötab, leiame viisi ülesannete laadimiseks. Siit tuleb meie riik.

lisame oma konstruktori.

pastebin.com/9jHAz2AS

Selle konstruktori puhul nihutasime funktsiooni taskArray renderdusfunktsioonist olekusse. kustutage renderdusfunktsioonis taskArray ja loop. muutke divis olevat ülesannet

Nüüdseks peaks teie App.js kood välja nägema selline:

pastebin.com/1iNtUnE6

Samm: lisage viis objektide lisamiseks ja eemaldamiseks

Lisagem viis objektide lisamiseks ja eemaldamiseks. Planeerime selle.

Mida me vajame?

• Kasutaja viis objektide lisamiseks
• Koht objektide hoidmiseks
• Objektide hankimise viis

Mida me kasutama hakkame?

• Element
• Kohaliku ladustamise API koos JSONiga

Alustame sisend -elemendiga.

allpool {this.state.taskArray} lisage koodile sisend ja nupp

Lisama

Nüüd peaks olema tekstisisestus ja nupp Lisa.

See ei tee praegu midagi, seega lisame oma rakenduse meetodile 6 meetodit.

Vajame meetodit nupu klõpsamise ajal ja ka siis, kui keegi sisestab sisendi. Meil on vaja ka võimalust ülesannete massiivi genereerimiseks, samuti ülesannete salvestamiseks, laadimiseks ja eemaldamiseks.

lisame need 6 meetodit:

nuppu Klõpsake ()

inputTyped (evt)

createTaskArray ()

saveTasks (ülesanded)

getTasks ()

removeTask (id)

lisame oma olekule ka selle muutuja:

sisend

Peame ka oma funktsioonid sellega siduma.

pastebin.com/syx465hD

Alustame funktsionaalsuse lisamisega.

lisage sarnastele 2 atribuuti:

see teeb nii, et kui kasutaja sisendisse midagi sisestab, täidab see funktsiooni.

lisage atribuut onClick lisamisviisile järgmiselt:

Lisama

kui kasutaja nupul klõpsab, funktsioon käivitub.

nüüd, kui html -osa on tehtud, jätkame funktsionaalsusega.

Olen juba eelnevalt kirjutanud localStorage API liidese, nii et asendage funktsioonid saveTasks, getTasks ja removeTask sellega:

pastebin.com/G02cMPbi

alustame funktsioonist inputTyped.

kui kasutaja kirjutab, peame muutma sisendi sisemist väärtust.

teeme seda, kasutades funktsiooni setState, mis on varustatud reaga.

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

sel viisil saame sisendi väärtuse.

kui see on tehtud, saame töötada nupuvajutusfunktsiooniga.

peame ülesannete loendisse ülesande lisama. tõmbame kõigepealt ülesannete loendi localStorage'ist, redigeerime ja seejärel salvestame. Seejärel kutsume ülesannete loendi uuesti esitamiseks selle värskendamiseks.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

saame ülesanded, lükkame sisendväärtuse ülesannetesse ja salvestame selle. Seejärel genereerime ülesannete massiivi.

Töötame nüüd funktsiooni geneTaskArray () kallal.

me peame:

• saada ülesandeid
• luua ülesannete komponentide massiivi
• edastage renderdamiseks ülesande komponendid

saame ülesanded kätte ja salvestame need muutujaga getTasks () abil

var ülesanded = getTasks (). ülesanded

siis peame looma massiivi ja selle täitma.

pastebin.com/9gNXvNWe

see peaks nüüd toimima.

LÄHTEKOOD:

github.com/bluninja1234/todo_list_instructables

LISAD IDEED:

Eemaldamisfunktsioon (väga lihtne, lisage onclick ja kustutage võtmeindeksi eemaldamise abil)

CSS (ka lihtne, kirjutage ise või kasutage alglaadimisrihma)