Reagovať medziľahlý návod: 3 kroky

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:57

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ť:

1. Choďte a nainštalujte si najnovší LTS z Node.js
2. VOLITELNÉ: ak dávate prednosť priadze ako správcovi balíkov, nainštalujte priadzu zadaním do powerhell npm install -g priadze
3. Otvorte súbor powershell/cmd.exe
4. Prejdite do adresára, v ktorom chcete vytvoriť projekt
5. 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)