Udhëzues React Intermediate: 3 Hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:15

Udhëzues React Intermediate

Shikoni produktin e përfunduar këtu.

Çfarë do të mësoni?

Ju do të krijoni një listë të thjeshtë të detyrave me React.js dhe do të mësoni për pjesët më të komplikuara të reagimit. Parakushtet (shumë të rekomanduara) plotësojnë reagimin. Js udhëzues për fillimin. Njohuri për HTML Njohuri për CSS Komandat bazë të guaskës Njohuri të mira në JavaScript

Furnizimet

I gjithë softueri do të mbulohet në tutorial.

Do t'ju duhet një kompjuter me programin e mëposhtëm të instaluar:

• npm/fije
• Një IDE që mbështet js
• Një shfletues uebi

Hapi 1: React Tutorial i ndërmjetëm

Fillimi

Pse React.js?

Me React.js, qëllimi është të ripërdorni kodin. Për shembull, thoni që keni një shirit navigimi që e keni në 100 faqe. Nëse keni nevojë të shtoni një faqe të re, atëherë duhet të ndryshoni shiritin e navigimit në çdo faqe, që do të thotë se duhet të bëni të njëjtën gjë për 100 faqe. Edhe me makro, kjo bëhet shumë e lodhshme.

Instalimi i programeve/paketave të kërkuara

Do t'ju duhet:

npm/fije

Si të instaloni:

1. Shkoni dhe instaloni LTS -në më të fundit të Node.js
2. OPSIONALE: nëse preferoni fije si menaxher paketash, instaloni fije duke shtypur në powerhell npm fije instalimi -g
3. Hapni fuqinë/cmd.exe
4. Shkoni te drejtoria në të cilën dëshironi të krijoni projektin tuaj
5. Shkruani npx krijoni-reagoni-aplikacionin.

Keni përfunduar fazën e konfigurimit. për ta testuar atë, hapni powerhell, lundroni në drejtorinë e projektit tuaj dhe shkruani npm start. duhet të merrni një faqe në internet të ngarkuar në shfletuesin tuaj të paracaktuar.

Hapi 2: Hapi 1: Fillimi

Për të filluar, fshini skedarët e mëposhtëm nga drejtoria juaj /src:

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

Ne nuk kemi nevojë për këto skedarë.

Le të organizojmë gjithashtu sistemin tonë të skedarëve. Krijoni këto drejtori në /src /:

• js
• css

vendosni App.js në drejtimin js dhe App.css në drejtimin css.

Tjetra, le të riorganizojmë varësitë.

në index.js, hiqni importet për serviceWorker dhe index.css. Fshi shërbiminWorker.register (). Ndrysho itinerarin e shtigjeve për Aplikacionin.

në App.js, hiqni importin për logo.svg, pasi nuk na nevojitet më. Rivendos App.css. fshini funksionin App () dhe eksportin për App.

Në React, ne kemi 2 mënyra për të përcaktuar elementet. Ne kemi funksione dhe klasa. funksionet janë për artikujt më pak të komplikuar, dhe klasat në përgjithësi janë për komponentë më të komplikuar. Për shkak se një listë e gjërave të vështira është më e komplikuar se një grup HTML, ne do të përdorim sintaksën e klasës.

Shtojeni këtë në kodin tuaj:

pastebin.com/nGXeCpaH

html do të shkojë brenda 2 divs.

le të përcaktojmë Elementin.

pastebin.com/amjd0jnb

vini re se si e përcaktuam vlerën në shtet. Kjo do të na duhet më vonë.

në funksionin e paraqitjes, zëvendësoni hi me {this.state.value}

ne po japim vlerën e kaluar nga gjendja që kemi përcaktuar.

kështu që le ta testojmë!

në funksionin e paraqitjes së Aplikacionit, zëvendësojeni atë me këtë:

pastebin.com/aGLX4jVE

duhet të shfaqë një vlerë: "test".

le të shohim nëse mund të kryejmë detyra të shumta!

në vend që të marrim React që të japë vetëm një element, ne mund të krijojmë një grup dhe të them reagojmë për të dhënë grupin në vend.

ndryshoni funksionin e paraqitjes në këtë:

pastebin.com/05nqsw71

kjo duhet të bëjë 10 detyra të ndryshme. Vini re se si kemi shtuar çelësat. Këto çelësa përdoren si identifikues për reagimin dhe ne, nëse kemi nevojë për to.

Tani që lista jonë e detyrave po funksionon, ne gjejmë një mënyrë për të ngarkuar detyrat. Këtu vjen shteti ynë.

le të shtojmë një konstruktor tek tonë.

pastebin.com/9jHAz2AS

Në këtë konstruktor, ne e zhvendosëm taskArray larg nga funksioni render në gjendje. fshini taskArray dhe for loop në funksionin render. ndryshoni taskArray në div në this.state.taskArray.

Deri tani, kodi juaj App.js duhet të duket kështu:

pastebin.com/1iNtUnE6

Hapi 3: Shtimi i një mënyre për të shtuar dhe hequr objekte

Le të shtojmë një mënyrë për të shtuar dhe hequr objekte. Le ta planifikojmë.

Çfarë na duhet?

• Një mënyrë që përdoruesi të shtojë objekte
• Një vend për të ruajtur objektet
• Një mënyrë për të tërhequr objektet

Çfarë do të përdorim?

• Një element
• API -ja e ruajtjes lokale me JSON

Le të fillojmë me elementin hyrës.

poshtë {this.state.taskArray}, shtoni një hyrje dhe buton në kodin tuaj

Shto

Duhet të ketë një buton të futjes së tekstit dhe Shto tani.

Nuk bën asgjë tani, kështu që le të shtojmë 6 metoda në metodën tonë të Aplikacionit.

Ne kemi nevojë për një metodë kur klikohet butoni, dhe gjithashtu kur dikush shkruan në hyrje. Ne gjithashtu kemi nevojë për një mënyrë për të gjeneruar grupin e detyrave, si dhe për të ruajtur, ngarkuar dhe hequr detyrat.

le të shtojmë këto 6 metoda:

buttonKliko ()

inputTyped (evt)

generateTaskArray ()

saveTasks (detyrat)

getTasks ()

removeTask (id)

Le të shtojmë gjithashtu këtë ndryshore në gjendjen tonë:

hyrja

Ne gjithashtu duhet të lidhim funksionet tona me këtë.

pastebin.com/syx465hD

Le të fillojmë të shtojmë funksionalitetin.

shtoni 2 atribute të ngjashme kështu:

kjo e bën atë që kur përdoruesi të shtypë ndonjë gjë në hyrje, ai ekzekuton funksionin.

shtoni një atribut onClick në Shto si kështu:

Shto

kur përdoruesi klikon butonin, funksioni ekzekutohet.

tani që pjesa html është bërë, le të vazhdojmë me funksionalitetin.

Unë tashmë kam shkruar paraprakisht ndërfaqen localStorage API, kështu që zëvendësoni funksionet saveTasks, getTasks dhe removeTask me këtë:

pastebin.com/G02cMPbi

le të fillojmë me funksionin inputTyped.

kur përdoruesi shkruan, ne duhet të ndryshojmë vlerën e brendshme të hyrjes.

le ta bëjmë këtë duke përdorur funksionin setState të pajisur me reagim.

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

në këtë mënyrë, ne mund të marrim vlerën e hyrjes.

pasi të jetë bërë, ne mund të punojmë në funksionin buttonClick.

duhet të shtojmë një detyrë në listën e detyrave. ne së pari tërheqim listën e detyrave nga localStorage, e modifikojmë dhe pastaj e ruajmë. Ne pastaj thërrasim një paraqitje të taskList për ta përditësuar atë.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

kjo.generateTaskArray ();

marrim detyrat, shtyjmë vlerën hyrëse në detyra dhe pastaj e ruajmë. Ne pastaj krijojmë grupin e detyrave.

tani, le të punojmë në funksionin generateTaskArray ().

ne duhet te:

• merrni detyra
• krijoni një grup komponentësh të detyrave
• kalojnë komponentët e detyrës për t'u dhënë

ne mund t'i marrim detyrat dhe t'i ruajmë ato në një ndryshore me getTasks ()

detyrat var = getTasks (). detyrat

atëherë duhet të krijojmë një grup dhe ta plotësojmë atë.

pastebin.com/9gNXvNWe

duhet të funksionojë tani.

KODI I BURIMIT:

github.com/bluninja1234/todo_list_instructables

IDE EXTRA:

Funksioni i heqjes (shumë i thjeshtë, shtoni një klikim dhe fshini duke përdorur removeTask nga indeksi kryesor)

CSS (gjithashtu e thjeshtë, shkruani tuajën ose përdorni bootstrap)