React, le migliori librerie per potenziare i tuoi progetti

Scopri le Librerie Essenziali per React

In questo articolo, si esploreranno alcune delle librerie più utili per migliorare i progetti React. Queste risorse possono semplificare lo sviluppo e migliorare l'esperienza utente.

1. Styled Components

Styled Components è una libreria che consente di scrivere CSS in modo modulare all'interno delle applicazioni React. Grazie alla sua struttura basata sui componenti, permette di stilizzare ogni singolo componente in modo indipendente. Tra le sue funzionalità, si trovano:

• Stilizzazione dinamica
• Cambio di temi

Come installare Styled Components

Per installare Styled Components nel tuo progetto, puoi usare npm o yarn.

Installazione con npm

npm install styled-components

Installazione con yarn

yarn add styled-components

Esempio d'uso di Styled Components

Styled Components consente di scrivere stili CSS direttamente all'interno dei tuoi componenti JavaScript. Ecco un esempio di utilizzo in un componente React:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background-color: #45a049;
  }
`;

const App = () => {
  return (
    <div>
      <h1>Styled Components Example</h1>
      <Button>Cliccami</Button>
    </div>
  );
};

export default App;

In questo esempio, il componente Button è uno styled component che utilizza CSS per stilizzare un pulsante. Quando passi il mouse sopra il pulsante, cambia il colore di sfondo grazie alla pseudo-classe :hover.

2. Formik

Formik è un'ottima soluzione per la gestione di form in React. Facilita la validazione, l'invio e la gestione dello stato dei form. È particolarmente utile per gestire errori e validazioni in moduli complessi, semplificando notevolmente il processo.

Come installare Formik

Per installare Formik nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install formik

Installazione con yarn

yarn add formik

Esempio d'uso di Formik

Formik è una libreria per la gestione dei form in React, facilitando la validazione e la gestione dello stato del form. Ecco un esempio di utilizzo:

import React from 'react';
import { useFormik } from 'formik';

const validate = values => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Campo richiesto';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    errors.email = 'Indirizzo email non valido';
  }
  if (!values.password) {
    errors.password = 'Campo richiesto';
  } else if (values.password.length < 6) {
    errors.password = 'La password deve avere almeno 6 caratteri';
  }
  return errors;
};

const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validate,
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.email}
      />
      {formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}

      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.password}
      />
      {formik.touched.password && formik.errors.password ? <div>{formik.errors.password}</div> : null}

      <button type="submit">Iscriviti</button>
    </form>
  );
};

export default SignupForm;

In questo esempio, utilizziamo useFormik per gestire lo stato e la validazione del form. Quando l'utente invia il form, i dati vengono visualizzati in un alert sotto forma di oggetto JSON.

3. React Query

Questa libreria gestisce automaticamente le modifiche ai dati, migliorando le performance attraverso il caching e riducendo le richieste di rete non necessarie. React Query offre:

• Aggiornamenti automatici dei dati in background
• Recupero dati tramite URL dinamici
• Opzioni di retry in caso di errore

Come installare React Query

Per installare React Query nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install @tanstack/react-query

Installazione con yarn

yarn add @tanstack/react-query

Esempio d'uso di React Query

React Query è una libreria che semplifica la gestione delle query di dati e il caching nelle applicazioni React. Ecco un esempio di come utilizzarla per eseguire il fetch di dati da un'API:

import React from 'react';
import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!response.ok) {
    throw new Error('Errore nel caricamento dei dati');
  }
  return response.json();
};

const Users = () => {
  const { data, error, isLoading } = useQuery(['users'], fetchUsers);

  if (isLoading) return <p>Caricamento in corso...</p>;
  if (error) return <p>Errore: {error.message}</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <div>
      <h1>Lista Utenti</h1>
      <Users />
    </div>
  );
};

export default App;

In questo esempio, la funzione useQuery viene utilizzata per eseguire il fetch di una lista di utenti da un'API. Lo stato di caricamento, errore o successo viene gestito direttamente all'interno del componente Users, e i dati sono memorizzati nella cache per evitare richieste ripetitive.

4. Immutable.js

Immutable.js è una libreria che semplifica gli aggiornamenti di stato, consentendo di effettuare modifiche senza mutare lo stato originale. È particolarmente efficace se utilizzata con strumenti di gestione dello stato come Redux, rendendo gli aggiornamenti più chiari e comprensibili.

Come installare Immutable.js

Per installare Immutable.js nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install immutable

Installazione con yarn

yarn add immutable

Esempio d'uso di Immutable.js

Immutable.js è una libreria che fornisce strutture di dati immutabili per JavaScript, come List, Map, Set, e altre. Ecco un esempio di utilizzo:

import { Map, List } from 'immutable';

const state = Map({
  users: List([
    { id: 1, name: 'Mario' },
    { id: 2, name: 'Luigi' }
  ]),
});

// Aggiungere un nuovo utente in modo immutabile
const newState = state.update('users', users => users.push({ id: 3, name: 'Peach' }));

console.log(state.get('users').toJS());  // Stato originale
console.log(newState.get('users').toJS());  // Nuovo stato aggiornato

In questo esempio, utilizziamo Map per creare uno stato immutabile che contiene una lista di utenti. Utilizziamo il metodo update per aggiungere un nuovo utente alla lista senza modificare lo stato originale. I dati sono convertiti in un array JavaScript con il metodo toJS per poterli visualizzare nel console log.

5. React Spring

Questa libreria è ideale per creare animazioni e transizioni fluide nelle applicazioni. È molto apprezzata nei progetti che desiderano aggiungere interazioni dinamiche e animazioni coinvolgenti.

Come installare React Spring

Per installare React Spring nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install @react-spring/web

Installazione con yarn

yarn add @react-spring/web

Esempio d'uso di React Spring

React Spring è una libreria per animazioni fluide e naturali nelle applicazioni React. Ecco un esempio di come animare un elemento che appare e scompare utilizzando React Spring:

import React, { useState } from 'react';
import { useSpring, animated } from '@react-spring/web';

const App = () => {
  const [toggle, setToggle] = useState(false);

  const animation = useSpring({
    opacity: toggle ? 1 : 0,
    transform: toggle ? 'translateY(0)' : 'translateY(-20px)',
    config: { tension: 220, friction: 120 },
  });

  return (
    <div>
      <h1>React Spring Example</h1>
      <button onClick={() => setToggle(!toggle)}>
        {toggle ? 'Nascondi' : 'Mostra'} Elemento
      </button>
      <animated.div style={animation}>
        <p>Questo è un esempio di animazione con React Spring!</p>
      </animated.div>
    </div>
  );
};

export default App;

In questo esempio, useSpring gestisce l'animazione di un elemento. Il componente animated.div applica le animazioni definite, come l'opacità e il movimento verticale, in base allo stato toggle. Il pulsante consente di mostrare o nascondere l'elemento animato.

6. React DnD

React DnD è una potente libreria per implementare interazioni di drag-and-drop. Permette di gestire anche operazioni complesse in modo semplice e intuitivo.

Come installare React DnD

Per installare React DnD nel tuo progetto, devi installare due pacchetti: il core di React DnD e il backend HTML5.

Installazione con npm

npm install react-dnd react-dnd-html5-backend

Installazione con yarn

yarn add react-dnd react-dnd-html5-backend

Esempio d'uso di React DnD

React DnD è una libreria per implementare funzionalità di drag-and-drop in React. Ecco un esempio semplice di come trascinare e rilasciare un elemento in una zona di rilascio:

import React from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemTypes = {
  BOX: 'box',
};

const DraggableBox = () => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemTypes.BOX,
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.5 : 1,
        backgroundColor: 'lightblue',
        padding: '16px',
        margin: '8px',
        cursor: 'move',
      }}
    >
      Trascinami
    </div>
  );
};

const DropZone = () => {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: ItemTypes.BOX,
    collect: monitor => ({
      isOver: monitor.isOver(),
    }),
  }));

  return (
    <div
      ref={drop}
      style={{
        height: '200px',
        width: '200px',
        border: '2px dashed gray',
        backgroundColor: isOver ? 'lightgreen' : 'white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      {isOver ? 'Rilascia qui' : 'Zona di rilascio'}
    </div>
  );
};

const App = () => {
  return (
    <DndProvider backend={HTML5Backend}>
      <h1>Esempio di React DnD</h1>
      <DraggableBox />
      <DropZone />
    </DndProvider>
  );
};

export default App;

In questo esempio:

• DraggableBox è un elemento che può essere trascinato.
• DropZone è una zona in cui l'elemento può essere rilasciato.
• La funzione useDrag viene utilizzata per abilitare l'elemento a essere trascinato, e useDrop per gestire il rilascio dell'elemento nella zona designata.

7. Framer Motion

Framer Motion è una libreria moderna per la creazione di animazioni in React. Consente di aggiungere e gestire animazioni, da effetti semplici a movimenti complessi, con facilità.

Come installare Framer Motion

Per installare Framer Motion nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install framer-motion

Installazione con yarn

yarn add framer-motion

Esempio d'uso di Framer Motion

Framer Motion è una potente libreria di animazione per React. Ecco un esempio semplice di animazione di un div che cambia posizione e opacità:

import React, { useState } from 'react';
import { motion } from 'framer-motion';

const App = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <h1>Framer Motion Example</h1>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? 'Nascondi' : 'Mostra'} Box
      </button>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: -50 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 50 }}
          transition={{ duration: 0.5 }}
          style={{
            width: '100px',
            height: '100px',
            backgroundColor: 'skyblue',
            marginTop: '20px',
          }}
        />
      )}
    </div>
  );
};

export default App;

In questo esempio:

• Utilizziamo il componente motion.div per animare un box.
• initial, animate, ed exit sono le proprietà che controllano gli stati iniziali e finali dell'animazione.
• La proprietà transition gestisce la durata dell'animazione.
• Quando il pulsante viene cliccato, l'elemento viene mostrato o nascosto con una transizione fluida.

8. Jest

Jest è uno strumento di testing per progetti JavaScript e React. Permette di testare i componenti in un ambiente isolato, migliorando l'efficienza nello sviluppo e nella verifica delle funzionalità.

Come installare Jest

Per installare Jest nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install --save-dev jest

Installazione con yarn

yarn add --dev jest

Dopo l'installazione, puoi aggiungere uno script nel file package.json per eseguire Jest:

{
  "scripts": {
    "test": "jest"
  }
}

Esempio d'uso di Jest

Jest è un framework per i test in JavaScript. Ecco un esempio di test di una semplice funzione con Jest:

// sum.js
export const sum = (a, b) => {
  return a + b;
};

Ora creiamo un file di test per questa funzione:

// sum.test.js
import { sum } from './sum';

test('somma di 1 + 2 è uguale a 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Esecuzione del test

Per eseguire il test, basta lanciare il comando:

npm test

Jest eseguirà il test e restituirà un output che indica se il test è passato o fallito. Nell'esempio sopra, Jest verifica che la funzione sum restituisca 3 quando vengono passati i numeri 1 e 2.

9. React-i18next

Questa libreria è fondamentale per sviluppare applicazioni multilingue in React. Si integra perfettamente con i18next, semplificando le operazioni di cambio lingua in modo dinamico.

Come installare React-i18next

Per installare React-i18next nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install i18next react-i18next

Installazione con yarn

yarn add i18next react-i18next

Esempio d'uso di React-i18next

React-i18next è una libreria per l'internazionalizzazione di applicazioni React. Ecco un esempio di come configurarla per tradurre il testo in diverse lingue:

Configurazione di base

1. Crea un file di configurazione i18n.js per impostare React-i18next.

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
  en: {
    translation: {
      welcome: 'Welcome to our website',
      description: 'This is an example of internationalization',
    },
  },
  it: {
    translation: {
      welcome: 'Benvenuto nel nostro sito web',
      description: 'Questo è un esempio di internazionalizzazione',
    },
  },
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en', // Lingua di default
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // React già esegue l'escape
    },
  });

export default i18n;

1. Integra la configurazione nel componente principale della tua applicazione, solitamente App.js.

// App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n'; // Importa la configurazione di i18n

const App = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('it')}>Italiano</button>
    </div>
  );
};

export default App;

Funzionamento

• useTranslation(): Questo hook fornisce la funzione t per tradurre le chiavi definite in i18n.js.
• changeLanguage(): Permette di cambiare dinamicamente la lingua in base al pulsante cliccato. Ad esempio, cliccando su "Italiano", la lingua cambierà all'italiano.

10. Redux Toolkit

Redux Toolkit semplifica la gestione dello stato globale nelle applicazioni React. Aiuta a gestire il flusso dei dati, offrendo una struttura chiara anche in progetti complessi. È compatibile con Redux DevTools, che fornisce funzionalità avanzate di debug.

Come installare Redux Toolkit

Per installare Redux Toolkit nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install @reduxjs/toolkit react-redux

Installazione con yarn

yarn add @reduxjs/toolkit react-redux

Esempio d'uso di Redux Toolkit

Redux Toolkit semplifica l'utilizzo di Redux fornendo una serie di strumenti per creare uno store e gestire lo stato dell'applicazione. Ecco un esempio di configurazione di base:

Creare uno slice

1. Crea un file counterSlice.js per definire lo stato e le azioni.

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

Configurare lo store

1. Crea un file store.js per configurare lo store con Redux Toolkit.

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Usare Redux nel componente

1. Usa il Redux store nel tuo componente React. Ecco un esempio di come incrementare o decrementare il contatore:

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const App = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Contatore: {count}</h1>
      <button onClick={() => dispatch(increment())}>Incrementa</button>
      <button onClick={() => dispatch(decrement())}>Decrementa</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Incrementa di 5</button>
    </div>
  );
};

export default App;

Utilizzo

• useSelector(): Questo hook ti permette di selezionare il valore dallo stato globale.
• useDispatch(): Questo hook ti permette di inviare (dispatch) le azioni definite nel counterSlice per modificare lo stato.
• Le azioni increment, decrement e incrementByAmount aggiornano il contatore, e il valore dello stato viene mostrato nel componente.

11. Axios

Axios è una libreria per gestire le richieste HTTP in React. La sua struttura basata su Promise è compatibile con async/await e offre funzionalità come timeout delle richieste e configurazione globale.

Come installare Axios

Per installare Axios nel tuo progetto, puoi utilizzare npm o yarn.

Installazione con npm

npm install axios

Installazione con yarn

yarn add axios

Esempio d'uso di Axios

Axios è una libreria per eseguire richieste HTTP in modo semplice. Ecco un esempio di come utilizzare Axios per eseguire una richiesta GET e visualizzare i dati:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Caricamento in corso...</p>;
  if (error) return <p>Errore: {error.message}</p>;

  return (
    <div>
      <h1>Post del blog</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Spiegazione

• useEffect(): Questo hook viene usato per eseguire il fetch dei dati al caricamento del componente.
• axios.get(): Esegue una richiesta HTTP GET all'API di esempio jsonplaceholder.typicode.com per ottenere una lista di post.
• Gestione errori: Se la richiesta fallisce, l'errore viene catturato e visualizzato.