1. L'operatore ternario

// Below is the example of ternary operator (?) being used in a conditional 
// expression
condition ? (if condtion is true, run this ):(if condition is false, run this);

Il modo in cui questa espressione funziona fondamentalmente è che la condizione viene verificata per prima, se la condizione è vera, verrà eseguita l'istruzione dopo l'operatore ternario ( ? ) e, in caso contrario, verrà eseguita l'istruzione dopo i due punti ( : ).

2. Distruzione

const objects = ['table', 'iPhone', 'apple']
const [furniture, mobile, fruit] = objects

Un altro esempio:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Ecco un altro esempio:

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Metodo .map():

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)

function myFunction(num) {
  return num * 10;
} 
//this function is called by the .map() method where the numbers array 
 //each element is taken as parameter

.pop() rimuove l'elemento alla fine di un array e .push() aggiunge l'elemento alla fine di un array:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon"); // adds Kiwi and Lemon after Mango
fruits.pop(); // removes Lemon at the end of an array

5. Funzioni freccia

Ci aiuta a creare funzioni in modo più semplice:

let hello = () => 'hello' //here we created an arrow function 
                          // assigned it to hello 
                           // this function returns 'hello'

let square = num => num * num // we can ignore bracketts 
                              //if we only have one parameter
                              // num in this case

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

1. Risolto : se completa la sua funzione
2. Rifiutato : se la funzione che tenta di eseguire non ha esito positivo
3. In attesa : quando il risultato della funzione non è ancora stato determinato

La funzione .catch() viene utilizzata per la gestione degli errori in promise.

7. L'API di recupero

fetch('http://example.com/books.json') // fetching the resource URL
  .then(response => response.json()); // calling .json() method on the promise
  .then(data => setState(data)); // updating the state with the JSON data

Il fetch()metodo restituisce una Promise che si risolve in un oggetto Response.

8. Asincrono/Attendi

La funzionalità Async/Await fornisce un modo migliore e più pulito per gestire le promesse. JavaScript è di natura sincrona e async/await ci aiuta a scrivere funzioni basate sulla promessa in modo tale che fossero sincrone interrompendo l'esecuzione di ulteriore codice fino a quando la promessa non viene risolta o rifiutata.

Per farlo funzionare, devi prima usare la parola chiave async prima di dichiarare una funzione. Ad esempio, async function promise() {}. Mettere async prima di una funzione significa che la funzione restituirà sempre una promessa.

All'interno di una funzione asincrona, puoi utilizzare la parola chiave awaitper sospendere l'ulteriore esecuzione del codice fino a quando la promessa non viene risolta o rifiutata. Puoi usare wait solo all'interno di una funzione asincrona .

Ora, finiamo rapidamente questa sezione con un esempio:

async function asyncFunction() {
    let promise = new Promise(resolve => {
        resolve();
    });
    let response = await promise; // further execution will be stopped until the promise is resolved or rejected
    return console.log(response);

function Component() {
    return(
        <div>This is a component</div>
    )
}

export default Component

import Component from './Component'

function App() {
    return (
        <Component />
    )
}

Nell'esempio sopra, abbiamo creato un componente chiamato Component e lo abbiamo esportato con il nostro codice export default Component. Successivamente, andiamo su App.js e importiamo il componente con il seguente codice: import Component from './Component'.

Ha preso aiuto da qui. su freecodecamp.