Reager mellomtrening: 3 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:22

Reager mellomtidsopplæring

Se ferdig produkt her.

Hva vil du lære?

Du vil lage en enkel gjøremålsliste med React.js, og lære om de mer kompliserte delene av reaksjon. Forutsetninger (sterkt anbefalt) fullfører react.js startguide. Kunnskap om HTMLA kjennskap til CSS Grunnleggende skallkommandoer Anstendig kunnskap i JavaScript

Rekvisita

All programvare vil bli dekket i opplæringen.

Du trenger en datamaskin med følgende programvare installert:

• npm/garn
• En IDE som støtter js
• En nettleser

Trinn 1: Reager mellomtrening

Starter

Hvorfor React.js?

Med React.js er poenget å gjenbruke koden. La oss for eksempel si at du har en navigasjonslinje på 100 sider. Hvis du trenger å legge til en ny side, må du endre navigasjonslinjen på hver side, noe som betyr at du må gjøre det samme for 100 sider. Selv med makroer blir dette veldig kjedelig.

Installere nødvendig programvare/pakker

Du vil trenge:

npm/garn

Hvordan installere:

1. Gå og installer den nyeste LTS av Node.js
2. VALGFRITT: Hvis du foretrekker garn som pakkeleder, installerer du garn ved å skrive inn powershell npm install -g garn
3. Åpne powershell/cmd.exe
4. Naviger til katalogen du vil opprette prosjektet i
5. Skriv npx create-react-app.

Du har fullført installasjonsfasen. for å teste det, åpne powershell, naviger til prosjektkatalogen og skriv npm start. du bør få en webside lastet inn i standardleseren din.

Trinn 2: Trinn 1: Komme i gang

For å starte, slett følgende filer fra /src -katalogen:

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

Vi trenger ikke disse filene.

La oss også organisere filsystemet vårt. Lag disse katalogene i /src /:

• js
• css

legg App.js inn i js dir og App.css i css dir.

La oss deretter omorganisere avhengighetene.

i index.js, fjern importen for serviceWorker og index.css. Slett serviceWorker.register (). Omdiriger banene for App.

i App.js, fjern importen for logo.svg, ettersom vi ikke trenger det lenger. Omdiriger app. Css. slett App () -funksjonen og eksporten for App.

I React har vi to måter å definere elementer på. Vi har funksjoner og klasser. funksjoner er for mindre kompliserte elementer, og klasser er generelt for mer kompliserte komponenter. Fordi en todo -liste er mer komplisert enn en haug med HTML, vil vi bruke klassesyntaksen.

Legg dette til koden din:

pastebin.com/nGXeCpaH

html vil gå innenfor de 2 divs.

la oss definere elementet.

pastebin.com/amjd0jnb

legg merke til hvordan vi definerte verdi i staten. Vi trenger dette senere.

i gjengivelsesfunksjonen, erstatt hei med {this.state.value}

vi gjengir verdien som passerte fra staten vi definerte.

så la oss teste det!

i gjengivelsesfunksjonen til App, erstatt den med denne:

pastebin.com/aGLX4jVE

den skal vise verdien: "test".

la oss se om vi kan gjengi flere oppgaver!

i stedet for å få React til å gjengi bare ett element, kan vi lage en matrise og fortelle react å gjengi matrisen i stedet.

endre gjengivelsesfunksjonen til dette:

pastebin.com/05nqsw71

dette bør gjengi 10 forskjellige oppgaver. Legg merke til hvordan vi la til nøkler. Disse nøklene brukes som identifikatorer for reaksjon og oss, hvis vi trenger dem.

Nå som oppgavelisten vår fungerer, finner vi en måte å laste oppgavene på. Det er her staten vår kommer inn.

la oss legge en konstruktør til vår.

pastebin.com/9jHAz2AS

I denne konstruktøren flyttet vi taskArray bort fra gjengivelsesfunksjonen til tilstanden. slett taskArray og for loop i gjengivelsesfunksjonen. endre taskArray i div til this.state.taskArray.

Nå skal App.js -koden din se slik ut:

pastebin.com/1iNtUnE6

Trinn 3: Legge til en måte å legge til og fjerne objekter

La oss legge til en måte å legge til og fjerne objekter. La oss planlegge det.

Hva trenger vi?

• En måte for brukeren å legge til objekter
• Et sted å lagre gjenstander
• En måte å hente gjenstandene på

Hva skal vi bruke?

• Et element
• Localstorage API m/ JSON

La oss starte med inngangselementet.

under {this.state.taskArray}, legg til en inngang og knapp i koden din

Legge til

Det bør være en tekstinnskriving og Legg til -knapp nå.

Det gjør ingenting akkurat nå, så la oss legge til 6 metoder i vår App -metode.

Vi trenger en metode for når du klikker på knappen, og også når noen skriver inn input. Vi trenger også en måte å generere oppgavearrayet på, samt lagre, laste inn og fjerne oppgaver.

la oss legge til disse 6 metodene:

knapp Klikk på ()

inputTyped (evt)

generereTaskArray ()

saveTasks (oppgaver)

getTasks ()

removeTask (id)

la oss også legge denne variabelen til vår tilstand:

input

Vi må også binde funksjonene våre til dette.

pastebin.com/syx465hD

La oss begynne å legge til funksjonalitet.

legg til 2 attributter til lignende slik:

dette gjør det slik at når brukeren skriver noe i inngangen, utfører den funksjonen.

legg til et onClick -attributt til Legg til slik:

Legge til

når brukeren klikker på knappen, kjøres funksjonen.

nå som html -delen er ferdig, la oss fortsette med funksjonaliteten.

Jeg har allerede forhåndsskrevet localStorage API-grensesnittet, så bytt ut saveTasks, getTasks og removeTask-funksjonene med dette:

pastebin.com/G02cMPbi

la oss starte med inputTyped -funksjonen.

når brukeren skriver, må vi endre den interne verdien til inngangen.

la oss gjøre det ved å bruke setState -funksjonen som følger med react.

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

på denne måten kan vi få verdien av inngangen.

når det er gjort, kan vi jobbe med knappen ClickClick.

vi må legge til en oppgave på oppgavelisten. vi trekker først oppgavelisten fra localStorage, redigerer den og lagrer den. Vi kaller deretter en gjengivelse av taskList for å oppdatere den.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

vi får oppgavene, skyver inngangsverdien inn i oppgavene, og lagrer den deretter. Vi genererer deretter oppgavearrayen.

La oss nå jobbe med generereTaskArray () -funksjonen.

vi må:

• få oppgaver
• lage en rekke oppgavekomponenter
• passerer oppgavekomponentene for å gjengi

vi kan få oppgavene og lagre dem i en variabel med getTasks ()

var oppgaver = getTasks (). oppgaver

vi må da lage en matrise og fylle den ut.

pastebin.com/9gNXvNWe

det burde fungere nå.

KILDEKODE:

github.com/bluninja1234/todo_list_instructables

EKSTRA IDEER:

Fjerningsfunksjon (veldig enkelt, legg til et onclick og slett ved hjelp av removeTask from key index)

CSS (også enkel, skriv din egen eller bruk bootstrap)