React Intermediate apmācība: 3 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:53

React Intermediate Tutorial

Gatavo produktu skatīt šeit.

Ko tu iemācīsies?

Izmantojot React.js, jūs izveidosit vienkāršu uzdevumu sarakstu un uzzināsit par sarežģītākajām reakcijas daļām. Priekšnosacījumi (ļoti ieteicams) aizpildiet reakcijas rokasgrāmatu. Zināšanas par HTML Zināšanas par CSS Pamata čaulas komandas Pienācīgas zināšanas par JavaScript

Piegādes

Visa programmatūra tiks apskatīta apmācībā.

Jums būs nepieciešams dators ar šādu programmatūru:

• npm/dzija
• IDE, kas atbalsta js
• Tīmekļa pārlūkprogramma

1. darbība. Reaģējiet uz vidēja līmeņa apmācību

Darba sākšana

Kāpēc tieši React.js?

Izmantojot React.js, mērķis ir atkārtoti izmantot kodu. Piemēram, pieņemsim, ka jums ir navigācijas josla 100 lapās. Ja jums jāpievieno jauna lapa, tad katrā lapā ir jāmaina navigācijas josla, kas nozīmē, ka 100 lapām ir jādara tas pats. Pat izmantojot makro, tas kļūst ļoti garlaicīgs.

Nepieciešamās programmatūras/pakotņu instalēšana

Jums būs nepieciešams:

npm/dzija

Kā instalēt:

1. Iet un instalējiet jaunāko NTS.js LTS
2. IZVĒLES: ja dodat priekšroku dzijai kā iepakojuma pārvaldniekam, instalējiet dziju, ierakstot powershell npm install -g dziju
3. Atveriet powershell/cmd.exe
4. Dodieties uz direktoriju, kurā vēlaties izveidot savu projektu
5. Ierakstiet lietotni npx create-reage-app.

Jūs esat pabeidzis iestatīšanas posmu. lai to pārbaudītu, atveriet PowerShell, dodieties uz projekta direktoriju un ierakstiet npm start. jums vajadzētu ielādēt tīmekļa lapu noklusējuma pārlūkprogrammā.

2. darbība: 1. darbība. Darba sākšana

Lai sāktu, izdzēsiet no direktorija /src šādus failus:

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

Mums šie faili nav vajadzīgi.

Sakārtosim arī savu failu sistēmu. Izveidojiet šos direktorijus mapē /src /:

• js
• css

ievietojiet App.js js dir un App.css css dir.

Tālāk pārkārtosim atkarības.

mapē index.js noņemiet servisa un domēna index.css importēšanu. Dzēst serviceWorker.register (). Pārkārtojiet lietotnes ceļus.

Programmā App.js noņemiet logo.svg importēšanu, jo mums tas vairs nav vajadzīgs. Maršruta lietotne. Css. dzēst funkciju App () un lietotnes eksportēšanu.

Programmā React mums ir divi elementu definēšanas veidi. Mums ir funkcijas un klases. funkcijas ir mazāk sarežģītiem priekšmetiem, un klases parasti ir sarežģītākām sastāvdaļām. Tā kā uzdevumu saraksts ir sarežģītāks par HTML kopu, mēs izmantosim klases sintaksi.

Pievienojiet to savam kodam:

pastebin.com/nGXeCpaH

html iet 2 divos.

definēsim elementu.

pastebin.com/amjd0jnb

ievērojiet, kā mēs valstī definējām vērtību. Tas mums būs vajadzīgs vēlāk.

renderēšanas funkcijā aizstāt hi ar {this.state.value}

mēs atveidojam vērtību, kas izieta no mūsu noteiktā stāvokļa.

tāpēc pārbaudīsim!

lietotnes renderēšanas funkcijā aizstājiet to ar šo:

pastebin.com/aGLX4jVE

tam vajadzētu parādīt vērtību: "tests".

redzēsim, vai varam veikt vairākus uzdevumus!

tā vietā, lai saņemtu React, lai tas atveidotu tikai vienu elementu, mēs varam izveidot masīvu un norādīt reaģēt, lai atveidotu masīvu.

mainīt renderēšanas funkciju uz šo:

pastebin.com/05nqsw71

tam vajadzētu veikt 10 dažādus uzdevumus. Ievērojiet, kā mēs pievienojām atslēgas. Šīs atslēgas tiek izmantotas kā reaģēšanas un mūsu identifikatori, ja mums tās ir vajadzīgas.

Tagad, kad mūsu uzdevumu saraksts darbojas, mēs atrodam veidu, kā ielādēt uzdevumus. Šeit ienāk mūsu valsts.

pievienosim mūsu konstruktoru.

pastebin.com/9jHAz2AS

Šajā konstruktorā mēs uzdevumu masīvu pārvietojām no renderēšanas funkcijas uz stāvokli. dzēst uzdevumu masīvu un cilni renderēšanas funkcijā. mainiet uzdevumā esošo uzdevumu masīvu uz šo.state.taskArray.

Šobrīd jūsu App.js kodam vajadzētu izskatīties šādi:

pastebin.com/1iNtUnE6

3. darbība: objektu pievienošanas un noņemšanas veida pievienošana

Pievienosim veidu, kā pievienot un noņemt objektus. Plānosim to.

Kas mums vajadzīgs?

• Veids, kā lietotājs var pievienot objektus
• Vieta priekšmetu uzglabāšanai
• Veids, kā atgūt objektus

Ko mēs izmantosim?

• Elements
• Vietējās uzglabāšanas API ar JSON

Sāksim ar ievades elementu.

zem {this.state.taskArray} pievienojiet kodam ievadi un pogu

Pievienot

Tagad vajadzētu būt teksta ievadei un pogai Pievienot.

Pašlaik tas neko nedara, tāpēc pievienosim mūsu lietotnes metodei 6 metodes.

Mums ir nepieciešama metode, kad tiek noklikšķināts uz pogas, kā arī kad kāds ievada ievadi. Mums ir nepieciešams arī veids, kā ģenerēt uzdevumu masīvu, kā arī saglabāt, ielādēt un noņemt uzdevumus.

pievienosim šīs 6 metodes:

poga Noklikšķiniet uz ()

inputTyped (evt)

generatedTaskArray ()

saveTasks (uzdevumi)

getTasks ()

removeTask (id)

mūsu stāvoklim pievienosim arī šo mainīgo:

ievadi

Mums arī ir jāsasaista savas funkcijas.

pastebin.com/syx465hD

Sāksim pievienot funkcionalitāti.

pievienojiet līdzīgus 2 atribūtus, lai:

tas padara to tā, ka tad, kad lietotājs ievada kaut ko ievadē, tas izpilda funkciju.

pievienojiet atribūtu onClick pievienošanai, piemēram, šādi:

Pievienot

kad lietotājs noklikšķina uz pogas, funkcija tiek izpildīta.

tagad, kad html daļa ir pabeigta, ķeramies pie funkcionalitātes.

Es jau iepriekš esmu uzrakstījis localStorage API saskarni, tāpēc aizstājiet funkcijas saveTasks, getTasks un removeTask ar šo:

pastebin.com/G02cMPbi

sāksim ar funkciju inputTyped.

kad lietotājs raksta, mums ir jāmaina ievades iekšējā vērtība.

darīsim to, izmantojot funkciju setState, kas nodrošināta ar reaģēšanu.

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

šādā veidā mēs varam iegūt ievades vērtību.

kad tas ir izdarīts, mēs varam strādāt pie pogas klikšķa funkcijas.

mums jāpievieno uzdevums uzdevumu sarakstam. vispirms mēs izvelkam uzdevumu sarakstu no localStorage, rediģējam un pēc tam saglabājam. Pēc tam mēs izsaucam uzdevumu saraksta atjaunošanu, lai to atjauninātu.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

mēs iegūstam uzdevumus, iespiežam ievades vērtību uzdevumos un pēc tam to saglabājam. Pēc tam mēs ģenerējam uzdevumu masīvu.

Tagad strādāsim ar funkciju generatorTaskArray ().

mums vajag:

• saņemt uzdevumus
• izveidot uzdevumu komponentu masīvu
• nodot renderēt uzdevuma komponentus

mēs varam iegūt uzdevumus un saglabāt tos mainīgā, izmantojot getTasks ()

var uzdevumi = getTasks (). uzdevumi

tad mums ir jāizveido masīvs un jāaizpilda tas.

pastebin.com/9gNXvNWe

tam vajadzētu strādāt tagad.

AVOTA KODS:

github.com/bluninja1234/todo_list_instructables

PAPILDU IDEJAS:

Noņemšanas funkcija (ļoti vienkārša, pievienojiet onclick un izdzēsiet, izmantojot noņemšanas uzdevumu no atslēgu indeksa)

CSS (arī vienkāršs, rakstiet pats vai izmantojiet bootstrap)