Essendo la libreria frontend più popolare, tutti vogliono imparare React. ReactJS è fondamentalmente JavaScript. Ma ciò non significa che devi imparare tutto in JavaScript per passare a ReactJS. Comprendere i concetti fondamentali di JavaScript ti aiuterà a comprendere i concetti di React più facilmente e, in definitiva, accelererà la tua capacità di lavorare sui progetti.
Delineiamo i concetti essenziali che dovresti conoscere su JavaScript prima di passare a ReactJS.
1. Funzioni freccia
Le funzioni freccia sono ampiamente utilizzate in React. A partire dalla versione 16.8, React è passato da componenti basati su classi a componenti funzionali. Funzioni freccia consentono di creare funzioni con una sintassi più breve.
Illustriamolo nei seguenti esempi:
Funzione regolare
funzionesaluto() {
ritorno'Ciao'
}
consolare.log (saluto()) //helloFunzione freccia
permettere saluto = () =>'Ciao'
consolare.log (saluto()) //helloLe due funzioni precedenti hanno lo stesso output, sebbene la sintassi sia diversa. La funzione freccia sembra più corta e più pulita della funzione normale. Di solito, i componenti React hanno la seguente struttura:
importare Reagire da'reagire'cost Libro = () => {
ritorno (
Prenota</div>)
}
esportarepredefinito Libro
Le funzioni freccia non hanno nomi. Se desideri assegnargli un nome, assegnalo a una variabile. La differenza tra una funzione regolare e una freccia non è solo la sintassi. Scopri di più sulle funzioni delle frecce in Mozilla documentazione degli sviluppatori.
2. Destrutturante
La destrutturazione viene utilizzata per ottenere dati da strutture dati complesse. In JavaScript, gli array e gli oggetti possono memorizzare molti valori. È possibile manipolare i valori e utilizzarli in diverse parti dell'applicazione.
Per ottenere questi valori, devi destrutturare la variabile. A seconda della struttura dati con cui hai a che fare, puoi utilizzare la notazione punto (.) o la notazione parentesi. Per esempio:
cost studente = {'nome': 'Maria',
'indirizzo': "South Park, Betlemme",
'età': 15
}
Destrutturazione:
consolare.log (nome.studente) // uscita MaryNell'esempio sopra, la notazione punto accede al valore della chiave 'nome'. In ReactJS, utilizzerai il concetto di destrutturazione per ottenere e condividere valori nella tua applicazione. La destrutturazione aiuta a evitare ripetizioni e rende il codice più leggibile.
3. Metodi di matrice
Incontrerai gli array diverse volte mentre lavori ai progetti React. Un array è una raccolta di dati. Memorizzi i dati in array, quindi puoi riutilizzarli quando necessario.
I metodi di matrice vengono utilizzati principalmente per manipolare, recuperare e visualizzare i dati. Alcuni metodi di matrice comunemente usati sono carta geografica(), filtro(), E ridurre(). Devi avere familiarità con il metodi di matrice per capire quando applicare ciascuno.
Ad esempio, il carta geografica() Il metodo itera su tutti gli elementi in un array. Agisce su ogni elemento dell'array per creare un nuovo array.
cost numeri = [9, 16, 25, 36];
cost quadratoArr = numeri.mappa(Matematica.sqrt) // 3,4,5,6
Utilizzerai molto i metodi di array in ReactJS. Li userai per convertire array in stringhe, unire, aggiungere elementi e rimuovere elementi da altri array.
4. Brevi condizionali
I condizionali sono istruzioni che JavaScript utilizza per prendere decisioni nel codice. I condizionali brevi includono && (e), II (o) e l'operatore ternario. Queste sono espressioni più brevi di condizioni e le istruzioni if/else.
L'esempio seguente mostra come utilizzare un operatore ternario.
Codice con istruzione if/else:
funzioneorario di apertura(giorno) {
Se (giorno == DOMENICA) {
ritorno12;
}
altro {
ritorno9;
}
}Codice con operatore ternario:
funzioneorario di apertura(giorno) {
ritorno giorno == DOMENICA? 12: 9;
}Impara al riguardo diversi tipi di condizionali con particolare attenzione ai condizionali brevi. Questi sono ampiamente usati in React.
5. Letterali modello
I valori letterali del modello utilizzano i segni di spunta inversi (``) per definire una stringa. I valori letterali del modello consentono di manipolare i dati delle stringhe rendendoli più dinamici. I valori letterali modello con tag consentono di eseguire operazioni all'interno di una stringa. Queste sono espressioni più brevi di condizioni e le istruzioni if/else.
Per esempio:
permettere nome = "Jane";permettere cognome = "Dai";
permettere testo = `Benvenuto ${firstName}, ${cognome}!`; // Benvenuta Jane Doe!
6. Operatori di diffusione
L'operatore Spread (...) copia i valori di un oggetto o di un array in un altro. La sua sintassi consiste di tre punti seguiti dal nome della variabile. Ad esempio (...nome). Unisce le proprietà di due array o oggetti.
L'esempio seguente mostra come utilizzare l'operatore spread per copiare i valori di una variabile in un'altra.
cost nomi = ['Maria', 'Jane'];
cost membrigruppo = ['Fred', ...nomi, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
È possibile utilizzare l'operatore spread per eseguire una serie di operazioni. Questi includono la copia del contenuto di un array, l'inserimento di un array in un altro, l'accesso a array nidificati e il passaggio di array come argomenti. È possibile utilizzare l'operatore spread in ReactJS per gestire i cambiamenti di stato nei componenti.
Perché imparare ReactJS?
ReactJS è popolare per una buona ragione. Ha una curva di apprendimento breve, affidabile e rende rapidamente il DOM. Supporta componenti autonomi e dispone di ottimi strumenti di debug.
ReactJS incorpora nuovi concetti JavaScript da ECMAScript 6 (ES6). L'apprendimento dei concetti fondamentali in JavaScript renderà più semplice lo sviluppo di progetti in ReactJS.
Per finire, ReactJS ha una grande comunità che rilascia costantemente nuovi aggiornamenti. Se vuoi imparare una libreria JavaScript, ReactJS sarebbe un'ottima scelta. Il framework Next.js integra i limiti di ReactJS. Una combinazione dei due rende ReactJS una potente libreria front-end.