Als de meest populaire frontend-bibliotheek wil iedereen React leren. ReactJS is in wezen JavaScript. Maar dat betekent niet dat je alles in JavaScript moet leren om naar ReactJS te gaan. Als u de fundamentele JavaScript-concepten begrijpt, kunt u React-concepten gemakkelijker begrijpen en uiteindelijk zult u sneller aan projecten kunnen werken.
Laten we essentiële concepten schetsen die u over JavaScript moet kennen voordat u naar ReactJS gaat.
1. Pijl Functies
Pijlfuncties worden veel gebruikt in React. Vanaf versie 16.8 is React overgestapt van op klassen gebaseerde componenten naar functionele componenten. Pijl functies kunt u functies maken met een kortere syntaxis.
Laten we dat illustreren in de volgende voorbeelden:
Reguliere functie
functiegroet() {
opbrengst'Hallo'
}
troosten.log (begroeting()) //helloPijlfunctie
laten groet = () =>'Hallo'
troosten.log (begroeting()) //helloDe twee bovenstaande functies hebben dezelfde uitvoer, hoewel de syntaxis anders is. De pijlfunctie ziet er korter en schoner uit dan de reguliere functie. Gewoonlijk hebben de React-componenten de volgende structuur:
importeren Reageer van'Reageer'const Boek = () => {
opbrengst (
Boek</div>)
}
exporterenstandaard Boek
Pijlfuncties hebben geen namen. Als je het een naam wilt geven, wijs het dan toe aan een variabele. Het verschil tussen een gewone en een pijlfunctie is meer dan alleen de syntaxis. Lees meer over pijlfuncties in Mozilla documentatie van ontwikkelaars.
2. Destructureren
Destructuring wordt gebruikt om data te verkrijgen uit complexe datastructuren. In JavaScript kunnen arrays en objecten veel waarden opslaan. U kunt de waarden manipuleren en in verschillende delen van de toepassing gebruiken.
Om deze waarden te krijgen, moet u de variabele destructureren. Afhankelijk van de gegevensstructuur waarmee u te maken heeft, kunt u de punt (.) notatie of de haakjesnotatie gebruiken. Bijvoorbeeld:
const leerling = {'naam': 'Maria',
'adres': 'South Park, Bethlehem',
'leeftijd': 15
}
vernietigen:
troosten.log (student.naam) // uitgang MariaIn het bovenstaande voorbeeld geeft de puntnotatie toegang tot de waarde van de sleutel 'name'. In ReactJS gebruikt u het destructureringsconcept om waarden in uw toepassing te verkrijgen en te delen. Destructurering helpt herhaling te voorkomen en maakt uw code leesbaarder.
3. Array-methoden
Je zult meerdere keren arrays tegenkomen tijdens het werken aan React-projecten. Een array is een verzameling gegevens. U slaat gegevens op in arrays, zodat u ze indien nodig kunt hergebruiken.
Array-methoden worden voornamelijk gebruikt om gegevens te manipuleren, op te halen en weer te geven. Enkele veelgebruikte arraymethoden zijn kaart(), filter(), En verminderen(). Je moet bekend zijn met de array methoden om te begrijpen wanneer elk moet worden toegepast.
Bijvoorbeeld de kaart() methode herhaalt alle items in een array. Het werkt op elk element van de array om een nieuwe array te creëren.
const getallen = [9, 16, 25, 36];
const kwadraatArr = getallen.kaart(Wiskunde.sqrt) // 3,4,5,6
Je zult veel array-methoden gebruiken in ReactJS. U zult ze gebruiken om arrays naar strings te converteren, samen te voegen, items toe te voegen en items uit andere arrays te verwijderen.
4. Korte voorwaarden
Conditionals zijn uitspraken die JavaScript gebruikt om beslissingen in code te nemen. Korte voorwaarden zijn onder meer && (en), II (of) en de ternaire operator. Dit zijn kortere uitdrukkingen van voorwaarden en de if/else-statements.
Het volgende voorbeeld laat zien hoe u een ternaire operator gebruikt.
Codeer met if/else statement:
functieopeningstijd(dag) {
als (dag == ZONDAG) {
opbrengst12;
}
anders {
opbrengst9;
}
}Code met ternaire operator:
functieopeningstijd(dag) {
opbrengst dag == ZONDAG? 12: 9;
}Leren over verschillende soorten voorwaarden met een speciale focus op korte conditionals. Deze worden veel gebruikt in React.
5. Letterlijke sjabloon
Template Literals gebruiken back-ticks (``) om een string te definiëren. Met sjabloonliterals kunt u tekenreeksgegevens manipuleren om ze dynamischer te maken. Met gecodeerde letterlijke sjablonen kunt u bewerkingen binnen een tekenreeks uitvoeren. Dit zijn kortere uitdrukkingen van voorwaarden en de if/else-statements.
Bijvoorbeeld:
laten voornaam = "Jane";laten achternaam = "Doe";
laten tekst = 'Welkom ${firstName}, ${achternaam}!`; // Welkom Jane Doe!
6. Verspreid operators
De Spread-operator (...) kopieert de waarden van een object of array naar een ander. De syntaxis bestaat uit drie punten gevolgd door de naam van de variabele. Bijvoorbeeld (...naam). Het voegt de eigenschappen van twee arrays of objecten samen.
Het volgende voorbeeld laat zien hoe u de spreidingsoperator gebruikt om de waarden van de ene variabele naar de andere te kopiëren.
const namen = ['Maria', 'Jane'];
const groepsleden = ['Fred', ...namen, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
U kunt de spread-operator gebruiken om een aantal bewerkingen uit te voeren. Deze omvatten het kopiëren van de inhoud van een array, het invoegen van een array in een andere, toegang tot geneste arrays en het doorgeven van arrays als argumenten. U kunt de spread-operator in ReactJS gebruiken om de toestandsveranderingen in componenten af te handelen.
Waarom ReactJS leren?
ReactJS is niet voor niets populair. Het heeft een korte leercurve, is betrouwbaar en wordt snel weergegeven in de DOM. Het ondersteunt stand-alone componenten en heeft geweldige hulpprogramma's voor foutopsporing.
ReactJS bevat nieuwe JavaScript-concepten van ECMAScript 6 (ES6). Door fundamentele concepten in JavaScript te leren, wordt het gemakkelijker om projecten in ReactJS te ontwikkelen.
Als klap op de vuurpijl heeft ReactJS een geweldige community die voortdurend nieuwe updates uitbrengt. Als je een JavaScript-bibliotheek wilt leren, zou ReactJS een goede keuze zijn. Het Next.js-framework vormt een aanvulling op de beperkingen van ReactJS. Een combinatie van beide maakt ReactJS tot een krachtige front-end bibliotheek.
