„React Intermediate Tutorial“: 3 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:45

„React Intermediate Tutorial“https://github.com/bluninja1234/todo_list_instruc…

Peržiūrėkite gatavą produktą čia.

Ko išmoksi?

Naudodami „React.js“sukursite paprastą darbų sąrašą ir sužinosite apie sudėtingesnes „reagavimo“dalis. Būtinos sąlygos (labai rekomenduojamos) užpildykite „React.js“darbo pradžios vadovą. Žinios apie HTML Žinios apie CSS Pagrindinės apvalkalo komandos Žinios apie „JavaScript“

Prekės

Pamoka apima visą programinę įrangą.

Jums reikės kompiuterio, kuriame įdiegta ši programinė įranga:

• npm/verpalai
• IDE, palaikantis js
• Žiniatinklio naršyklė

1 žingsnis: sureaguokite tarpinę mokymo programą

Darbo pradžia

Kodėl React.js?

Naudojant „React.js“esmė yra pakartotinis kodo naudojimas. Pvz., Tarkime, kad turite naršymo juostą, kurią turite 100 puslapių. Jei norite pridėti naują puslapį, turite pakeisti kiekvieno puslapio naršymo juostą, tai reiškia, kad tą patį turite padaryti 100 puslapių. Net naudojant makrokomandas tai tampa labai nuobodu.

Reikiamos programinės įrangos/paketų diegimas

Jums reikės:

npm/verpalai

Kaip įdiegti:

1. Eikite ir įdiekite naujausią NTS.js LTS
2. PASIRENKAMA: jei kaip paketų tvarkyklę norite verpalų, įdiekite verpalus įvesdami „powershell npm install -g“verpalus
3. Atidarykite „powershell“/cmd.exe
4. Eikite į katalogą, kuriame norite sukurti savo projektą
5. Įveskite npx create-reage-app.

Baigėte sąrankos etapą. Norėdami jį išbandyti, atidarykite „PowerShell“, eikite į savo projekto katalogą ir įveskite npm start. turėtumėte įkelti tinklalapį į numatytąją naršyklę.

2 veiksmas: 1 veiksmas: pradžia

Norėdami pradėti, ištrinkite šiuos failus iš /src katalogo:

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

Mums nereikia šių failų.

Taip pat sutvarkykime savo failų sistemą. Sukurkite šiuos katalogus /src /:

• js
• css

įdėkite „App.js“į „js“ir „App.css“į „css“rež.

Toliau pertvarkykime priklausomybes.

iš index.js, pašalinkite „serviceWorker“ir „index.css“importuotus failus. Ištrinkite serviceWorker.register (). Iš naujo nustatykite programos kelius.

„App.js“pašalinkite „logo.svg“importavimą, nes mums to nebereikia. Iš naujo nukreipti programą. Css. ištrinkite funkciją „App“() ir „App“eksportavimą.

„React“turime 2 būdus, kaip apibrėžti elementus. Mes turime funkcijas ir klases. funkcijos yra skirtos mažiau sudėtingiems elementams, o klasės paprastai yra sudėtingesniems komponentams. Kadangi užduočių sąrašas yra sudėtingesnis už daugybę HTML, mes naudosime klasės sintaksę.

Pridėkite tai prie savo kodo:

pastebin.com/nGXeCpaH

html pateks į 2 skyrius.

apibrėžkime elementą.

pastebin.com/amjd0jnb

pastebėkite, kaip mes apibrėžėme vertę valstybėje. To mums prireiks vėliau.

atvaizdavimo funkcijoje hi pakeiskite {this.state.value}

pateikiame vertę, perduotą iš mūsų apibrėžtos būsenos.

taigi išbandykime!

„App“pateikimo funkcijoje pakeiskite ją taip:

pastebin.com/aGLX4jVE

jame turėtų būti rodoma reikšmė: "test".

pažiūrėkime, ar galime atlikti kelias užduotis!

užuot įpareigoję „React“pateikti tik vieną elementą, galime sukurti masyvą ir nurodyti „reaguoti“, kad pateiktų masyvą.

pakeiskite atvaizdavimo funkciją į šią:

pastebin.com/05nqsw71

tai turėtų atlikti 10 skirtingų užduočių. Atkreipkite dėmesį, kaip pridėjome raktus. Šie raktai naudojami kaip reagavimo ir mūsų identifikatoriai, jei mums jų reikia.

Dabar, kai mūsų užduočių sąrašas veikia, randame būdą, kaip įkelti užduotis. Čia ir atsiranda mūsų valstybė.

pridėkime prie mūsų konstruktorių.

pastebin.com/9jHAz2AS

Šiame konstruktoriuje mes perkėlėme taskArray nuo atvaizdavimo funkcijos į būseną. ištrinkite „taskArray“ir „loop“atvaizdavimo funkcijoje. pakeiskite „taskArray“div į šį.state.taskArray.

Iki šiol jūsų „App.js“kodas turėtų atrodyti taip:

pastebin.com/1iNtUnE6

3 žingsnis: objektų pridėjimo ir pašalinimo būdo pridėjimas

Pridėkime būdą pridėti ir pašalinti objektus. Suplanuokime tai.

Ko mums reikia?

• Tai būdas vartotojui pridėti objektus
• Vieta daiktams laikyti
• Būdas atgauti objektus

Ką mes naudosime?

• Elementas
• „Localsarage“API su JSON

Pradėkime nuo įvesties elemento.

žemiau {this.state.taskArray} pridėkite kodo įvestį ir mygtuką

Papildyti

Dabar turėtų būti teksto įvestis ir mygtukas Pridėti.

Šiuo metu tai nieko nedaro, todėl prie mūsų programos metodo pridėkime 6 metodus.

Mums reikia metodo, kaip spustelėti mygtuką, taip pat kai kas nors įveda įvestį. Mums taip pat reikia būdų, kaip sugeneruoti užduočių masyvą, taip pat išsaugoti, įkelti ir pašalinti užduotis.

pridėkime šiuos 6 metodus:

mygtukas Spustelėkite ()

inputTyped (evt)

geneTaskArray ()

„SaveTasks“(užduotys)

getTasks ()

removeTask (id)

taip pat pridėkime šį kintamąjį prie mūsų būsenos:

įvesties

Taip pat turime susieti savo funkcijas.

pastebin.com/syx465hD

Pradėkime pridėti funkcionalumą.

prie panašių pridėkite 2 atributus:

todėl vartotojas, įvesdamas bet ką įvestyje, atlieka šią funkciją.

pridėkite „onClick“atributą prie „Add like“taip:

Papildyti

kai vartotojas spustelėja mygtuką, funkcija vykdoma.

dabar, kai html dalis yra padaryta, pereikime prie funkcionalumo.

Aš jau iš anksto parašiau „localStorage“API sąsają, todėl pakeiskite „saveTasks“, „getTasks“ir „removeTask“funkcijas taip:

pastebin.com/G02cMPbi

pradėkime nuo „inputTyped“funkcijos.

kai vartotojas įveda, turime pakeisti vidinę įvesties vertę.

padarykime tai naudodami funkciją „setState“, pateiktą su „reaguoti“.

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

tokiu būdu galime gauti įvesties vertę.

kai tai bus padaryta, galime dirbti su mygtuko paspaudimo funkcija.

turime įtraukti užduotį į užduočių sąrašą. pirmiausia ištraukiame užduočių sąrašą iš „localStorage“, redaguojame ir tada išsaugome. Tada mes kviečiame užduoties sąrašo atnaujinimą, kad jį atnaujintume.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

mes gauname užduotis, įvedame įvesties vertę į užduotis ir tada išsaugome. Tada mes sugeneruojame užduočių masyvą.

Dabar dirbkime su funkcija geneTaskArray ().

mums reikia:

• gauti užduotis
• sukurti užduočių komponentų masyvą
• perduoti užduoties komponentus

mes galime gauti užduotis ir išsaugoti jas kintamajame naudodami „getTasks“()

var užduotys = getTasks (). užduotys

tada turime sukurti masyvą ir jį užpildyti.

pastebin.com/9gNXvNWe

tai dabar turėtų veikti.

PIRMINIS KODAS:

github.com/bluninja1234/todo_list_instructables

PAPILDOMOS IDĖJOS:

Pašalinimo funkcija (labai paprasta, pridėkite „onclick“ir ištrinkite naudodami „RemoveTask“iš raktų rodyklės)

CSS (taip pat paprasta, parašykite savo arba naudokite įkrovos režimą)