React Intermediate bemutató: 3 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:40

React Intermediate bemutató

Tekintse meg a kész terméket itt.

Mit fog tanulni?

Egy egyszerű teendőlistát készít a React.js segítségével, és megismerheti a reagálás bonyolultabb részeit. Előfeltételek (erősen ajánlott) töltse ki area.js kezdő útmutatót. HTML ismeretek CSS ismeretek Alap shell parancsok Jók a JavaScript ismeretei

Kellékek

Minden szoftver szerepel az oktatóanyagban.

Szüksége lesz egy számítógépre, amelyen a következő szoftver telepítve van:

• npm/fonal
• Egy IDE, amely támogatja a js -t
• Egy webböngésző

1. lépés: React Intermediate Tutorial

Elkezdeni

Miért a React.js?

A React.js esetében a lényeg a kód újrafelhasználása. Tegyük fel például, hogy van egy navigációs sávja, amely 100 oldalon található. Ha új oldalt kell hozzáadnia, akkor minden oldalon módosítania kell a navigációs sávot, vagyis 100 oldal esetén ugyanazt kell tennie. Ez még makrók esetén is nagyon unalmassá válik.

A szükséges szoftverek/csomagok telepítése

Szükséged lesz:

npm/fonal

Hogyan kell telepíteni:

1. Menjen és telepítse a Node.js legújabb LTS -jét
2. Választható: ha a fonalat részesíti előnyben csomagkezelőként, telepítse a fonalat a PowerShell npm install -g fonal beírásával
3. Nyissa meg a powershell/cmd.exe fájlt
4. Keresse meg azt a könyvtárat, amelyben a projektet létre kívánja hozni
5. Írja be az npx create-reage-app parancsot.

Befejezte a beállítási fázist. teszteléséhez nyissa meg a PowerShellt, navigáljon a projektkönyvtárhoz, és írja be az npm start parancsot. egy weboldalt kell betöltenie az alapértelmezett böngészőbe.

2. lépés: 1. lépés: Első lépések

A kezdéshez törölje a következő fájlokat a /src könyvtárból:

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

Nincs szükségünk ezekre a fájlokra.

Szervezzük meg fájlrendszerünket is. Hozza létre ezeket a könyvtárakat a /src /fájlban:

• js
• css

helyezze az App.js -t a js dir -be és az App.css -t a css dir -be.

Ezután rendezzük át a függőségeket.

az index.js fájlban távolítsa el a serviceWorker és az index.css importálását. ServiceWorker.register () törlése. Útvonalazza újra az App elérési útjait.

Az App.js alkalmazásban távolítsa el a logo.svg importálását, mivel már nincs rá szükségünk. Újratervezés App.css. törölje az App () függvényt és az App exportálását.

A React -ban kétféleképpen definiálhatjuk az elemeket. Vannak funkcióink és osztályaink. a függvények kevésbé bonyolult elemekre vonatkoznak, az osztályok általában bonyolultabb összetevőkre. Mivel a feladatlista bonyolultabb, mint egy csomó HTML, az osztály szintaxisát fogjuk használni.

Add hozzá ezt a kódodhoz:

pastebin.com/nGXeCpaH

a html a 2 div -en belül lesz.

határozzuk meg az elemet.

pastebin.com/amjd0jnb

figyeljük meg, hogyan definiáltuk az értéket az államban. Erre később szükségünk lesz.

a render függvényben a hi helyettesítse ezt: {this.state.value}

az általunk definiált állapotból átadott értéket jelenítjük meg.

szóval teszteljük!

az App megjelenítési funkciójában cserélje le erre:

pastebin.com/aGLX4jVE

értéket kell megjelenítenie: "teszt".

nézzük meg, hogy több feladatot tudunk -e megjeleníteni!

ahelyett, hogy a React csak egy elemet renderelne, létrehozhatunk egy tömböt, és azt mondhatjuk, hogy reagáljon a tömb megjelenítésére.

módosítsa a render függvényt erre:

pastebin.com/05nqsw71

ennek 10 különböző feladatot kell végrehajtania. Figyelje meg, hogyan adtuk hozzá a kulcsokat. Ezeket a kulcsokat azonosítóként használjuk a reagáláshoz és nekünk, ha szükségünk van rájuk.

Most, hogy működik a feladatlistánk, megtaláljuk a feladatok betöltésének módját. Itt jön be az államunk.

adjunk hozzá egy konstruktőrt a miénkhez.

pastebin.com/9jHAz2AS

Ebben a konstruktorban eltávolítottuk a taskArray -t a render függvénytől az állapotba. törölje a taskArray és a hurkot a render függvényben. változtassa meg a div feladatban lévő tömbjét erre. állapot.feladatArray

Mostanra az App.js kódjának így kell kinéznie:

pastebin.com/1iNtUnE6

3. lépés: Mód hozzáadása objektumok hozzáadásához és eltávolításához

Adjunk hozzá egy módot az objektumok hozzáadására és eltávolítására. Tervezzük meg.

Mire van szükségünk?

• A felhasználó módszere objektumok hozzáadására
• Tárgyak tárolási helye
• Az objektumok lekérésének módja

Mit fogunk használni?

• Egy elem
• A localsorage API w/ JSON

Kezdjük a bemeneti elemmel.

az {this.state.taskArray} alatt adjon meg egy bemenetet és gombot a kódhoz

Hozzáadás

Most szövegbevitelnek és Hozzáadás gombnak kell lennie.

Jelenleg nem tesz semmit, ezért adjunk hozzá 6 módszert az App módszerhez.

Szükségünk van egy módszerre, amikor a gombra kattintanak, és akkor is, ha valaki beírja a bemenetet. Szükségünk van a feladatsor létrehozására, valamint a feladatok mentésére, betöltésére és eltávolítására is.

adjuk hozzá ezt a 6 módszert:

gombKattintson ()

inputTyped (evt)

createTaskArray ()

saveTasks (feladatok)

getTasks ()

removeTask (azonosító)

ezt a változót is adjuk hozzá állapotunkhoz:

bemenet

A funkcióinkat is ehhez kell kötnünk.

pastebin.com/syx465hD

Kezdjük a funkcionalitás hozzáadásával.

adjunk hozzá 2 attribútumot a hasonlókhoz, így:

ez azt eredményezi, hogy amikor a felhasználó bármit beír a bemenetbe, akkor végrehajtja a funkciót.

adjon hozzá egy onClick attribútumot a Hozzáadás like -hoz, így:

Hozzáadás

amikor a felhasználó rákattint a gombra, a funkció végrehajtódik.

Most, hogy a html rész elkészült, folytassuk a funkcionalitást.

Már előre megírtam a localStorage API felületét, ezért cserélje le a saveTasks, getTasks és removeTask függvényeket ezzel:

pastebin.com/G02cMPbi

kezdjük az inputTyped függvénnyel.

amikor a felhasználó gépel, meg kell változtatnunk a bemenet belső értékét.

tegyük ezt a reages mellékelt setState függvény használatával.

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

így megkaphatjuk a bemenet értékét.

ha ez megtörtént, dolgozhatunk a buttonClick funkción.

hozzá kell adnunk egy feladatot a feladatlistához. először előhívjuk a feladatlistát a localStorage -ból, szerkesztjük, majd elmentjük. Ezután a taskList újrarendelését hívjuk frissítésre.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

megkapjuk a feladatokat, benyomjuk a bemeneti értéket a feladatokba, majd elmentjük. Ezután létrehozzuk a feladatsort.

most dolgozzunk a generatorTaskArray () függvényen.

szükségünk van:

• feladatokat szerezni
• hozzon létre egy tömb összetevőt
• adja át a feladatösszetevőket a megjelenítéshez

megkaphatjuk a feladatokat, és eltárolhatjuk őket egy változóban a getTasks () segítségével

var feladatok = getTasks (). feladatok

akkor létre kell hoznunk egy tömböt, és ki kell töltenünk.

pastebin.com/9gNXvNWe

most már működnie kell.

FORRÁSKÓD:

github.com/bluninja1234/todo_list_instructables

EXTRA ÖTLETEK:

Eltávolítási funkció (nagyon egyszerű, adjon hozzá egy kattintást, és törölje az removeTask segítségével a kulcsindexből)

CSS (szintén egyszerű, írja meg sajátját vagy használja a bootstrap -ot)