Creare una Web App Completa in React

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a realizzare una React App completa. La nostra app comprenderà una Home Page una About Page e l'interazione con un API per cercare il proprio cocktail preferito e accedere a una pagina con tutte le istruzioni per realizzare il cocktail scelto

Che cosa useremo nella nostra applicazione ?

• useState: Ci permetterà di tenere traccia dei nostri state all'interno della nostra applicazione

• useContext: La nostra applicazione sarà abbastanza articolata e ci richiederà di condividere i nostri state tra più componenti

• useEffect: Andremo a fetchare dati da un Api quindi sarà per noi necessario gestire i nostri sideEffects.

• useRef: Lo useremo per tenere traccia della posizione dell'utente sulla pagina quando tornerà indietro in modo da offire una esperienza di navigazione ottimale

Che librerie e API utilizzeremo ?

All'interno del nostro progetto utilizzeremo sia delle librerie che un API nello specifico approfondiremo:

• React Router v6 e v5: Andremo a realizzare la navigazione della nostra applicazione usando sia l'ultima versione di react router sia quella precedente perchè ancora ampiamente supportata nella maggior parte dei prodotti.

• Styled Components: Realizzeremo i nostri componenti utilizzando una delle librerie più diffuse nell'ecosistema di React. Questa libreria ci permette di definire dei componenti con del css al loro interno.

• axios: Questa libreria per viene usata al posto del native fetch.

• TheCockailDB: Questa API gratuita è un gigantesco archivio di Cocktail e Ingredienti e ci permetterà d'implementare la ricerca e di mostrare ai nostri utenti gli ingredienti per comporlo. Docs

Come usare i Custom Hooks

Infine andremo a creare dei custom hooks per gestire il data fetching e per gestire, seppur in minima parte, la SEO in maniera dinamica.

Ecco un esempio di custom hook per il data fetching.

import { useEffect, useState } from "react";
import axios from "axios";

const searchUrl = "https://www.thecocktaildb.com/api/json/v1/1/search.php?";
const singleUrl = "https://www.thecocktaildb.com/api/json/v1/1/lookup.php?";

const useFetch = (query, type = false) => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);
  const [count, setCount] = useState(0);
  const [isError, setIsError] = useState(false);
  const url = type ? singleUrl : searchUrl;
  useEffect(() => {
    (async (query) => {
      setIsError(false);
      setIsLoading(true);
      try {
        const response = await axios.get(`${url}${query}`);
        setData(response.data);
        setCount(response.data.drinks.length);
      } catch (err) {
        setIsError(true);
        setCount(0);
      }
      setIsLoading(false);
    })(query);
  }, [query, url]);

  return { isLoading, data, isError, count };
};

export default useFetch;