React: 8. La paginazione

Perché iniziamo dalla paginazione

La prima cosa che svilupperemo sulla nostra web app in React, non sarà un component, ma la paginazione.
Il motivo di questa scelta, risiede nel fatto che stiamo cercando di spiegare come sviluppare una web app in React, e praticamente in alcun caso svilupperemo una web app di una singola pagina.
Inoltre, prima ancora di scrivere i contenuti nella web app, è importante creare la struttura che conterrà tali contenuti.
Per questi motivi, procederemo in senso inverso rispetto agli altri tutorial di sviluppo in React.

La libreria per la paginazione

Per prima cosa è necessario installare la libreria, eseguendo a console il seguente comando.

npm i -D react-router-dom

Adesso abbiamo installato la nostra libreria all’interno della cartella node_modules. E’ possibile trovare traccia dell’installazione delle librerie, anche nel file package.json. All’interno di questo file, infatti, troveremo la seguente indicazione:

"react-router-dom": "^6.6.2"

A questo punto dobbiamo cambiare un po’ la struttura della web, per dargli quella che sarà la sua struttura definitiva.

In index.js scriveremo questo codice:

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          {/*<Route path="blogs" element={<Blogs />} />*/}
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In questo file si dice di mostrare il component Layout e contemporaneamente si dice di mostrare determinati component su determinati url.
Metteremo tali component all’interno della cartella “pages”.
All’interno del file Layout.js, scriveremo il seguente codice:

import { Outlet, Link } from "react-router-dom";
import 'style/Menu.css';

const Layout = () => {
  return (
    <>
        <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

    {/*Contenuto pagine:*/}
      <Outlet />
    </>
  )
};

export default Layout;

In questo modo stiamo mostrando, in alto, un elenco di link, cioè il menu della web app. E più in basso, tramite il component “Outlet”, il contenuto dei component che devono essere mostrati in base all’url indicato in index.js.
Quindi, dentro cartella pages metteremo i component che rappresentano le pagine. Successivamente dentro tali component-page, metteremo altri component che compongono la pagina in questione. E’ importante avere ben chiara la struttura della web app, prima di procedere oltre.

Adesso abbiamo una paginazione sulla nostra web app React. L’estetica non sarà ancora presente, ma nel prossimo articolo, tramite l’uso di Bootstrap, creeremo un menu responsive in pochi semplici passi.

Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs