React Intermediate -opetusohjelma: 3 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:00

React Intermediate -opetusohjelma

Katso valmis tuote täältä.

Mitä opit?

Voit luoda yksinkertaisen tehtävälistan React.js-ohjelmalla ja oppia reagoinnin monimutkaisemmista osista. Edellytykset (erittäin suositeltava) suorita reage.js -aloitusopas. HTML -tietämys CSS: n peruskomentojen tuntemus

Tarvikkeet

Kaikki ohjelmistot käsitellään opetusohjelmassa.

Tarvitset tietokoneen, johon on asennettu seuraava ohjelmisto:

• npm/lanka
• IDE, joka tukee js: ää
• Verkkoselain

Vaihe 1: Reagoi Intermediate -opetusohjelma

Päästä alkuun

Miksi React.js?

React.js: n avulla on tarkoitus käyttää koodia uudelleen. Oletetaan esimerkiksi, että sinulla on 100 sivun navigointipalkki. Jos sinun on lisättävä uusi sivu, sinun on vaihdettava jokaisen sivun navigointipalkki, mikä tarkoittaa, että sinun on tehtävä sama asia 100 sivulle. Makroista huolimatta tästä tulee erittäin työlästä.

Vaadittujen ohjelmistojen/pakettien asentaminen

Tarvitset:

npm/lanka

Miten asentaa:

1. Mene ja asenna uusin LTS of Node.js
2. VALINNAINEN: jos haluat lankaa paketinhallintana, asenna lanka kirjoittamalla powershell npm install -g -lanka
3. Avaa powershell/cmd.exe
4. Siirry hakemistoon, johon haluat luoda projektisi
5. Kirjoita npx create-reage-app.

Olet suorittanut asennusvaiheen. Testaa se, avaa PowerShell, siirry projektihakemistoosi ja kirjoita npm start. sinun pitäisi ladata verkkosivu oletusselaimeesi.

Vaihe 2: Vaihe 1: Aloittaminen

Aloita poistamalla seuraavat tiedostot /src -hakemistostasi:

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

Emme tarvitse näitä tiedostoja.

Järjestämme myös tiedostojärjestelmämme. Luo nämä hakemistot /src /:

• js
• css

laita App.js js -ohjaimeen ja App.css css -ohjaimeen.

Seuraavaksi järjestetään riippuvuudet uudelleen.

Poista index.js -tiedostosta serviceWorker- ja index.css -tiedostojen tuonti. Poista serviceWorker.register (). Reititä sovelluksen polut uudelleen.

poista sovelluksen logo.svg tuonti sovelluksesta App.js, koska emme enää tarvitse sitä. Uudelleenreititys App. Css. poista sovellus () -toiminto ja sovelluksen vienti.

Reactissa meillä on kaksi tapaa määritellä elementtejä. Meillä on toimintoja ja luokkia. funktiot ovat vähemmän monimutkaisille kohteille ja luokat yleensä monimutkaisemmille komponenteille. Koska tehtävälista on monimutkaisempi kuin joukko HTML -tiedostoja, käytämme luokan syntaksia.

Lisää tämä koodiin:

pastebin.com/nGXeCpaH

html menee 2 divin sisään.

määritellään elementti.

pastebin.com/amjd0jnb

Huomaa, kuinka määrittelimme arvon tilassa. Tarvitsemme tätä myöhemmin.

korvaa renderöintitoiminnolla hi tällä: {this.state.value}

renderoimme määrittämästämme tilasta kulkevan arvon.

niin testataan!

korvaa se sovelluksen renderöintitoiminnolla seuraavasti:

pastebin.com/aGLX4jVE

sen pitäisi näyttää arvo: "testi".

katsotaan pystymmekö tekemään useita tehtäviä!

sen sijaan, että saisimme Reactin renderöimään vain yhden elementin, voimme luoda sen sijaan taulukon ja kertoa, että renderöi taulukon.

muuta render -toiminto tähän:

pastebin.com/05nqsw71

Tämän pitäisi tehdä 10 erilaista tehtävää. Huomaa, kuinka lisäsimme avaimet. Näitä avaimia käytetään reagoinnin ja meidän tunnistimina, jos tarvitsemme niitä.

Nyt kun tehtäväluettelomme toimii, löydämme tavan ladata tehtävät. Tässä meidän valtiomme tulee.

lisätään joukkoon rakentaja.

pastebin.com/9jHAz2AS

Tässä konstruktorissa siirrettiin taskArray pois render -funktiosta tilaan. poista taskArray ja silmukka render -toiminnossa. vaihda divin taskArray -arvoksi this.state.taskArray.

Tähän mennessä App.js -koodisi pitäisi näyttää tältä:

pastebin.com/1iNtUnE6

Vaihe 3: Lisää tapa poistaa ja lisätä kohteita

Lisätään tapa lisätä ja poistaa objekteja. Suunnitellaan se.

Mitä me tarvitsemme?

• Käyttäjän tapa lisätä objekteja
• Paikka esineiden säilyttämiseen
• Tapa hakea esineitä

Mitä aiomme käyttää?

• Elementti
• Localstorage -sovellusliittymä ja JSON

Aloitetaan syöttöelementistä.

Lisää {this.state.taskArray} -kohdan alle koodi ja syöte

Lisätä

Tekstinsyötön ja Lisää -painikkeen pitäisi olla nyt.

Se ei tee mitään juuri nyt, joten lisätään 6 menetelmää sovellusmenetelmäämme.

Tarvitsemme menetelmän, kun painiketta napsautetaan, ja myös silloin, kun joku kirjoittaa syötteen. Tarvitsemme myös tavan luoda tehtäväryhmä sekä tallentaa, ladata ja poistaa tehtäviä.

lisätään nämä 6 menetelmää:

Napsauta ()

inputTyped (evt)

geneTaskArray ()

saveTasks (tehtävät)

getTasks ()

removeTask (tunnus)

lisätään myös tämä muuttuja tilaamme:

tulo

Meidän on myös sidottava toimintamme tähän.

pastebin.com/syx465hD

Aloitetaan toiminnallisuuden lisäämisestä.

lisää 2 attribuuttia vastaavaan, joten:

tämä tekee siitä niin, että kun käyttäjä kirjoittaa mitä tahansa syötteeseen, se suorittaa toiminnon.

lisää onClick -attribuutti Lisää tykkää -tilaan näin:

Lisätä

Kun käyttäjä napsauttaa painiketta, toiminto suoritetaan.

nyt kun html -osa on valmis, jatketaan toiminnallisuuden kanssa.

Olen jo kirjoittanut localStorage-sovellusliittymän käyttöliittymän, joten korvaa saveTasks-, getTasks- ja removeTask-toiminnot tällä:

pastebin.com/G02cMPbi

aloitetaan inputTyped -funktiosta.

kun käyttäjä kirjoittaa, meidän on muutettava tulon sisäistä arvoa.

Tehdään se käyttämällä reaktorin mukana toimitettua setState -toimintoa.

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

tällä tavalla voimme saada syötteen arvon.

Kun tämä on tehty, voimme työskennellä buttonClick -toiminnon parissa.

meidän on lisättävä tehtävä tehtäväluetteloon. ensin vedämme tehtäväluettelon localStorage -palvelusta, muokataan sitä ja tallennamme sen. Sen jälkeen kutsumme taskListin uudelleenhakemuksen päivittääksesi sen.

var taskList = this.getTasks ();

taskList.tasks.push (tämä.valtio.tulo);

this.saveTasks (taskList);

this.generateTaskArray ();

saamme tehtävät, työnnämme syöttöarvon tehtäviin ja tallennamme sen. Luomme sitten tehtäväryhmän.

nyt, työskennellään GeneTaskArray () -funktion parissa.

meidän täytyy:

• saada tehtäviä
• luoda joukko tehtävän osia
• välittää tehtäväkomponentit renderöitavaksi

voimme saada tehtävät ja tallentaa ne muuttujaan getTasks (): n avulla

var -tehtävät = getTasks ()

meidän on sitten luotava taulukko ja täytettävä se.

pastebin.com/9gNXvNWe

sen pitäisi toimia nyt.

LÄHDEKOODI:

github.com/bluninja1234/todo_list_instructables

LISÄideoita:

Poistotoiminto (erittäin yksinkertainen, lisää onclick ja poista poistamalla tehtävä avainhakemistosta)

CSS (myös yksinkertainen, kirjoita oma tai käytä bootstrapia)