Fiind cea mai populară bibliotecă frontend, toată lumea vrea să învețe React. ReactJS este în principiu JavaScript. Dar asta nu înseamnă că trebuie să înveți totul în JavaScript pentru a trece la ReactJS. Înțelegerea conceptelor fundamentale JavaScript vă va ajuta să înțelegeți mai ușor conceptele React și, în cele din urmă, vă va accelera capacitatea de a lucra la proiecte.
Să subliniem conceptele esențiale pe care ar trebui să le cunoașteți despre JavaScript înainte de a trece la ReactJS.
1. Funcții săgeți
Funcțiile săgeată sunt utilizate pe scară largă în React. Începând cu versiunea 16.8, React a trecut de la componente bazate pe clasă la componente funcționale. Funcții săgeți vă permit să creați funcții cu o sintaxă mai scurtă.
Să ilustrăm asta în următoarele exemple:
Funcție obișnuită
funcţieSalut() {
întoarcere'Buna ziua'
}
consolă.log (felicitare()) //helloFuncția săgeată
lăsa salut = () =>'Buna ziua'
consolă.log (felicitare()) //helloCele două funcții de mai sus au aceeași ieșire, deși sintaxa este diferită. Funcția săgeată pare mai scurtă și mai curată decât funcția obișnuită. De obicei, componentele React au următoarea structură:
import Reacţiona din'reacţiona'const Carte = () => {
întoarcere (
Carte</div>)
}
exportMod implicit Carte
Funcțiile săgeată nu au nume. Dacă doriți să-i denumiți, atribuiți-o unei variabile. Diferența dintre o funcție obișnuită și o funcție săgeată este mai mult decât sintaxă. Aflați mai multe despre funcțiile săgeților în Mozilla documentația dezvoltatorilor.
2. Destructurarea
Destructurarea este utilizată pentru a obține date din structuri complexe de date. În JavaScript, matricele și obiectele pot stoca multe valori. Puteți manipula valorile și le puteți utiliza în diferite părți ale aplicației.
Pentru a obține aceste valori, trebuie să destructurați variabila. În funcție de structura de date cu care aveți de-a face, puteți utiliza notația punct (.) sau notația paranteze. De exemplu:
const student = {'Nume': "Maria",
'abordare': „South Park, Bethleem”,
'vârstă': 15
}
Destructurare:
consolă.log (nume.student) // ieșire pe MaryÎn exemplul de mai sus, notația cu puncte accesează valoarea cheii „nume”. În ReactJS, veți folosi conceptul de destructurare pentru a obține și a împărtăși valori în aplicația dvs. Destructurarea ajută la evitarea repetării și face codul mai ușor de citit.
3. Metode de matrice
Veți întâlni matrice de mai multe ori în timp ce lucrați la proiecte React. O matrice este o colecție de date. Stocați datele în matrice, astfel încât să le puteți reutiliza atunci când este necesar.
Metodele matrice sunt utilizate în principal pentru a manipula, prelua și afișa date. Unele metode de matrice utilizate în mod obișnuit sunt Hartă(), filtru(), și reduce(). Trebuie să fii familiarizat cu metode matrice pentru a înțelege când să aplici fiecare.
De exemplu, cel Hartă() metoda iterează peste toate elementele dintr-o matrice. Acționează asupra fiecărui element al matricei pentru a crea o nouă matrice.
const numere = [9, 16, 25, 36];
const squaredArr = numere.hartă(Matematică.sqrt) // 3,4,5,6
Veți folosi multe metode de matrice în ReactJS. Le veți folosi pentru a converti matrice în șiruri de caractere, pentru a alătura, adăuga elemente și elimina elemente din alte matrice.
4. Condiționale scurte
Condiționalele sunt declarații pe care JavaScript le folosește pentru a lua decizii în cod. Condiționalele scurte includ && (și), II (sau) și Operatorul Ternar. Acestea sunt expresii mai scurte ale condițiilor și declarațiile if/else.
Următorul exemplu arată cum să utilizați un operator ternar.
Cod cu declarația if/else:
funcţieora de deschidere(zi) {
dacă (ziua == DUMINICĂ) {
întoarcere12;
}
altfel {
întoarcere9;
}
}Cod cu operator ternar:
funcţieora de deschidere(zi) {
întoarcere zi == DUMINICĂ? 12: 9;
}Invata despre diferite tipuri de condiționale cu un accent special pe condiționalele scurte. Acestea sunt utilizate pe scară largă în React.
5. Literale șablon
Literale șabloane folosesc back-bicks (``) pentru a defini un șir. Literalele de șablon vă permit să manipulați datele șirurilor, făcându-le mai dinamice. Literalele șablonului etichetate vă permit să efectuați operații într-un șir. Acestea sunt expresii mai scurte ale condițiilor și declarațiile if/else.
De exemplu:
lăsa prenume = "Jane";lăsa prenume = "Căprioară";
lăsa text = `Bine ai venit ${firstName}, ${lastName}!`; // Bun venit Jane Doe!
6. Operatori de răspândire
Operatorul Spread (...) copiază valorile unui obiect sau matrice în altul. Sintaxa sa constă din trei puncte urmate de numele variabilei. De exemplu (...nume). Acesta îmbină proprietățile a două matrice sau obiecte.
Următorul exemplu arată cum să utilizați operatorul spread pentru a copia valorile unei variabile în alta.
const nume = ["Maria", „Jane”];
const groupMembers = ["Fred", ...nume, "Angela"]; // ["Fred", "Mary", "Jane", "Angela"]
Puteți utiliza operatorul de împrăștiere pentru a efectua o serie de operațiuni. Acestea includ copierea conținutului unei matrice, inserarea unei matrice în alta, accesarea matricelor imbricate și transmiterea matricelor ca argumente. Puteți utiliza operatorul de răspândire din ReactJS pentru a gestiona schimbările de stare ale componentelor.
De ce să înveți ReactJS?
ReactJS este popular din motive întemeiate. Are o curbă scurtă de învățare, fiabilă și se redă rapid la DOM. Acceptă componente autonome și are instrumente excelente de depanare.
ReactJS încorporează noi concepte JavaScript din ECMAScript 6 (ES6). Învățarea conceptelor fundamentale în JavaScript va facilita dezvoltarea proiectelor în ReactJS.
În plus, ReactJS are o comunitate grozavă care lansează în mod constant noi actualizări. Dacă doriți să învățați o bibliotecă JavaScript, ReactJS ar fi o alegere excelentă. Cadrul Next.js completează limitările ReactJS. O combinație a celor două face din ReactJS o bibliotecă front-end puternică.