React

React è una libreria di Facebook, e perciò dipendente da esso. È diverso da framework come Angular e Vue.

Perché usare React?

React si basa su Componenti e questo gli permette di avere varie caratteristiche di forza:

• Riusabilità del codice
• Velocità di sviluppo
• Performance elevate
• Facile mantenimento e modifica

Cosa devo sapere per impararlo?

• HTML
• CSS
• Vanilla js (ES6)

Ambiente di sviluppo di React

Dev environment:

• Node.js
• Chrome
• Estensioni di Chrome: JSON View, React Developer Tools
• Visual Studio Code o altro IDE

HOOK

Gli hook devono iniziare tutti con “use” anche quelli customizzati.

Per caricare gli hook di React si importano chiamando il modulo.

import { useState, useEffect } from 'react';

useState

Per impostare valori da modificare, ad esempio un conteggio

const [count, setCount] = useState(0)

useEffect

useEffect(() => {
    const fetchData = async () =>{
      setLoading(true);
      try {
        const data = await axios.get(url);
        setData(response);
      } catch (error) {
        console.error(error.message);
      }
      setLoading(false);
    }

    fetchData();
  }, []);

Nel caso sopra crea la chiamata al caricamento della pagina.

ATTENZIONE! Le dependencies sono fondamentali per non avere un continuo render dello useEffect

useEffect(() => {
    // Setup
  }, [person]); // Dependencies

In questo esempio lo useEffect si attiva solo nel momento in cui cambia la dependence person.

useRef

Fa riferimento a un valore iniziale e può essere modificato

const ref = useRef(initialValue)

Esempi

Contatore di clic

Questo componente utilizza un ref per tenere traccia del numero di clic sul pulsante. Si noti che è possibile utilizzare un ref invece di uno state, perché il conteggio dei clic viene letto e scritto solo in un gestore eventi.

import { useRef } from 'react';

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

Un cronometro

Questo esempio utilizza una combinazione di stato e ref. Sia r startTimeche r nowsono variabili di stato perché vengono utilizzate per il rendering. Ma dobbiamo anche contenere un ID di intervallo in modo da poter interrompere l’intervallo alla pressione del pulsante. Poiché l’ID di intervallo non viene utilizzato per il rendering, è opportuno mantenerlo in un ref e aggiornarlo manualmente.

import { useState, useRef } from 'react';

export default function Stopwatch() {
  const [startTime, setStartTime] = useState(null);
  const [now, setNow] = useState(null);
  const intervalRef = useRef(null);

  function handleStart() {
    setStartTime(Date.now());
    setNow(Date.now());

    clearInterval(intervalRef.current);
    intervalRef.current = setInterval(() => {
      setNow(Date.now());
    }, 10);
  }

  function handleStop() {
    clearInterval(intervalRef.current);
  }

  let secondsPassed = 0;
  if (startTime != null && now != null) {
    secondsPassed = (now - startTime) / 1000;
  }

  return (
    <>
      <h1>Time passed: {secondsPassed.toFixed(3)}</h1>
      <button onClick={handleStart}>
        Start
      </button>
      <button onClick={handleStop}>
        Stop
      </button>
    </>
  );
}