Cosa studiare dopo React

Hai appena padroneggiato React, gli hook, le best practices e costruito un buon numero di progetti ed un pensiero sfiora la tua testa: "E dopo react ora cosa imparo?". Ottima domanda avido sviluppatore.

Diventare un React Developer migliore

Ora in questo articolo parleremo un po di tutto quello che non è strettamente necessario sapere ma che gira e rigira è bene saper usare. Non tanto per lavoro, o meglio non solo, ma soprattuto per sviluppare applicazioni di livello superiore.

Partiamo secchi, dalle basi:

Typescript

Typescript è un superset di Javascript, che detto in parole povere vuol dire che è un developer tool che non ti da nessuna funzione o feature in più rispetto a Javascript ma lo completa permettendoci di rendere type safety il nostro codice. Riassumendo al massimo: ci permette di tipizzarlo.

E cosa c'entra con React. Beh le applicazioni sono degli ecosistemi complessi in cui abbiamo spesso cambi di state, manipolazione dei dati, memorizzazione di valori. Typescript ci permette di avere la certezza che il nostro codice si comporti esattamente come desideriamo.

 const [open, setOpen] = React.useState<string[]>([])
  const openMenu = React.useCallback((item: string) => {
    setOpen((items) => [...items, item])
  }, [])

Come vedete possiamo indicare che il nostro state sia un array di stringhe e che la nostra funzione di openMenu accetti come parametro una stringa. In qualsiasi non sottostessimo a queste due regole il nostro editor ci avviserebbe grazie a typescript, mentre in Javascript tutto passerebbe senza problemi per poi accorgercene solo in produzione.

Styled Component

Styled components è un must. Permette di creare React component con dello style css nativo e localizzato nei componenti stessi. Utilissimo per creare componenti riutilizzabili come Typography, Box, componenti per allineamento verticale e orizzontale.

export const PostHoverBox = styled("div")({
  "&:hover .box_hover": {
    "[data-role='_text']": {
      textDecoration: "underline",
    },
    "[data-role='_overlay']": {
      opacity: 1,
      borderRadius: "16px",
    },
  },
})

Vi sono diverse validissime alternative come vanilla-extract-css o il classico Emotion css

Redux Toolkit

Redux Toolkit è un Framework di state management che permette di avere una gestione, mappatura e debug dello state avanzata. Ehm e quindi a cosa serve ?

Fino a quando la nostra applicazione e di dimensioni ridotte, possiamo gestire tutto con il nostri useContext e useReducer hooks, ma molto presto non sono più sufficienti, soprattuto per debuggare il state mediamente complessi.

Questa è solo una delle tante funzioni che Redux Toolkit ci offre per il debug del nostro state oltre ad una ricca API che ci espone metodi per intercettare le azioni che vengono dispatchate ed agendo di conseguenza

const isSwitchingTimeFrame = (action: AnyAction) => {
  return action.type.endsWith("/changeTimeFrameSelected")
}

addMatcher(
        isSwitchingTimeFrame,
        (_, action: PayloadAction<TimeFrameListKeys>) => {
          createGAEvent("change_chart_timeframe", action.payload)()
        }
      )

Come in questo caso dove andiamo a usiamo addMatcher per identificare una specifica actions ed qualora metchasse andiamo a rilasciare un evento su Google Analytics.

Gatsby JS

React ha dei limiti. Se da un lato ci offre una mantenibilità del codice eccellente, un'ottima esperienza di sviluppo e delle buone performance dall'altro però dobbiamo ricordarci che una React App altro non sia che un file index.html con un div#id=root vuoto in cui noi andiamo a mutare il DOM simulando il comportamento di un classico sito.

Questo in cosa si traduce ? Che la nostra pagina altro non è che una pagina bianca per i motori di ricerca. Quindi niente SEO, niente SEO vuol dire niente indicizzazione, niente indicizzazione vuol dire grande difficoltà nell'essere trovati tra i risultati di una ricerca su Google.

Per risolvere questo problema esiste il Server Side Rendering (SSR), che sempre parlando in parole povere vuol dire prendere tutto l'HTML il CSS, le immagini, i contenuti etc, etc... fare un bundle sul server e ritornare le nostre pagine HTML direttamente dal server e poi hydratarle sul client. Ovvero, injectarci Javascript solo dopo averle mostrate.

Come potete immaginare questa non è un'operazione banale anzi, richiede di essere avere sia un frontend che un backend che si occupi di buildare e servire il nostro Frontend.

Ecco che Gatsby Js risolve per noi questo problema essendo un Framework costruito su React con lo scopo di generare dei siti statici offrendoci così tutti i vantaggi di sviluppare in React colmandone le lacune lato SEO.

Ciò che lo rende un Framework davvero interessante è la sua integrazione con i CMS più comuni: Wordpress, Shopify, Contentful, Sanity etc etc... permettendoci di attingere ai loro contenuti e mostrarli su un frontend da noi customizzabile con React.

Offrendoci così la praticità di un CMS, la mantenibilità di React e le performance del SSR. Interessante vero ? Se volessi saperne di più eccoti un corso gratuito di Gatsby js