React Intermediate Tutorial: 3 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:34

React Intermediate Tutorial

Ovdje pogledajte gotov proizvod.

Što ćete naučiti?

S React.js ćete stvoriti jednostavan popis zadataka i naučiti o složenijim dijelovima reakcije. Preduvjeti (visoko preporučeno) dovršite vodič za početak reagiranja.js. Poznavanje HTMLAn -a, poznavanje CSS -ovih naredbi ljuske.

Pribor

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

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

• npm/pređa
• IDE koji podržava js
• Web preglednik

Korak 1: Reagirajte na srednjem vodiču

Početak rada

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 uz makronaredbe, 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. Dođite do direktorija u kojem želite stvoriti svoj projekt
5. Upišite npx create-response-app.

Dovrš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 direktorija /src:

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

Ne trebaju nam te datoteke.

Organizirajmo i naš datotečni sustav. Izradite ove direktorije u /src /:

• js
• css

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

Zatim, reorganizirajmo ovisnosti.

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 aplikaciju.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 komplicirane stavke, a klase su općenito za složenije komponente. Budući da je popis zadataka složeniji od hrpe HTML -a, upotrijebit ćemo sintaksu klase.

Dodajte ovo svom kodu:

pastebin.com/nGXeCpaH

html će ići unutar 2 diva.

definirajmo Element.

pastebin.com/amjd0jnb

uočiti kako smo definirali vrijednost u državi. 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 ovim:

pastebin.com/aGLX4jVE

trebao bi prikazati vrijednost: "test".

da vidimo možemo li iscrtati 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:

pastebin.com/05nqsw71

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

Sada kada naš popis zadataka radi, pronašli smo način za učitavanje zadataka. Tu dolazi naša država.

dodajmo konstruktor u naš.

pastebin.com/9jHAz2AS

U ovom konstruktoru premjestili smo taskArray dalje od funkcije render u stanje. obriš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. Isplanirajmo to.

Što trebamo?

• Način na koji korisnik dodaje objekte
• Mjesto za spremanje predmeta
• Način dohvaćanja objekata

Što ćemo koristiti?

• Element
• API za lokalnu pohranu s JSON -om

Počnimo s ulaznim elementom.

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

Dodati

Sada bi trebao postojati unos teksta i gumb Dodaj.

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

Potrebna nam je metoda kada se gumb pritisne, a također i kada netko unese 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:

ulazni

S tim također moramo vezati svoje funkcije.

pastebin.com/syx465hD

Počnimo dodavati funkcionalnost.

dodajte 2 atributa sličnom tako:

to znači da kada korisnik upiše bilo što u unos, izvršava funkciju.

dodajte atribut onClick u Dodaj ovako:

Dodati

kada korisnik pritisne gumb, funkcija se izvršava.

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

Već sam unaprijed napisao API sučelje localStorage, stoga zamijenite funkcije saveTasks, getTasks i removeTask s ovim:

pastebin.com/G02cMPbi

počnimo s inputTyped funkcijom.

kada korisnik upisuje, moramo promijeniti unutarnju vrijednost ulaza.

učinimo to pomoću funkcije setState koja je opremljena 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 popis zadataka. prvo izvlačimo popis zadataka iz localStorage, uređujemo ga, a zatim spremamo. Zatim pozivamo ponovno iscrtavanje taskLista 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 je spremamo. Zatim generiramo niz zadataka.

sada, poradimo na funkciji generatedTaskArray ().

moramo:

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

možemo dobiti zadatke i pohraniti ih u varijablu s 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đer jednostavno, napišite vlastiti ili upotrijebite bootstrap)