6 Vigtige JavaScript-koncepter for React Beginners

Som det mest populære frontend-bibliotek ønsker alle at lære React. ReactJS er grundlæggende JavaScript. Men det betyder ikke, at du skal lære alt i JavaScript for at flytte til ReactJS. Forståelse af de grundlæggende JavaScript-koncepter vil hjælpe dig med at forstå React-koncepter lettere, og i sidste ende vil det accelerere din evne til at arbejde på projekter.

Lad os skitsere væsentlige begreber, du bør vide om JavaScript, før du flytter til ReactJS.

1. Pile funktioner

Pilefunktioner er meget brugt i React. Fra version 16.8 flyttede React fra klassebaserede komponenter til funktionelle komponenter. Pile funktioner giver dig mulighed for at oprette funktioner med en kortere syntaks.

Lad os illustrere det i følgende eksempler:

Almindelig funktion

fungerehilsen() {
Vend tilbage'Hej'
}
konsol.log (hilsen()) //hello

Pil funktion

lade hilsen = () =>'Hej'
konsol.log (hilsen()) //hello

De to ovenstående funktioner har samme output, selvom syntaksen er forskellig. Pilefunktionen ser kortere og renere ud end den almindelige funktion. Normalt har React-komponenterne følgende struktur:

importere Reagere fra'reagere'
konst Bog = () => {
Vend tilbage (

Bog</div>

 )
}
eksportStandard Bestil

Pilefunktioner har ikke navne. Hvis du ønsker at navngive det, skal du tildele det til en variabel. Forskellen mellem en almindelig og en pilefunktion er mere end blot syntaksen. Lær mere om pilefunktioner i Mozilla udviklernes dokumentation.

2. Destrukturering

Destrukturering bruges til at hente data fra komplekse datastrukturer. I JavaScript kan arrays og objekter gemme mange værdier. Du kan manipulere værdierne og bruge dem i forskellige dele af applikationen.

For at få disse værdier skal du destrukturere variablen. Afhængigt af den datastruktur, du har med at gøre, kan du bruge prik (.) eller parentes. For eksempel:

konst elev = {
'navn': 'Mary',
'adresse': 'South Park, Betlehem',
'alder': 15
}

Destrukturering:

konsol.log (elev.navn) // output Mary

I ovenstående eksempel får priknotationen adgang til værdien af ​​nøglen 'navn'. I ReactJS vil du bruge destruktureringskonceptet til at opnå og dele værdier i din applikation. Destrukturering hjælper med at undgå gentagelser og gør din kode mere læsbar.

3. Array-metoder

Du vil støde på arrays flere gange, mens du arbejder på React-projekter. Et array er en samling af data. Du gemmer data i arrays, så du kan genbruge dem, når det er nødvendigt.

Array-metoder bruges primært til at manipulere, hente og vise data. Nogle almindeligt anvendte array-metoder er kort(), filter(), og reducere(). Du skal være bekendt med array metoder at forstå, hvornår de skal anvende hver.

For eksempel kort() metoden gentager alle elementerne i et array. Det virker på hvert element i arrayet for at skabe et nyt array.

konst tal = [9, 16, 25, 36];
konst squaredArr = numbers.map(Matematik.sqrt) // 3,4,5,6 

Du vil bruge array-metoder meget i ReactJS. Du vil bruge dem til at konvertere arrays til strenge, forbinde, tilføje elementer og fjerne elementer fra andre arrays.

4. Korte betingelser

Betingelser er udsagn, som JavaScript bruger til at træffe beslutninger i kode. Korte betingelser inkluderer && (og), II (eller) og den ternære operatør. Det er kortere udtryk for betingelser og if/else-udsagn.

Følgende eksempel viser, hvordan man bruger en ternær operator.

Kode med if/else-sætning:

fungereåbningstid(dag) {
hvis (dag == SØNDAG) {
Vend tilbage12;
 } 
andet {
Vend tilbage9;
 }
}

Kode med ternær operatør:

fungereåbningstid(dag) {
Vend tilbage dag == SØNDAG? 12: 9;
}

Lære om forskellige typer betingelser med særligt fokus på korte betingelser. Disse er meget brugt i React.

5. Skabelon bogstaver

Skabelon Literals bruger back-ticks (``) til at definere en streng. Skabelonliteraler giver dig mulighed for at manipulere strengdata, hvilket gør dem mere dynamiske. Taggede skabelonliterals giver dig mulighed for at udføre handlinger inden for en streng. Det er kortere udtryk for betingelser og if/else-udsagn.

For eksempel:

lade fornavn = "Jane";
lade efternavn = "Då";
lade tekst = 'Velkommen ${firstName}, ${lastName}!`; // Velkommen Jane Doe!

6. Spredningsoperatører

Spread-operatoren (...) kopierer værdierne af et objekt eller array til et andet. Dens syntaks består af tre prikker efterfulgt af navnet på variablen. For eksempel (...navn). Det fletter egenskaberne for to arrays eller objekter.

Det følgende eksempel viser, hvordan man bruger spread-operatoren til at kopiere værdierne af en variabel til en anden.

konst navne = ['Mary', 'Jane']; 
konst gruppemedlemmer = ['Fred', ...navne, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]

Du kan bruge spredningsoperatoren til at udføre en række operationer. Disse omfatter kopiering af indholdet af et array, indsættelse af et array i et andet, adgang til indlejrede arrays og videregivelse af arrays som argumenter. Du kan bruge spread-operatoren i ReactJS til at håndtere tilstandsændringer i komponenter.

Hvorfor lære ReactJS?

ReactJS er populær med god grund. Den har en kort indlæringskurve, pålidelig og gengives hurtigt til DOM. Det understøtter selvstændige komponenter og har fantastiske fejlfindingsværktøjer.

ReactJS inkorporerer nye JavaScript-koncepter fra ECMAScript 6 (ES6). At lære grundlæggende begreber i JavaScript vil gøre det nemmere at udvikle projekter i ReactJS.

For at toppe det hele har ReactJS et fantastisk fællesskab, der konstant udgiver nye opdateringer. Hvis du vil lære et JavaScript-bibliotek, ville ReactJS være et godt valg. Next.js-rammen supplerer begrænsningerne ved ReactJS. En kombination af de to gør ReactJS til et kraftfuldt frontend-bibliotek.