React Mafunzo ya kati: 3 Hatua

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:50

Tenda Mafunzo ya Kati

Angalia bidhaa iliyokamilishwa hapa.

Utajifunza nini?

Utaunda orodha rahisi ya kufanya na React.js, na ujifunze juu ya sehemu ngumu zaidi za kuguswa. Mahitaji (yaliyopendekezwa sana) hukamilisha mwongozo wa kuanza kuguswa.js Maarifa ya HTML Ujuzi wa CSS Amri za msingi za ganda Maarifa ya ndani katika JavaScript

Vifaa

Programu zote zitafunikwa katika mafunzo.

Utahitaji kompyuta na programu ifuatayo imewekwa:

• npm / uzi
• IDE inayounga mkono js
• Kivinjari cha wavuti

Hatua ya 1: React Mafunzo ya kati

Kuanza

Kwa nini React.js?

Na React.js, ukweli ni kutumia tena nambari. Kwa mfano, sema una bar ya urambazaji ambayo unayo katika kurasa 100. Ikiwa unahitaji kuongeza ukurasa mpya, basi unahitaji kubadilisha mwambaa wa kusogea kwenye kila ukurasa, ikimaanisha kuwa lazima ufanye kitu kimoja kwa kurasa 100. Hata na macros, hii inakuwa ngumu sana.

Kusakinisha Programu / Vifurushi

Utahitaji:

npm / uzi

Jinsi ya kufunga:

1. Nenda na usakinishe LTS ya hivi karibuni ya Node.js
2. UCHAGUZI: ikiwa unapendelea uzi kama msimamizi wako wa kifurushi, weka uzi kwa kuandika kwenye Powerhell npm install -g uzi
3. Fungua Powerhell / cmd.exe
4. Nenda kwenye saraka ambayo ungependa kuunda mradi wako
5. Andika npx kuunda-kuguswa-programu.

Umekamilisha awamu ya usanidi. kuijaribu, fungua Powerhell, nenda kwenye saraka ya mradi wako, na andika npm kuanza. unapaswa kupata ukurasa wa wavuti kupakiwa kwenye kivinjari chako chaguomsingi.

Hatua ya 2: Hatua ya 1: Kuanza

Kuanza, futa faili zifuatazo kutoka kwa saraka yako / src:

• Jaribio la App
• index.css
• nembo.svg
• hudumaWorker.js
• setupTests.js

Hatuhitaji faili hizi.

Wacha pia tuandae mfumo wetu wa faili. Unda saraka hizi katika / src /:

• js
• css

weka App.js kwenye js dir na App.css kwenye css dir.

Ifuatayo, wacha tujipange upya utegemezi.

katika index.js, ondoa uagizaji wa hudumaWorker na index.css. Futa serviceWorker.register (). Rudia njia mpya za App.

katika App.js, ondoa kuagiza kwa logo.svg, kwani hatuitaji tena. Programu ya Reroute.css. futa kazi ya App () na usafirishaji wa App.

Katika React, tuna njia 2 za kufafanua vitu. Tuna kazi na madarasa. kazi ni za vitu visivyo ngumu sana, na madarasa kwa ujumla ni vifaa ngumu zaidi. Kwa sababu orodha ya todo ni ngumu zaidi kuliko rundo la HTML, tutatumia sintaksia ya darasa.

Ongeza hii kwenye nambari yako:

pastebin.com/nGXeCpaH

html itaingia ndani ya divs mbili.

wacha tufafanue Kipengele.

pastebin.com/amjd0jnb

angalia jinsi tulivyoelezea thamani katika jimbo. Tutahitaji hii baadaye.

katika kazi ya kutoa, badilisha hi na {this.state.value}

tunatoa dhamana iliyopitishwa kutoka kwa serikali ambayo tulielezea.

basi wacha tuijaribu!

katika kazi ya kutoa ya App, ibadilishe na hii:

pastebin.com/aGLX4jVE

inapaswa kuonyesha thamani: "mtihani".

wacha tuone ikiwa tunaweza kutoa Kazi nyingi!

badala ya kupata React kutoa kitu kimoja tu, tunaweza kuunda safu ya na kuwaambia kuguswa kutoa safu badala yake.

badilisha kazi ya kutoa kwa hii:

pastebin.com/05nqsw71

hii inapaswa kutoa kazi 10 tofauti. Angalia jinsi tulivyoongeza funguo. Funguo hizi hutumiwa kama vitambulisho vya kuguswa na sisi, ikiwa tutazihitaji.

Sasa kwa kuwa orodha yetu ya kazi inafanya kazi, tunapata njia ya kupakia kazi hizo. Hapa ndipo hali yetu inapoingia.

wacha tuongeze mjenzi kwa yetu.

pastebin.com/9jHAz2AS

Katika mjenzi huyu, tulihamisha kaziArray mbali na kazi ya kutoa kwenda kwa serikali. futa taskArray na kwa kitanzi katika kazi ya kutoa. badilisha kaziArray katika div kuwa this.state.taskArray.

Kufikia sasa, nambari yako ya App.js inapaswa kuonekana kama hii:

pastebin.com/1iNtUnE6

Hatua ya 3: Kuongeza Njia ya Kuongeza na Kuondoa Vitu

Wacha tuongeze njia ya kuongeza na kuondoa vitu. Wacha tuipange.

Tunahitaji nini?

• Njia ya mtumiaji kuongeza vitu
• Mahali pa kuhifadhi vitu
• Njia ya kurudisha vitu

Tutatumia nini?

• Kipengele
• Hifadhi ya ndani API w / JSON

Wacha tuanze na kipengee cha kuingiza.

chini ya {this.state.taskArray}, ongeza pembejeo na kitufe kwenye nambari yako

Ongeza

Lazima kuwe na maandishi na kitufe cha Ongeza sasa.

Haifanyi chochote sasa hivi, kwa hivyo wacha tuongeze njia 6 kwa njia yetu ya App.

Tunahitaji njia ya wakati kitufe kinabofya, na pia wakati mtu anapoandika kwenye ingizo. Tunahitaji pia njia ya kutengeneza safu ya kazi, na pia kuokoa, kupakia, na kuondoa kazi.

wacha tuongeze njia hizi 6:

kifungo Bonyeza ()

pembejeoTyped (evt)

kuzalishaTaskArray ()

saveTasks (majukumu)

GetTasks ()

kuondoaTask (id)

wacha pia tuongeze mabadiliko haya kwa jimbo letu:

pembejeo

Tunahitaji pia kufunga majukumu yetu kwa hii.

pastebin.com/syx465hD

Wacha tuanze kuongeza utendaji.

ongeza sifa 2 kwa kama hivyo:

hii inafanya hivyo kwamba wakati mtumiaji anaandika chochote kwenye pembejeo, hufanya kazi hiyo.

ongeza sifa yaBonyeza kwenye Ongeza kama vile:

Ongeza

wakati mtumiaji anabofya kitufe, kazi hufanya.

sasa kwa kuwa sehemu ya html imefanywa, wacha tuendelee na utendaji.

Tayari nimeandika kiolesura cha API ya Uhifadhi wa ndani, kwa hivyo badilisha kazi za kuokoa, pata kazi, na uondoe kazi za hii:

pastebin.com/G02cMPbi

wacha tuanze kwenye kazi iliyoingizwa.

wakati mtumiaji anaandika, tunahitaji kubadilisha thamani ya ndani ya pembejeo.

wacha tufanye hivyo kwa kutumia kazi ya setState iliyotolewa na athari.

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

kwa njia hii, tunaweza kupata thamani ya pembejeo.

mara tu hiyo ikimaliza, tunaweza kufanya kazi kwenye kitufe cha Bonyeza kazi.

tunahitaji kuongeza kazi kwenye orodha ya kazi. kwanza tunatoa orodha ya kazi kutoka kwa Uhifadhi wa ndani, kuihariri, na kisha kuihifadhi. Halafu tunaita kujisalimisha kwa orodha ya kazi ili kuisasisha.

var taskList = this.getTasks ();

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

hii.saveTasks (taskList);

hii.generateTaskArray ();

tunapata kazi, sukuma dhamana ya kuingiza kwenye kazi, na kisha uihifadhi. Kisha tunazalisha safu ya kazi.

sasa, hebu tufanye kazi kwenye kazi ya kuzalishaTaskArray ().

Tunahitaji ku:

• pata kazi
• tengeneza safu ya vifaa vya kazi
• kupitisha vifaa vya kazi ili kutoa

tunaweza kupata kazi na kuzihifadhi kwa kutofautisha na GetTasks ()

kazi za var = kupata kazi (). majukumu

basi tunahitaji kuunda safu na kuijaza.

pastebin.com/9gNXvNWe

inapaswa kufanya kazi sasa.

CHANZO CHA CHANZO:

github.com/bluninja1234/todo_list_instructables

Mawazo ya Ziada:

Kazi ya kuondoa (rahisi sana, ongeza onclick na ufute kwa kutumia removeTask kutoka kwa faharisi ya ufunguo)

CSS (pia ni rahisi, andika yako mwenyewe au utumie bootstrap)