Interaktivní výukový program: 3 kroky

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:20

Reagovat Intermediate Tutorial

Zde si prohlédněte hotový výrobek.

Co se naučíš?

Pomocí React.js vytvoříte jednoduchý seznam úkolů a dozvíte se o složitějších částech reagovat. Předpoklady (vysoce doporučeno) dokončí příručku React.js Začínáme. Znalost HTML Znalost CSSZákladní příkazy shellu Slušné znalosti v JavaScriptu

Zásoby

Veškerý software bude popsán v tutoriálu.

Budete potřebovat počítač s nainstalovaným následujícím softwarem:

• npm/příze
• IDE, které podporuje js
• Webový prohlížeč

Krok 1: React Intermediate Tutorial

Začínáme

Proč React.js?

U React.js jde o opětovné použití kódu. Řekněme například, že máte navigační panel, který máte na 100 stránkách. Pokud potřebujete přidat novou stránku, musíte změnit navigační lištu na každé stránce, což znamená, že musíte udělat totéž pro 100 stránek. I s makry to začíná být velmi únavné.

Instalace požadovaného softwaru/balíčků

Budete potřebovat:

npm/příze

Jak nainstalovat:

1. Přejděte a nainstalujte nejnovější LTS Node.js
2. VOLITELNÉ: pokud dáváte přednost správci balíčků, nainstalujte přízi zadáním do PowerShell NPM install -g příze
3. Otevřete powershell/cmd.exe
4. Přejděte do adresáře, ve kterém chcete vytvořit projekt
5. Zadejte npx create-reagovat-app.

Dokončili jste fázi nastavení. Chcete -li to vyzkoušet, otevřete prostředí PowerShell, přejděte do adresáře projektu a zadejte příkaz npm start. měli byste si ve výchozím prohlížeči načíst webovou stránku.

Krok 2: Krok 1: Začínáme

Chcete -li začít, odstraňte z adresáře /src následující soubory:

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

Tyto soubory nepotřebujeme.

Pojďme také uspořádat náš souborový systém. Vytvořte tyto adresáře v /src /:

• js
• css

vložte App.js do adresáře js a App.css do adresáře css.

Dále pojďme reorganizovat závislosti.

v index.js odeberte importy pro serviceWorker a index.css. Odstranit serviceWorker.register (). Přesměrovat cesty pro aplikaci.

v App.js odeberte import pro logo.svg, protože ho již nepotřebujeme. Přesměrovat App.css. odstraňte funkci App () a export pro aplikaci.

V React máme 2 způsoby definování prvků. Máme funkce a třídy. funkce jsou pro méně komplikované položky a třídy jsou obecně pro složitější součásti. Protože seznam úkolů je složitější než spousta HTML, použijeme syntaxi třídy.

Přidejte toto do kódu:

pastebin.com/nGXeCpaH

html půjde do 2 divů.

definujme Element.

pastebin.com/amjd0jnb

všimněte si, jak jsme definovali hodnotu ve stavu. Budeme to potřebovat později.

ve funkci vykreslení nahraďte hi za {this.state.value}

vykreslujeme hodnotu procházející ze stavu, který jsme definovali.

tak to vyzkoušíme!

ve funkci vykreslení aplikace ji nahraďte tímto:

pastebin.com/aGLX4jVE

měl by zobrazit hodnotu: "test".

uvidíme, jestli dokážeme vykreslit více úkolů!

namísto toho, abychom dostali React k vykreslení pouze jednoho prvku, můžeme místo toho vytvořit pole a říct, aby reagovalo na vykreslení pole.

změňte funkci vykreslení na toto:

pastebin.com/05nqsw71

to by mělo vykreslit 10 různých úkolů. Všimněte si, jak jsme přidali klíče. Tyto klíče se používají jako identifikátory pro reakci a nás, pokud bychom je potřebovali.

Nyní, když náš seznam úkolů funguje, jsme našli způsob, jak úkoly načíst. Tady vstupuje náš stát.

přidejme konstruktor do našeho.

pastebin.com/9jHAz2AS

V tomto konstruktoru jsme přesunuli taskArray pryč z funkce vykreslení do stavu. odstraňte smyčku taskArray a for ve funkci vykreslení. změňte taskArray v div na this.state.taskArray.

Nyní by váš kód App.js měl vypadat takto:

pastebin.com/1iNtUnE6

Krok 3: Přidání způsobu přidávání a odebírání objektů

Pojďme přidat způsob přidávání a odebírání objektů. Pojďme to naplánovat.

Co potřebujeme?

• Způsob, jakým může uživatel přidávat objekty
• Místo pro uložení předmětů
• Způsob načítání objektů

Co budeme používat?

• Prvek
• Localstorage API s JSON

Začněme vstupním prvkem.

pod {this.state.taskArray} přidejte do kódu vstup a tlačítko

Přidat

Nyní by mělo být zadávání textu a tlačítko Přidat.

V tuto chvíli nedělá nic, přidejme tedy do naší metody App 6 metod.

Potřebujeme metodu pro kliknutí na tlačítko a také pro to, když někdo zadá vstup. Potřebujeme také způsob generování pole úkolů a také ukládání, načítání a odebírání úkolů.

přidejme těchto 6 metod:

tlačítko Klikněte ()

inputTyped (evt)

generateTaskArray ()

saveTasks (úkoly)

getTasks ()

removeTask (id)

pojďme také přidat tuto proměnnou do našeho stavu:

vstup

K tomu musíme také svázat naše funkce.

pastebin.com/syx465hD

Začněme přidávat funkce.

přidejte 2 atributy podobně:

to dělá to tak, že když uživatel zadá cokoli na vstupu, provede funkci.

přidejte atribut onClick do Přidat jako takto:

Přidat

když uživatel klikne na tlačítko, funkce se spustí.

teď, když je html část hotová, pojďme se věnovat funkcím.

Rozhraní API localStorage jsem již napsal, nahraďte tedy funkce saveTasks, getTasks a removeTask tímto:

pastebin.com/G02cMPbi

začněme funkcí inputTyped.

když uživatel píše, musíme změnit vnitřní hodnotu vstupu.

Udělejme to pomocí funkce setState, která je poskytována s reagovat.

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

tímto způsobem můžeme získat hodnotu vstupu.

jakmile to bude hotové, můžeme pracovat na funkci buttonClick.

potřebujeme přidat úkol do seznamu úkolů. nejprve vytáhneme seznam úkolů z localStorage, upravíme ho a poté uložíme. Poté zavoláme rerenderu taskList, abychom jej aktualizovali.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

dostaneme úkoly, vložíme do úkolů vstupní hodnotu a poté ji uložíme. Poté vygenerujeme pole úloh.

pojďme nyní pracovat na funkci generateTaskArray ().

potřebujeme:

• dostávat úkoly
• vytvořit řadu komponent úkolů
• předejte součásti úlohy k vykreslení

můžeme získat úkoly a uložit je do proměnné pomocí getTasks ()

var úkoly = getTasks (). úkoly

pak musíme vytvořit pole a naplnit ho.

pastebin.com/9gNXvNWe

už by to mělo fungovat.

ZDROJOVÝ KÓD:

github.com/bluninja1234/todo_list_instructables

DALŠÍ NÁPADY:

Funkce odebrání (velmi jednoduché, přidejte onclick a odstraňte pomocí removeTask z indexu klíčů)

CSS (také jednoduché, napište si vlastní nebo použijte bootstrap)