React Intermediate Tutorial: 3 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:43

Reactează tutorialul intermediar

Vizualizați produsul finit aici.

Ce vei învăța?

Veți crea o listă simplă de sarcini cu React.js și veți afla despre părțile mai complicate ale reacției. Cerințe preliminare (foarte recomandate) completează ghidul de inițiere react.js. O cunoștințe de HTML O cunoaștere a CSS Comenzi shell de bază Cunoaștere decentă în JavaScript

Provizii

Toate programele software vor fi acoperite în tutorial.

Veți avea nevoie de un computer cu următorul software instalat:

• npm / fire
• Un IDE care acceptă js
• Un browser web

Pasul 1: Reacționați tutorialul intermediar

Noțiuni de bază

De ce React.js?

Cu React.js, scopul este reutilizarea codului. De exemplu, spuneți că aveți o bară de navigare pe care o aveți în 100 de pagini. Dacă trebuie să adăugați o pagină nouă, atunci trebuie să schimbați bara de navigare de pe fiecare pagină, ceea ce înseamnă că trebuie să faceți același lucru pentru 100 de pagini. Chiar și cu macro-urile, acest lucru devine foarte obositor.

Instalarea software-ului / pachetelor necesare

Vei avea nevoie:

npm / fire

Cum să instalați:

1. Du-te și instalează cel mai recent LTS al Node.js
2. OPȚIONAL: dacă preferați fire ca manager de pachete, instalați fire tastând în powershell npm install -g fire
3. Deschideți powershell / cmd.exe
4. Navigați la directorul în care doriți să creați proiectul
5. Tastați npx create-react-app.

Ați finalizat faza de configurare. pentru a-l testa, deschideți PowerShell, navigați la directorul de proiect și tastați npm start. ar trebui să primiți o pagină web încărcată în browserul dvs. implicit.

Pasul 2: Pasul 1: Noțiuni introductive

Pentru a începe, ștergeți următoarele fișiere din directorul / src:

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

Nu avem nevoie de aceste fișiere.

Să ne organizăm și sistemul de fișiere. Creați aceste directoare în / src /:

• js
• css

puneți App.js în directorul js și App.css în directorul css.

În continuare, să reorganizăm dependențele.

în index.js, eliminați importurile pentru serviceWorker și index.css. Ștergeți serviceWorker.register (). Redirecționați căile pentru aplicație.

în App.js, eliminați importul pentru logo.svg, deoarece nu mai avem nevoie de el. Redirecționați App.css. ștergeți funcția App () și exportul pentru aplicație.

În React, avem 2 moduri de a defini elemente. Avem funcții și clase. funcțiile sunt pentru elemente mai puțin complicate, iar clasele sunt în general pentru componente mai complicate. Deoarece o listă de activități este mai complicată decât o grămadă de HTML, vom folosi sintaxa clasei.

Adăugați acest lucru la codul dvs.:

pastebin.com/nGXeCpaH

html va intra în cele 2 divs.

să definim Elementul.

pastebin.com/amjd0jnb

observați cum am definit valoarea în stat. Vom avea nevoie de asta mai târziu.

în funcția de redare, înlocuiți hi cu {this.state.value}

redăm valoarea trecută din starea pe care am definit-o.

deci hai să-l testăm!

în funcția de redare a aplicației, înlocuiți-o cu aceasta:

pastebin.com/aGLX4jVE

ar trebui să afișeze o valoare: „test”.

să vedem dacă putem reda mai multe activități!

în loc să obținem React pentru a reda doar un singur element, putem crea o matrice și să spunem să reacționeze pentru a reda matricea.

schimbați funcția de redare a la aceasta:

pastebin.com/05nqsw71

aceasta ar trebui să redea 10 sarcini diferite. Observați cum am adăugat chei. Aceste chei sunt folosite ca identificatori pentru react și pentru noi, dacă avem nevoie de ele.

Acum că lista noastră de sarcini funcționează, găsim o modalitate de a încărca sarcinile. Aici intervine statul nostru.

să adăugăm un constructor la.

pastebin.com/9jHAz2AS

În acest constructor, am mutat taskArray departe de funcția de redare în stare. ștergeți taskArray și bucla for în funcția de redare. schimbați taskArray-ul din div în this.state.taskArray.

Până acum, codul dvs. App.js ar trebui să arate astfel:

pastebin.com/1iNtUnE6

Pasul 3: Adăugarea unui mod de a adăuga și a elimina obiecte

Să adăugăm o modalitate de a adăuga și elimina obiecte. Să o planificăm.

De ce avem nevoie?

• O modalitate prin care utilizatorul poate adăuga obiecte
• Un loc pentru depozitarea obiectelor
• O modalitate de a recupera obiectele

Ce vom folosi?

• Un element
• API-ul localstorage w / JSON

Să începem cu elementul de intrare.

sub {this.state.taskArray}, adăugați o intrare și un buton la cod

Adăuga

Ar trebui să existe o introducere de text și un buton Adăugare acum.

Nu face nimic în acest moment, așa că haideți să adăugăm 6 metode la metoda noastră pentru aplicații.

Avem nevoie de o metodă pentru momentul în care se face clic pe buton și, de asemenea, atunci când cineva tastează intrarea. De asemenea, avem nevoie de o modalitate de a genera matricea de sarcini, precum și de a salva, încărca și elimina sarcini.

să adăugăm aceste 6 metode:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTask (sarcini)

getTasks ()

removeTask (id)

să adăugăm și această variabilă la starea noastră:

intrare

De asemenea, trebuie să ne legăm funcțiile de acest lucru.

pastebin.com/syx465hD

Să începem să adăugăm funcționalitate.

adăugați 2 atribute similare astfel:

acest lucru face ca atunci când utilizatorul tastează ceva în intrare, să execute funcția.

adăugați un atribut onClick la Add like so:

Adăuga

când utilizatorul face clic pe buton, funcția se execută.

acum că partea html este terminată, să continuăm cu funcționalitatea.

Am deja scris în prealabil interfața API localStorage, așa că înlocuiți funcțiile saveTasks, getTasks și removeTask cu aceasta:

pastebin.com/G02cMPbi

să începem cu funcția inputTyped.

când utilizatorul tastează, trebuie să schimbăm valoarea internă a intrării.

să facem acest lucru folosind funcția setState furnizată cu react.

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

în acest fel, putem obține valoarea intrării.

odată ce ați terminat, putem lucra la funcția buttonClick.

trebuie să adăugăm o sarcină la lista de sarcini. mai întâi extragem lista de activități din localStorage, o edităm și apoi o salvăm. Apelăm apoi la un rerender al taskList-ului pentru ao actualiza.

var taskList = this.getTasks ();

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

this.saveTasks (taskList);

this.generateTaskArray ();

primim sarcinile, împingem valoarea de intrare în sarcini și apoi o salvăm. Apoi generăm matricea de sarcini.

acum, să lucrăm la funcția generateTaskArray ().

avem nevoie să:

• obține sarcini
• creați o serie de componente de activitate
• treceți componentele sarcinii de redat

putem obține sarcinile și le putem stoca într-o variabilă cu getTasks ()

var tasks = getTasks (). sarcini

atunci trebuie să creăm o matrice și să o populăm.

pastebin.com/9gNXvNWe

ar trebui să funcționeze acum.

COD SURSA:

github.com/bluninja1234/todo_list_instructables

IDEI SUPLIMENTARE:

Funcția de eliminare (foarte simplă, adăugați un clic și ștergeți folosind removeTask din indexul cheii)

CSS (de asemenea, simplu, scrieți-vă propriul sau utilizați bootstrap)