React colloquio tecnico: domande e risposte

React è una libreria JavaScript efficiente, flessibile e open source che consente agli sviluppatori di creare applicazioni Web semplici, veloci e scalabili. La libreria è stata creata da un ingegnere del software che lavorava per Facebook, Jordan Walke. È stata utilizzata per la prima volta sul feed di notizie di Facebook nel 2011 e su Instagram nel 2012. Gli sviluppatori con background Javascript possono facilmente sviluppare applicazioni Web con l’aiuto di React.

I React Hooks ti consentiranno di utilizzare gli stati e altre funzionalità di React in cui è necessario scrivere una classe da parte tua. In parole semplici, possiamo dire che i React Hooks sono le funzioni che collegheranno lo stato di React con le caratteristiche del ciclo di vita dei componenti della funzione. I React Hooks possono essere elencati tra le funzionalità implementate più recenti, dalla versione 16.8.

La selezione della tecnologia giusta per l’applicazione o lo sviluppo web sta diventando sempre più difficile. React è stato considerato il framework Javascript in più rapida crescita tra tutti. Gli strumenti di Javascript stanno consolidando le loro radici lentamente e costantemente sul mercato e la richiesta di certificazione React sta aumentando esponenzialmente. React è una chiara vittoria per gli sviluppatori front-end in quanto ha una curva di apprendimento rapida, un’astrazione pulita e componenti riutilizzabili. Attualmente, non c’è fine in vista per React poiché continua ad evolversi.

Domande frequenti in un colloquio tecnico per programmatore react.

Cos’é React?

React è una libreria JavaScript front-end e open source utile nello sviluppo di interfacce utente specifiche per applicazioni single page. È utile nella creazione di componenti complessi e riutilizzabili di applicazioni mobili e Web poiché segue un approccio basato su componenti.

Le caratteristiche importanti di React sono:

Supporto del rendering server side.
Utilizzo del DOM virtuale anziché del DOM reale (Data Object Model) poiché le manipolazioni di un RealDOM sono più dispendiose in termini di utilizzo della memoria e quindi riducono le prestazioni.
Ha un’associazione dati unidirezionale.
Utilizza componenti riutilizzabili o componibili per lo sviluppo della view dell’applicazione.

Quali sono i vantaggi nell’utilizzo di React?

MVC è generalmente abbreviato in Model View Controller.

Utilizzo del DOM virtuale per migliorare l’efficienza dell’applicazione: React utilizza il DOM virtuale per eseguire il rendering della view. Virtual DOM confronta gli stati precedenti dei componenti e aggiorna solo gli elementi nel Real DOM che sono stati modificati, invece di aggiornare nuovamente tutti i componenti, come fanno le applicazioni Web convenzionali. Pertanto, con l’uso del DOM virtuale, l’efficienza dell’app migliora.

Curva di apprendimento bassa: React ha una curva di apprendimento bassa rispetto a framework come Angular. Chiunque abbia poca conoscenza di javascript può iniziare a creare applicazioni web utilizzando React.

SEO friendly: React consente agli sviluppatori di creare UI accattivanti che possono essere facilmente esplorate dai vari motori di ricerca. Consente inoltre il rendering lato server, che migliora la SEO di un’applicazione.

Componenti riutilizzabili: React utilizza un’architettura basata sui componenti per lo sviluppo di applicazioni. I componenti sono bit di codice indipendenti e riutilizzabili. Questi componenti possono essere condivisi tra varie applicazioni con funzionalità simili. Il riutilizzo dei componenti aumenta il ritmo di sviluppo.

Enorme ecosistema di librerie tra cui scegliere: React ti offre la libertà di scegliere gli strumenti, le librerie e l’architettura per lo sviluppo di un’applicazione in base alle tue esigenze.

Quali sono i limiti nell’utilizzo di React?

Le poche limitazioni di React sono le seguenti:

React non è un framework completo in quanto è solo una libreria.

I componenti di React sono numerosi e ci vorrà del tempo per cogliere appieno tutti i vantaggi.

Potrebbe essere difficile per i programmatori principianti capire React.

La scrittura del codice potrebbe diventare complessa poiché utilizzerà i modelli inline e JSX.

Che cos’è e a cosa serve useState() in React?

useState() è un Hook integrato in React che consente di avere variabili di stato nei componenti. Dovrebbe essere usato quando il DOM ha qualcosa che sta manipolando/controllando dinamicamente.

Nel codice di esempio riportato di seguito, useState(0) restituirà una tupla in cui il conteggio è il primo parametro che rappresenta lo stato corrente del contatore e il secondo parametro setCounter ci consentirà di aggiornare lo stato del contatore.

import { useState, useEffect } from "react";
import FirstComponent from "./FirstComponent";
 
const App = () => {
  const [counter, setCounter] = useState(0);
 
  return (
    <div className="App">
        <FirstComponent counter={counter} setCounter={() => setCounter(count + 1)} />
    </div>
  );
};
 
export default App;

Possiamo utilizzare il metodo setCounter() per aggiornare lo stato di un conteggio ovunque. In questo esempio, stiamo usando setCounter() all’interno del template con JSX. L’idea con l’uso degli hook è che saremo in grado di mantenere il nostro codice più efficientemente ed evitare componenti basati su classi se non richiesti.

Cosa sono e a cosa servono le chiavi in React?

Una chiave è un attributo di tipo stringa speciale che deve essere incluso necessariamente quando si utilizzano elenchi di elementi.

Importanza delle chiavi

Le chiavi aiutano React a identificare quali elementi sono stati aggiunti, modificati o rimossi.

Le chiavi dovrebbero essere fornite agli elementi dell’array per fornire un’identità univoca ognuno.

Senza chiavi, React non comprende l’ordine o l’unicità di ogni elemento.

Con le chiavi, React ha un’idea di quale particolare elemento è stato eliminato, modificato e aggiunto.

import { useState, useEffect } from "react";
import FirstComponent from "./FirstComponent";
 
const App = () => {
  const characters = ['pippo', 'pluto', 'paperino'];
 
  return (
    <div className="App">
      <ul>
      {characters.map((e) =>
        <li key={e}>{e}</li>
      )}
      </ul>
    </div>
  );
};
 
export default App;

Le chiavi sono generalmente utilizzate per visualizzare un elenco di dati provenienti da un’API.

Cosè JSX?

JSX sta per JavaScript XML. Ci consente di scrivere HTML all’interno di JavaScript e inserirli nel DOM senza utilizzare funzioni come appendChild() o createElement().

Come affermato nei documenti ufficiali di React, JSX fornisce una semplificazione per la funzione React.createElement().

 Nota: possiamo creare applicazioni React anche senza utilizzare JSX.

Capiamo come funziona JSX:

Senza usare JSX, dovremmo creare un elemento con il seguente processo:

const test = React.createElement('p', {}, 'This is a test');
const container = React.createElement('div','{}',test);
ReactDOM.render(container,rootElement);

Utilizzando JSX, il codice sopra può essere semplificato:

const container = (
<div>
  <p>This is a test</p>
</div>
);
ReactDOM.render(container,rootElement);

Come si può vedere nel codice sopra, stiamo usando direttamente HTML all’interno di JavaScript.

Cos’è il DOM virtuale? In che modo React utilizza il DOM virtuale per eseguire il rendering dell’interfaccia utente?

Come affermato dal team di react, il DOM virtuale è un concetto in cui una rappresentazione virtuale del DOM reale è conservata all’interno della memoria ed è sincronizzata con il DOM reale da una libreria come ReactDOM.

Perché è stato introdotto il DOM virtuale?

La manipolazione del DOM è parte integrante di qualsiasi applicazione Web, ma la manipolazione del DOM è piuttosto lenta rispetto ad altre operazioni in JavaScript. L’efficienza dell’applicazione viene influenzata quando vengono eseguite diverse manipolazioni del DOM. La maggior parte dei framework JavaScript aggiorna l’intero DOM anche quando cambia una piccola parte.

Ad esempio, considera un elenco di cui viene eseguito il rendering all’interno del DOM. Se uno degli elementi nell’elenco cambia, l’intero elenco viene visualizzato di nuovo invece di eseguire il rendering dell’elemento che è stato modificato/aggiornato. Questo è chiamato aggiornamento inefficiente.

Per affrontare il problema dell’aggiornamento inefficiente, il team di reazione ha introdotto il concetto di DOM virtuale.

Come funziona?

Per ogni oggetto del DOM, esiste un corrispondente oggetto (DOM virtuale (copia)), che ha le stesse proprietà. La principale differenza tra l’oggetto del DOM reale e l’oggetto del DOM virtuale è che qualsiasi modifica nell’oggetto del DOM virtuale non si rifletterà direttamente sullo schermo. Considera un oggetto del DOM virtuale come un progetto dell’oggetto del DOM reale. Ogni volta che viene eseguito il rendering di un elemento JSX, ogni oggetto del DOM virtuale viene aggiornato.

Nota: si potrebbe pensare che l’aggiornamento di ogni oggetto del DOM virtuale possa essere inefficiente, ma non è così. L’aggiornamento del DOM virtuale è molto più veloce dell’aggiornamento del DOM reale poiché stiamo solo aggiornando una parte DOM reale.

React utilizza due DOM virtuali per eseguire il rendering dell’interfaccia utente. Uno di questi viene utilizzato per memorizzare lo stato corrente degli oggetti e l’altro per memorizzare lo stato precedente degli oggetti. Ogni volta che il DOM virtuale viene aggiornato, react confronta i due DOM virtuali e viene a sapere quali oggetti del DOM virtuale sono stati aggiornati. Dopo aver saputo quali oggetti sono stati aggiornati, react esegue il rendering solo di quegli oggetti all’interno del DOM reale invece di eseguire il rendering del DOM reale completo. In questo modo, con l’utilizzo del DOM virtuale, react risolve il problema dell’aggiornamento inefficiente

Conclusione

Questo articolo verrà costantemente aggiornato con le domande tecniche maggiormente frequenti nelle interviste tecniche per la figura di React Developer.