Som det mest populære frontend-biblioteket ønsker alle å lære React. ReactJS er grunnleggende JavaScript. Men det betyr ikke at du må lære alt i JavaScript for å flytte til ReactJS. Å forstå de grunnleggende JavaScript-konseptene vil hjelpe deg å forstå React-konsepter lettere, og til slutt vil det akselerere din evne til å jobbe med prosjekter.
La oss skissere viktige konsepter du bør vite om JavaScript før du flytter til ReactJS.
1. Pilfunksjoner
Pilfunksjoner er mye brukt i React. Fra og med versjon 16.8 flyttet React fra klassebaserte komponenter til funksjonelle komponenter. Pilfunksjoner lar deg lage funksjoner med en kortere syntaks.
La oss illustrere det i følgende eksempler:
Vanlig funksjon
funksjonhilsen() {
komme tilbake'Hallo'
}
konsoll.log (hilsen()) //helloPilfunksjon
la hilsen = () =>'Hallo'
konsoll.log (hilsen()) //helloDe to funksjonene ovenfor har samme utgang, selv om syntaksen er forskjellig. Pilfunksjonen ser kortere og renere ut enn den vanlige funksjonen. Vanligvis har React-komponentene følgende struktur:
import Reagere fra'reagere'konst Bok = () => {
komme tilbake (
Bestill</div>)
}
eksportmisligholde Bok
Pilfunksjoner har ikke navn. Hvis du ønsker å navngi den, tilordne den til en variabel. Forskjellen mellom en vanlig og en pilfunksjon er mer enn bare syntaksen. Lær mer om pilfunksjoner i Mozilla utviklerens dokumentasjon.
2. Destrukturering
Destrukturering brukes til å hente data fra komplekse datastrukturer. I JavaScript kan matriser og objekter lagre mange verdier. Du kan manipulere verdiene og bruke dem i forskjellige deler av applikasjonen.
For å få disse verdiene, må du destrukturere variabelen. Avhengig av datastrukturen du har å gjøre med, kan du bruke punktnotasjonen (.) eller parentesnotasjonen. For eksempel:
konst student = {'Navn': 'Mary',
'adresse': 'South Park, Betlehem',
'alder': 15
}
Destrukturering:
konsoll.log (student.navn) // utgang MaryI eksemplet ovenfor gir punktnotasjonen tilgang til verdien av nøkkelen 'navn'. I ReactJS vil du bruke destruktureringskonseptet for å innhente og dele verdier i søknaden din. Destrukturering bidrar til å unngå repetisjon og gjør koden din mer lesbar.
3. Array-metoder
Du vil møte arrays flere ganger mens du jobber med React-prosjekter. En matrise er en samling av data. Du lagrer data i arrays, slik at du kan gjenbruke dem ved behov.
Array-metoder brukes først og fremst til å manipulere, hente og vise data. Noen ofte brukte array-metoder er kart(), filter(), og redusere(). Du må være kjent med array metoder å forstå når du skal bruke hver.
For eksempel kart() metoden itererer over alle elementene i en matrise. Den virker på hvert element i matrisen for å lage en ny matrise.
konst tall = [9, 16, 25, 36];
konst squaredArr = tall.kart(Matte.sqrt) // 3,4,5,6
Du vil bruke array-metoder mye i ReactJS. Du vil bruke dem til å konvertere arrays til strenger, bli med, legge til elementer og fjerne elementer fra andre arrays.
4. Korte betingelser
Betingelser er utsagn som JavaScript bruker for å ta avgjørelser i kode. Korte betingelser inkluderer && (og), II (eller) og den ternære operatøren. Dette er kortere uttrykk for forhold og if/else-utsagnene.
Følgende eksempel viser hvordan du bruker en ternær operator.
Kode med if/else-setning:
funksjonåpningstid(dag) {
hvis (dag == SØNDAG) {
komme tilbake12;
}
ellers {
komme tilbake9;
}
}Kode med ternær operatør:
funksjonåpningstid(dag) {
komme tilbake dag == SØNDAG? 12: 9;
}Lære om ulike typer betingelser med spesielt fokus på korte betingelser. Disse er mye brukt i React.
5. Malbokstaver
Template Literals bruker back-ticks (``) for å definere en streng. Literal mal lar deg manipulere strengdata og gjøre dem mer dynamiske. Merkede mal-literals lar deg utføre operasjoner innenfor en streng. Dette er kortere uttrykk for forhold og if/else-utsagnene.
For eksempel:
la fornavn = "Jane";la etternavn = "Doe";
la tekst = `Velkommen ${firstName}, ${lastName}!`; // Velkommen Jane Doe!
6. Spredningsoperatører
Spread-operatoren (...) kopierer verdiene til et objekt eller en matrise til en annen. Syntaksen består av tre prikker etterfulgt av navnet på variabelen. For eksempel (...navn). Den slår sammen egenskapene til to matriser eller objekter.
Følgende eksempel viser hvordan du bruker spredningsoperatoren til å kopiere verdiene til en variabel til en annen.
konst navn = ['Mary', 'Jane'];
konst gruppemedlemmer = ['Fred', ...navn, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Du kan bruke spredningsoperatoren til å utføre en rekke operasjoner. Disse inkluderer kopiering av innholdet i en matrise, innsetting av en matrise i en annen, tilgang til nestede matriser og overføring av matriser som argumenter. Du kan bruke spredningsoperatøren i ReactJS for å håndtere tilstandsendringene i komponenter.
Hvorfor lære ReactJS?
ReactJS er populært med god grunn. Den har en kort læringskurve, pålitelig og gjengir raskt til DOM. Den støtter frittstående komponenter og har flotte feilsøkingsverktøy.
ReactJS inkorporerer nye JavaScript-konsepter fra ECMAScript 6 (ES6). Å lære grunnleggende konsepter i JavaScript vil gjøre det enklere å utvikle prosjekter i ReactJS.
På toppen av det hele har ReactJS et flott fellesskap som stadig slipper nye oppdateringer. Hvis du vil lære et JavaScript-bibliotek, vil ReactJS være et godt valg. Next.js-rammeverket utfyller begrensningene til ReactJS. En kombinasjon av de to gjør ReactJS til et kraftig front-end-bibliotek.
