Obsah:
2025 Autor: John Day | [email protected]. Naposledy zmenené: 2025-01-13 06:58
Reagovat Intermediate Tutorial
Tu si pozrite hotový výrobok.
Čo sa naučíš
S React.js vytvoríte jednoduchý zoznam úloh a dozviete sa o komplikovanejších častiach reakcie. Predpoklady (vysoko odporúčané) dopĺňajú príručku React.js.
Zásoby
V návode bude popísaný všetok softvér.
Budete potrebovať počítač s nainštalovaným nasledujúcim softvérom:
- npm/priadza
- IDE, ktoré podporuje js
- Webový prehliadač
Krok 1: Reagujte na predbežný návod
Začíname
Prečo React.js?
V prípade React.js ide o opätovné použitie kódu. Povedzme napríklad, že máte navigačný panel, ktorý máte na 100 stranách. Ak potrebujete pridať novú stránku, musíte zmeniť navigačnú lištu na každej stránke, to znamená, že musíte urobiť to isté pre 100 strán. Aj s makrami to začína byť veľmi únavné.
Inštalácia požadovaného softvéru/balíkov
Budete potrebovať:
npm/priadza
Ako nainštalovať:
- Choďte a nainštalujte si najnovší LTS z Node.js
- VOLITELNÉ: ak dávate prednosť priadze ako správcovi balíkov, nainštalujte priadzu zadaním do powerhell npm install -g priadze
- Otvorte súbor powershell/cmd.exe
- Prejdite do adresára, v ktorom chcete vytvoriť projekt
- Zadajte príkaz npx create-reagovat-app.
Dokončili ste fázu nastavenia. Ak to chcete otestovať, otvorte PowerShell, prejdite do adresára projektu a zadajte príkaz npm start. mali by ste si načítať webovú stránku do predvoleného prehliadača.
Krok 2: Krok 1: Začíname
Ak chcete začať, odstráňte z priečinka /src nasledujúce súbory:
- App.test.js
- index.css
- logo.svg
- serviceWorker.js
- setupTests.js
Tieto súbory nepotrebujeme.
Usporiadajme tiež náš súborový systém. Vytvorte tieto adresáre v priečinku /src /:
- js
- css
vložte súbor App.js do priečinka js a súbor App.css do priečinka css.
Ďalej reorganizujme závislosti.
v index.js, odstráňte import pre serviceWorker a index.css. Odstrániť serviceWorker.register (). Presmerujte cesty pre aplikáciu.
v App.js odstráňte import pre logo.svg, pretože ho už nepotrebujeme. Presmerovať aplikáciu App.css. odstráňte funkciu App () a export pre aplikáciu.
V React máme 2 spôsoby definovania prvkov. Máme funkcie a triedy. funkcie sú pre menej komplikované položky a triedy sú spravidla pre komplikovanejšie komponenty. Pretože zoznam úloh je komplikovanejší ako veľa HTML, použijeme syntax triedy.
Pridajte to do svojho kódu:
pastebin.com/nGXeCpaH
html pôjde do dvoch div.
definujme Element.
pastebin.com/amjd0jnb
všimnite si, ako sme definovali hodnotu v štáte. Budeme to potrebovať neskôr.
vo funkcii vykresľovania nahraďte súborom {this.state.value}
vykresľujeme hodnotu, ktorou prešiel zo stavu, ktorý sme definovali.
tak to poďme otestovať!
vo funkcii vykresľovania aplikácie ho nahraďte týmto:
pastebin.com/aGLX4jVE
mala by zobrazovať hodnotu: „test“.
uvidíme, či dokážeme vykresliť viacero úloh!
namiesto toho, aby sme reagovali na vykreslenie iba jedného prvku, môžeme namiesto neho vytvoriť pole a povedať, aby reagovalo.
zmeňte funkciu vykresľovania na túto:
pastebin.com/05nqsw71
to by malo vykresliť 10 rôznych úloh. Všimnite si, ako sme pridali kľúče. Tieto kľúče sa používajú ako identifikátory reakcie a nás, ak ich potrebujeme.
Teraz, keď náš zoznam úloh funguje, nachádzame spôsob, ako načítať úlohy. Tu vstupuje náš štát.
pridajme do nášho konštruktora.
pastebin.com/9jHAz2AS
V tomto konštruktéri sme presunuli taskArray z funkcie renderovania do stavu. odstráňte slučku taskArray a for vo funkcii vykresľovania. zmeňte taskArray v div na this.state.taskArray.
Váš kód App.js by teraz mal vyzerať takto:
pastebin.com/1iNtUnE6
Krok 3: Pridanie spôsobu pridávania a odstraňovania objektov
Pridajme spôsob pridávania a odoberania predmetov. Poďme to naplánovať.
Čo potrebujeme?
- Spôsob, akým môže užívateľ pridávať objekty
- Miesto na uloženie predmetov
- Spôsob získavania predmetov
Čo budeme používať?
- Prvok
- Localstorage API s JSON
Začnime vstupným prvkom.
pod {this.state.taskArray} zadajte do kódu vstup a tlačidlo
Pridať
Teraz by malo existovať zadávanie textu a tlačidlo Pridať.
Momentálne to nič nerobí, takže do našej metódy App pridáme 6 metód.
Potrebujeme metódu, keď klikneme na tlačidlo, a tiež vtedy, keď niekto zadá vstup. Potrebujeme tiež spôsob, ako generovať pole úloh, ako aj ukladať, načítať a odstraňovať úlohy.
pridajme týchto 6 spôsobov:
tlačidlo Kliknite ()
inputTyped (evt)
generateTaskArray ()
saveTasks (úlohy)
getTasks ()
removeTask (id)
pridajme tiež túto premennú do nášho stavu:
vstup
K tomu musíme viazať aj svoje funkcie.
pastebin.com/syx465hD
Začnime s pridávaním funkcií.
pridajte 2 atribúty k podobným:
to robí to tak, že keď užívateľ zadá čokoľvek do vstupu, vykoná funkciu.
pridajte atribút onClick do položky Pridať ako takto:
Pridať
keď používateľ klikne na tlačidlo, funkcia sa spustí.
teraz, keď je časť html hotová, poďme na funkčnosť.
Rozhranie API localStorage som už napísal, takže funkcie saveTasks, getTasks a removeTask nahraďte týmto:
pastebin.com/G02cMPbi
začnime s funkciou inputTyped.
keď používateľ píše, musíme zmeniť vnútornú hodnotu vstupu.
urobme to pomocou funkcie setState poskytnutej s React.
this.setState ({input: evt.target.value});
týmto spôsobom môžeme získať hodnotu vstupu.
akonáhle je to hotové, môžeme pracovať na funkcii buttonClick.
musíme pridať úlohu do zoznamu úloh. najskôr vytiahneme zoznam úloh z localStorage, upravíme ho a potom uložíme. Potom zavoláme opätovné odoslanie zoznamu úloh, aby ho aktualizoval.
var taskList = this.getTasks ();
taskList.tasks.push (this.state.input);
this.saveTasks (taskList);
this.generateTaskArray ();
dostaneme úlohy, vložíme do úloh vstupnú hodnotu a potom ju uložíme. Potom vygenerujeme pole úloh.
poďme teraz pracovať na funkcii generateTaskArray ().
musíme:
- dostať úlohy
- vytvorte rad komponentov úlohy
- odovzdajte komponenty úlohy vykresleniu
môžeme získať úlohy a uložiť ich do premennej pomocou getTasks ()
var tasks = getTasks (). tasks
potom musíme vytvoriť pole a naplniť ho.
pastebin.com/9gNXvNWe
už by to malo fungovať.
ZDROJOVÝ KÓD:
github.com/bluninja1234/todo_list_instructables
EXTRA NÁPADY:
Funkcia odstránenia (veľmi jednoduché, pridajte onclick a odstráňte pomocou removeTask z indexu kľúčov)
CSS (tiež jednoduché, napíšte si vlastné alebo použite bootstrap)