Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Som det mest populära frontendbiblioteket vill alla lära sig React. ReactJS är i grunden JavaScript. Men det betyder inte att du måste lära dig allt i JavaScript för att flytta till ReactJS. Att förstå de grundläggande JavaScript-koncepten hjälper dig att lättare förstå React-koncepten, och i slutändan kommer det att påskynda din förmåga att arbeta med projekt.

Låt oss skissera viktiga begrepp du bör känna till om JavaScript innan du går över till ReactJS.

1. Pilfunktioner

Pilfunktioner används ofta i React. Från och med version 16.8 flyttade React från klassbaserade komponenter till funktionella komponenter. Pilfunktioner låter dig skapa funktioner med en kortare syntax.

Låt oss illustrera det i följande exempel:

Regelbunden funktion

fungerahälsning() {
lämna tillbaka'Hallå'
}
trösta.log (hälsning()) //hello

Pilfunktion

låta hälsning = () =>'Hallå'
trösta.log (hälsning()) //hello
instagram viewer

De två funktionerna ovan har samma utdata, även om syntaxen är olika. Pilfunktionen ser kortare och renare ut än den vanliga funktionen. Vanligtvis har React-komponenterna följande struktur:

importera Reagera från'reagera'
konst Boka = () => {


lämna tillbaka (




Boka</div>



 )


}
exporterastandard bok

Pilfunktioner har inga namn. Om du vill namnge den, tilldela den till en variabel. Skillnaden mellan en vanlig och en pilfunktion är mer än bara syntaxen. Läs mer om pilfunktioner i Mozilla utvecklarnas dokumentation.

2. Destrukturering

Destrukturering används för att hämta data från komplexa datastrukturer. I JavaScript kan arrayer och objekt lagra många värden. Du kan manipulera värdena och använda dem i olika delar av applikationen.

För att få dessa värden måste du destrukturera variabeln. Beroende på vilken datastruktur du har att göra med kan du använda punktnotationen (.) eller parentesnotationen. Till exempel:

konst student = {
'namn': "Maria",


'adress': "South Park, Betlehem",


'ålder': 15
}

Destrukturering:

trösta.log (student.namn) // output Mary

I exemplet ovan får punktnotationen värdet på nyckeln "namn". I ReactJS kommer du att använda destruktureringskonceptet för att erhålla och dela värden i din applikation. Destrukturering hjälper till att undvika upprepning och gör din kod mer läsbar.

3. Array-metoder

Du kommer att stöta på arrayer flera gånger när du arbetar med React-projekt. En array är en samling data. Du lagrar data i arrayer, så att du kan återanvända dem när det behövs.

Array-metoder används främst för att manipulera, hämta och visa data. Några vanligt använda array-metoder är Karta(), filtrera(), och minska(). Du måste vara bekant med array-metoder att förstå när man ska tillämpa var och en.

Till exempel Karta() metoden itererar över alla objekt i en array. Den verkar på varje element i arrayen för att skapa en ny array.

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

Du kommer att använda array-metoder mycket i ReactJS. Du kommer att använda dem för att konvertera arrayer till strängar, gå med, lägga till objekt och ta bort objekt från andra arrayer.

4. Korta villkor

Villkor är påståenden som JavaScript använder för att fatta beslut i kod. Korta villkor inkluderar && (och), II (eller) och den ternära operatören. Dessa är kortare uttryck för villkor och if/else-satserna.

Följande exempel visar hur man använder en ternär operator.

Kod med if/else-sats:

fungeraöppnings tid(dag) {
om (dag == SÖNDAG) {
lämna tillbaka12;
 } 
annan {
lämna tillbaka9;
 }
}

Kod med ternär operatör:

fungeraöppnings tid(dag) {
lämna tillbaka dag == SÖNDAG? 12: 9;
}

Lära om olika typer av villkor med särskilt fokus på korta villkor. Dessa används ofta i React.

5. Mallbokstavar

Template Literals använder back-ticks (``) för att definiera en sträng. Mall-literals låter dig manipulera strängdata och göra dem mer dynamiska. Taggade malllitterals låter dig utföra operationer inom en sträng. Dessa är kortare uttryck för villkor och if/else-satserna.

Till exempel:

låta förnamn = "Jane";
låta efternamn = "Hind";
låta text = `Välkommen ${firstName}, ${lastName}!`; // Välkommen Jane Doe!

6. Spridningsoperatörer

Spridningsoperatorn (...) kopierar värdena för ett objekt eller en array till en annan. Dess syntax består av tre punkter följt av variabelns namn. Till exempel (...namn). Den slår samman egenskaperna för två arrayer eller objekt.

Följande exempel visar hur man använder spridningsoperatorn för att kopiera värdena för en variabel till en annan.

konst namn = ["Maria", "Jane"]; 
konst gruppmedlemmar = ["Fred", ...namn, "Angela"]; // ["Fred", "Mary", "Jane", "Angela"]

Du kan använda spridningsoperatorn för att utföra ett antal operationer. Dessa inkluderar att kopiera innehållet i en array, infoga en array i en annan, komma åt kapslade arrayer och skicka arrayer som argument. Du kan använda spridningsoperatorn i ReactJS för att hantera tillståndsändringarna i komponenter.

Varför lära sig ReactJS?

ReactJS är populärt av goda skäl. Den har en kort inlärningskurva, pålitlig och återges snabbt till DOM. Den stöder fristående komponenter och har fantastiska felsökningsverktyg.

ReactJS innehåller nya JavaScript-koncept från ECMAScript 6 (ES6). Att lära sig grundläggande begrepp i JavaScript kommer att göra det lättare att utveckla projekt i ReactJS.

Till råga på allt har ReactJS en fantastisk community som ständigt släpper nya uppdateringar. Om du vill lära dig ett JavaScript-bibliotek skulle ReactJS vara ett bra val. Next.js-ramverket kompletterar begränsningarna för ReactJS. En kombination av de två gör ReactJS till ett kraftfullt front-end-bibliotek.