6 importanti concetti JavaScript per i principianti di React

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. Le funzioni freccia consentono di creare funzioni con una sintassi più breve.

Illustriamolo nei seguenti esempi:

Funzione regolare

function greeting() {
    return 'hello'
}
console.log(greeting()) //hello

Funzione freccia

let greeting = () => 'hello'
console.log(greeting()) //hello

Le 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:

import React from 'react'


const Book = () => {

export default Book

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. Ulteriori informazioni sulle funzioni freccia nella documentazione degli sviluppatori di Mozilla .

2. Destrutturazione

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:

const student = {


   'name': 'Mary',

}

Destrutturazione:

console.log(student.name) // output Mary

Nell’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 array comunemente usati sono map() , filter() e reduce() . Devi avere familiarità con i metodi dell’array per capire quando applicarli.

Ad esempio, il metodo map() itera su tutti gli elementi in un array. Agisce su ogni elemento dell’array per creare un nuovo array.

const numbers = [9, 16, 25, 36];


const squaredArr = numbers.map(Math.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:

function openingTime(day) {
    if (day == SUNDAY) {
        return 12;
    }
       else {
        return 9;
    }
}

Codice con operatore ternario:

function openingTime(day) {
    return day == SUNDAY? 12: 9;
}

Scopri i 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:

let firstName = "Jane";


let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`; // Welcome 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.

const names = ['Mary', 'Jane'];


const groupMembers = ['Fred',. ..names, '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.