React Intermediate Tutorial: 3 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:05

React Intermediate Tutorial

Ovdje pogledajte gotov proizvod.

Šta ćete naučiti?

Napravit ćete jednostavnu listu zadataka s React.js-om i naučiti o složenijim dijelovima reakcije. Preduvjeti (visoko preporučeno) dovršite vodič za početak rada React.js. Poznavanje HTMLAna, poznavanje naredbi ljuske CSSBasic Nedovoljno znanje u JavaScript -u

Supplies

Sav softver će biti obrađen u vodiču.

Trebat će vam računar sa instaliranim sljedećim softverom:

• npm/pređa
• IDE koji podržava js
• Web pretraživač

Korak 1: Reagirajte na srednjem vodiču

Počinjemo

Zašto React.js?

S React.js, poanta je ponovna upotreba koda. Na primjer, recimo da imate navigacijsku traku koju imate na 100 stranica. Ako trebate dodati novu stranicu, tada morate promijeniti navigacijsku traku na svakoj stranici, što znači da morate učiniti istu stvar za 100 stranica. Čak i s makroima, ovo postaje vrlo zamorno.

Instaliranje potrebnog softvera/paketa

Trebat će vam:

npm/pređa

Kako instalirati:

1. Idite i instalirajte najnoviji LTS za Node.js
2. NEOBVEZNO: ako više volite pređu kao upravitelja paketa, instalirajte pređu upisivanjem u powershell npm install -g pređe
3. Otvorite powershell/cmd.exe
4. Idite do direktorija u kojem želite stvoriti svoj projekt
5. Upišite npx create-response-app.

Završili ste fazu postavljanja. da biste ga testirali, otvorite powershell, idite do direktorija vašeg projekta i upišite npm start. trebali biste učitati web stranicu u zadani preglednik.

Korak 2: Korak 1: Početak

Za početak, izbrišite sljedeće datoteke iz vašeg /src direktorija:

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

Ne trebaju nam ovi fajlovi.

Organizirajmo i naš datotečni sistem. Kreirajte ove direktorije u /src /:

• js
• css

stavite App.js u js dir i App.css u css dir.

Zatim, reorganizirajmo zavisnosti.

u index.js, uklonite uvoz za serviceWorker i index.css. Izbrišite serviceWorker.register (). Preusmjerite staze za App.

u App.js, uklonite uvoz za logo.svg, jer nam više ne treba. Preusmjeri App.css. izbrišite funkciju App () i izvoz za aplikaciju.

U React -u imamo 2 načina definiranja elemenata. Imamo funkcije i klase. funkcije su za manje složene stavke, a klase su općenito za složenije komponente. Budući da je popis zadataka složeniji od hrpe HTML -a, koristit ćemo sintaksu klase.

Dodajte ovo svom kodu:

pastebin.com/nGXeCpaH

html će ići unutar 2 diva.

definirajmo Element.

pastebin.com/amjd0jnb

uočite kako smo definirali vrijednost u stanju. Ovo će nam trebati kasnije.

u funkciji render zamijenite hi sa {this.state.value}

generiramo vrijednost prolaznu iz stanja koje smo definirali.

pa probajmo!

u funkciji renderiranja aplikacije zamijenite je sa ovom:

pastebin.com/aGLX4jVE

trebao bi prikazati vrijednost: "test".

da vidimo možemo li prikazati više zadataka!

umjesto da natjeramo React da iscrta samo jedan element, možemo stvoriti niz i narediti reagirati umjesto iscrtavanja niza.

promijenite funkciju renderiranja u na ovo:

pastebin.com/05nqsw71

ovo bi trebalo donijeti 10 različitih zadataka. Obratite pažnju na to kako smo dodali ključeve. Ovi ključevi se koriste kao identifikatori za reakciju i mi, ako nam zatrebaju.

Sada kada naša lista zadataka radi, pronašli smo način da učitamo zadatke. Tu nastupa naša država.

dodajmo konstruktor u naš.

pastebin.com/9jHAz2AS

U ovom konstruktoru premjestili smo taskArray dalje od funkcije render u stanje. izbrišite taskArray i for petlju u funkciji render. promijenite taskArray u div u this.state.taskArray.

Do sada bi vaš kod App.js trebao izgledati ovako:

pastebin.com/1iNtUnE6

Korak 3: Dodavanje načina dodavanja i uklanjanja objekata

Dodajmo način dodavanja i uklanjanja objekata. Hajde da to isplaniramo.

Šta nam treba?

• Način na koji korisnik dodaje objekte
• Mesto za skladištenje predmeta
• Način dohvaćanja objekata

Šta ćemo koristiti?

• Element
• API lokalnog skladišta s JSON -om

Počnimo s ulaznim elementom.

ispod {this.state.taskArray}, dodajte kod i dugme svom kodu

Dodati

Sada bi trebao postojati unos teksta i dugme Dodaj.

Trenutno ne radi ništa, pa dodajmo 6 metoda našoj metodi aplikacije.

Potrebna nam je metoda kada se pritisne dugme, a takođe i kada neko otkuca unos. Također nam je potreban način za generiranje niza zadataka, kao i spremanje, učitavanje i uklanjanje zadataka.

dodajmo ovih 6 metoda:

buttonClick ()

inputTyped (evt)

generatedTaskArray ()

saveTasks (zadaci)

getTasks ()

removeTask (id)

dodajmo i ovu varijablu našem stanju:

ulaz

S tim moramo povezati i svoje funkcije.

pastebin.com/syx465hD

Počnimo dodavati funkcionalnost.

dodajte 2 atributa sličnom tako:

ovo čini tako da kada korisnik upiše bilo što u unos, izvršava funkciju.

dodajte onClick atribut u Add ovako:

Dodati

kada korisnik pritisne dugme, funkcija se izvršava.

sad kad je html dio gotov, nastavimo s funkcionalnošću.

Već sam unaprijed napisao lokalno skladišno API sučelje, pa zamijenite funkcije saveTasks, getTasks i removeTask s ovim:

pastebin.com/G02cMPbi

počnimo s inputTyped funkcijom.

kada korisnik otkuca, moramo promijeniti unutrašnju vrijednost unosa.

učinimo to koristeći funkciju setState koja se isporučuje s React.

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

na ovaj način možemo dobiti vrijednost ulaza.

nakon što to učinimo, možemo raditi na funkciji buttonClick.

moramo dodati zadatak na listu zadataka. prvo povlačimo listu zadataka iz localStorage, uređujemo je, a zatim je spremamo. Zatim pozivamo ponovno iscrtavanje taskListe kako bismo ga ažurirali.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

dobivamo zadatke, ubacujemo ulaznu vrijednost u zadatke, a zatim ih spremamo. Zatim generiramo niz zadataka.

sada, poradimo na funkciji generatedTaskArray ().

mi moramo:

• dobiti zadatke
• stvoriti niz komponenti zadatka
• proslijedite komponente zadatka za iscrtavanje

možemo dobiti zadatke i pohraniti ih u varijablu sa getTasks ()

var tasks = getTasks (). tasks

tada moramo stvoriti niz i popuniti ga.

pastebin.com/9gNXvNWe

sad bi trebalo raditi.

IZVORNI KOD:

github.com/bluninja1234/todo_list_instructables

DODATNE IDEJE:

Funkcija uklanjanja (vrlo jednostavno, dodajte onclick i izbrišite pomoću removeTask iz indeksa ključeva)

CSS (takođe jednostavno, napišite svoj vlastiti ili koristite bootstrap)