Reager mellemvejledning: 3 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Reager mellemtutorial

Se det færdige produkt her.

Hvad vil du lære?

Du opretter en simpel opgaveliste med React.js, og lærer om de mere komplicerede dele af reaktionen. Forudsætninger (stærkt anbefalet) fuldfører react.js startvejledningen. En viden om HTMLAn viden om CSS Grundlæggende shell -kommandoer Anstændig viden i JavaScript

Forbrugsvarer

Al software vil blive dækket af selvstudiet.

Du skal bruge en computer med følgende software installeret:

• npm/garn
• En IDE, der understøtter js
• En webbrowser

Trin 1: Reager mellemvejledning

Kom godt i gang

Hvorfor React.js?

Med React.js er pointen at genbruge kode. Sig f.eks., At du har en navigationslinje, som du har på 100 sider. Hvis du har brug for at tilføje en ny side, skal du ændre navigationslinjen på hver side, hvilket betyder, at du skal gøre det samme for 100 sider. Selv med makroer bliver dette meget kedeligt.

Installation af påkrævet software/pakker

Du får brug for:

npm/garn

Sådan installeres:

1. Gå og installer den nyeste LTS af Node.js
2. VALGFRIT: hvis du foretrækker garn som din pakkehåndterer, skal du installere garn ved at skrive i powershell npm install -g garn
3. Åbn powershell/cmd.exe
4. Naviger til det bibliotek, du gerne vil oprette dit projekt i
5. Skriv npx create-react-app.

Du har afsluttet installationsfasen. for at teste det, skal du åbne powershell, navigere til dit projektmappe og skrive npm start. du bør få en webside indlæst i din standardbrowser.

Trin 2: Trin 1: Kom godt i gang

For at starte skal du slette følgende filer fra din /src bibliotek:

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

Vi har ikke brug for disse filer.

Lad os også organisere vores filsystem. Opret disse mapper i /src /:

• js
• css

sætte App.js i js dir og App.css i css dir.

Lad os derefter omorganisere afhængighederne.

i index.js, fjern importen til serviceWorker og index.css. Slet serviceWorker.register (). Omdiriger stierne til App.

i App.js, fjern importen til logo.svg, da vi ikke længere har brug for det. Omdiriger app. Css. slet App () -funktionen og eksporten til App.

I React har vi 2 måder at definere elementer på. Vi har funktioner og klasser. funktioner er for mindre komplicerede emner, og klasser er generelt for mere komplicerede komponenter. Fordi en todo -liste er mere kompliceret end en masse HTML, vil vi bruge klassesyntaksen.

Føj dette til din kode:

pastebin.com/nGXeCpaH

html vil gå inden for de 2 divs.

lad os definere elementet.

pastebin.com/amjd0jnb

læg mærke til, hvordan vi definerede værdi i staten. Vi får brug for dette senere.

i gengivelsesfunktionen skal du erstatte hej med {this.state.value}

vi gengiver værdien, der passeres fra den tilstand, vi definerede.

så lad os teste det!

i render -funktionen i App, skal du erstatte den med denne:

pastebin.com/aGLX4jVE

den skal vise en værdi: "test".

lad os se, om vi kan gengive flere opgaver!

i stedet for at få React til at gengive kun et element, kan vi oprette en matrix af og fortælle react at gengive arrayet i stedet.

ændre render -funktionen til dette:

pastebin.com/05nqsw71

dette skulle udføre 10 forskellige opgaver. Bemærk, hvordan vi tilføjede nøgler. Disse nøgler bruges som identifikatorer for reagerer og os, hvis vi har brug for dem.

Nu hvor vores opgaveliste fungerer, finder vi en måde at indlæse opgaverne på. Det er her vores stat kommer ind.

lad os tilføje en konstruktør til vores.

pastebin.com/9jHAz2AS

I denne konstruktør flyttede vi taskArray væk fra render -funktionen til staten. slet taskArray og for loop i renderfunktionen. ændre taskArray i div til this.state.taskArray.

På nuværende tidspunkt skal din App.js -kode se sådan ud:

pastebin.com/1iNtUnE6

Trin 3: Tilføjelse af en måde at tilføje og fjerne objekter på

Lad os tilføje en måde at tilføje og fjerne objekter på. Lad os planlægge det.

Hvad har vi brug for?

• En måde for brugeren at tilføje objekter
• Et sted at gemme objekter
• En måde at hente objekterne på

Hvad skal vi bruge?

• Et element
• Localstorage API m/ JSON

Lad os starte med inputelementet.

under {this.state.taskArray} skal du tilføje en input og en knap til din kode

Tilføje

Der skal være en tekstindtastning og knappen Tilføj nu.

Det gør ingenting lige nu, så lad os tilføje 6 metoder til vores App -metode.

Vi har brug for en metode til, hvornår der klikkes på knappen, og også når nogen skriver input. Vi har også brug for en måde at generere opgavearrayet på, samt gemme, indlæse og fjerne opgaver.

lad os tilføje disse 6 metoder:

knap Klik ()

inputTyped (evt)

generereTaskArray ()

saveTasks (opgaver)

getTasks ()

removeTask (id)

lad os også tilføje denne variabel til vores tilstand:

input

Vi skal også binde vores funktioner hertil.

pastebin.com/syx465hD

Lad os begynde at tilføje funktionalitet.

tilføj 2 attributter til lignende, så:

dette gør det sådan, at når brugeren skriver noget i input, udfører den funktionen.

tilføj en onClick -attribut til Tilføj som:

Tilføje

når brugeren klikker på knappen, udføres funktionen.

nu hvor html -delen er færdig, lad os komme videre med funktionaliteten.

Jeg har allerede forhåndsskrevet localStorage API-grænsefladen, så udskift funktionerne saveTasks, getTasks og removeTask med dette:

pastebin.com/G02cMPbi

lad os starte med inputTyped -funktionen.

når brugeren skriver, skal vi ændre inputets interne værdi.

lad os gøre det ved at bruge setState -funktionen, der leveres med react.

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

på denne måde kan vi få værdien af input.

når det er gjort, kan vi arbejde på knappen ClickClick.

vi skal tilføje en opgave til opgavelisten. vi trækker først opgavelisten fra localStorage, redigerer den og gemmer den. Vi kalder derefter en genudgivelse af taskList for at opdatere den.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

vi får opgaverne, skubber inputværdien ind i opgaverne og gemmer den derefter. Vi genererer derefter opgavearrayet.

lad os nu arbejde på generereTaskArray () -funktionen.

vi er nødt til:

• få opgaver
• oprette en række opgavekomponenter
• videregive opgavekomponenterne til at gengive

vi kan få opgaverne og gemme dem i en variabel med getTasks ()

var opgaver = getTasks (). opgaver

vi skal derefter oprette en matrix og udfylde den.

pastebin.com/9gNXvNWe

det burde fungere nu.

KILDEKODE:

github.com/bluninja1234/todo_list_instructables

EKSTRA IDEER:

Fjernelsesfunktion (meget enkelt, tilføj et onclick og slet ved hjælp af removeTask fra nøgleindeks)

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