React Intermediate Tutorial: 3 koraki

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:03

React Intermediate Tutorial

Končni izdelek si oglejte tukaj.

Kaj se boste naučili?

Ustvarili boste preprost seznam opravkov z React.js in spoznali bolj zapletene dele reakcije. Predpogoji (zelo priporočljivo) izpolnite priročnik za zagon React.js. Poznavanje HTMLA poznavanje ukazov lupine CSS Osnovno znanje dostojno v JavaScript

Zaloge

Vsa programska oprema bo obravnavana v vadnici.

Potrebovali boste računalnik z nameščeno naslednjo programsko opremo:

• npm/preja
• IDE, ki podpira js
• Spletni brskalnik

Korak 1: React Intermediate Tutorial

Začetek

Zakaj React.js?

Pri React.js je bistvo ponovna uporaba kode. Recimo, da imate navigacijsko vrstico, ki jo imate na 100 straneh. Če morate dodati novo stran, morate spremeniti navigacijsko vrstico na vsaki strani, kar pomeni, da morate narediti isto za 100 strani. Tudi pri makrih postane to zelo dolgočasno.

Namestitev potrebne programske opreme/paketov

Boste potrebovali:

npm/preja

Kako namestiti:

1. Pojdite in namestite najnovejši LTS Node.js
2. NEOBVEZNO: če imate raje prejo kot svojega upravitelja paketov, namestite prejo tako, da vtipkate v powershell npm install -g preja
3. Odprite powershell/cmd.exe
4. Pomaknite se do imenika, v katerem želite ustvariti svoj projekt
5. Vnesite npx create-response-app.

Končali ste nastavitveno fazo. če ga želite preizkusiti, odprite powershell, se pomaknite do imenika svojega projekta in vnesite npm start. v privzeti brskalnik bi morali naložiti spletno stran.

2. korak: 1. korak: Začnite

Za začetek izbrišite te datoteke iz imenika /src:

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

Teh datotek ne potrebujemo.

Organizirajmo tudi svoj datotečni sistem. Ustvarite te imenike v /src /:

• js
• css

postavite App.js v direktorij js in App.css v direktorij css.

Nato preuredimo odvisnosti.

v index.js odstranite uvoz za serviceWorker in index.css. Izbrišite serviceWorker.register (). Preusmerite poti za App.

v App.js odstranite uvoz za logo.svg, saj ga ne potrebujemo več. Preusmeri App.css. izbrišite funkcijo App () in izvoz za aplikacijo.

V React -u imamo dva načina definiranja elementov. Imamo funkcije in razrede. funkcije so za manj zapletene predmete, razredi pa na splošno za bolj zapletene komponente. Ker je seznam opravil bolj zapleten kot kup HTML, bomo uporabili sintakso razreda.

Kodi dodajte to:

pastebin.com/nGXeCpaH

html bo v okviru dveh razdelkov.

opredelimo Element.

pastebin.com/amjd0jnb

opazite, kako smo določili vrednost v stanju. To bomo potrebovali kasneje.

v funkciji upodabljanja hi zamenjajte s {this.state.value}

upodabljamo vrednost, preneseno iz stanja, ki smo ga definirali.

pa preizkusimo!

v funkciji upodabljanja aplikacije ga zamenjajte s tem:

pastebin.com/aGLX4jVE

prikazati mora vrednost: "test".

poglejmo, ali lahko upodobimo več opravil!

namesto da bi React upodobil samo en element, lahko ustvarimo matriko in naredimo response, naj upodobi matriko.

funkcijo upodabljanja spremenite v to:

pastebin.com/05nqsw71

to bi moralo povzročiti 10 različnih nalog. Upoštevajte, kako smo dodali ključe. Ti ključi se uporabljajo kot identifikatorji za reakcijo in nas, če jih potrebujemo.

Zdaj, ko naš seznam opravil deluje, najdemo način za nalaganje nalog. Tu nastopi naša država.

dodajmo konstruktor našemu.

pastebin.com/9jHAz2AS

V tem konstruktorju smo opravilo taskArray premaknili stran od funkcije upodabljanja v stanje. izbrišite zanko taskArray in for v funkciji upodabljanja. spremenite taskArray v div v this.state.taskArray.

Doslej bi morala biti vaša koda App.js videti tako:

pastebin.com/1iNtUnE6

3. korak: Dodajanje načina dodajanja in odstranjevanja predmetov

Dodajmo način dodajanja in odstranjevanja predmetov. Načrtujmo.

Kaj potrebujemo?

• Način, kako uporabnik doda predmete
• Prostor za shranjevanje predmetov
• Način pridobivanja predmetov

Kaj bomo uporabili?

• Element
• API za lokalno shranjevanje z JSON

Začnimo z vhodnim elementom.

pod {this.state.taskArray} kodi dodajte vnos in gumb

Dodaj

Zdaj bi moral biti vnos besedila in gumb Dodaj.

Trenutno ne počne ničesar, zato naj naši metodi aplikacije dodamo 6 metod.

Potrebujemo metodo, ko kliknemo gumb, pa tudi, ko nekdo vnese vnos. Potrebujemo tudi način za ustvarjanje matrike opravil ter shranjevanje, nalaganje in odstranjevanje opravil.

dodajmo teh 6 metod:

buttonClick ()

inputTyped (evt)

generirajTaskArray ()

saveTasks (opravila)

getTasks ()

removeTask (id)

dodajmo tej spremenljivki tudi naše stanje:

vnos

S tem moramo povezati tudi svoje funkcije.

pastebin.com/syx465hD

Začnimo dodajati funkcionalnost.

podobnemu dodajte 2 atributa:

zaradi česar uporabnik, ko vnese kaj v vnos, izvede funkcijo.

atributu onClick dodajte tako:

Dodaj

ko uporabnik klikne gumb, se funkcija izvede.

zdaj, ko je del html končan, nadaljujmo s funkcionalnostjo.

Vmesnik API za localStorage sem že vnaprej napisal, zato funkcije saveTasks, getTasks in removeTask zamenjajte s tem:

pastebin.com/G02cMPbi

začnimo s funkcijo inputTyped.

ko uporabnik tipka, moramo spremeniti notranjo vrednost vnosa.

naredimo to z uporabo funkcije setState, ki je opremljena z React.

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

na ta način lahko dobimo vrednost vnosa.

ko to storimo, lahko delamo na funkciji buttonClick.

na seznam opravil moramo dodati nalogo. najprej potegnemo seznam opravil iz localStorage, ga uredimo in nato shranimo. Nato pokličemo upodabljalnik taskList, da ga posodobimo.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

dobimo naloge, potisnemo vnosno vrednost v naloge in jo nato shranimo. Nato ustvarimo matriko opravil.

zdaj pa se lotimo funkcije createTaskArray ().

moramo:

• dobiti naloge
• ustvarite niz komponent opravila
• posredujte komponente naloge za upodabljanje

lahko dobimo naloge in jih shranimo v spremenljivko z getTasks ()

var tasks = getTasks (). tasks

potem moramo ustvariti matriko in jo napolniti.

pastebin.com/9gNXvNWe

zdaj bi moralo delovati.

KOD VIRA:

github.com/bluninja1234/todo_list_instructables

DODATNE IDEJE:

Funkcija odstranjevanja (zelo preprosto, dodajte onclick in izbrišite s pomočjo removeTask iz indeksa ključev)

CSS (tudi preprosto, napišite svoje ali uporabite zagonski pas)