Una delle cose che mi piace molto di React è che è facile eseguire il deploy in produzione.
Sostanzialmente si tratta di tre passaggi:
Nel corso degli anni abbiamo già parlato sia di Express che di come connettersi a MongoDB con Node.js.
Oggi mettiamo insieme tutti questi elementi.
In React per navigare tra componenti abbiamo diverse possibilità.
Dopo aver scoperto che this.props.history.push ci permette anche di passare dei dati, sto usando solo questo.
E oggi vediamo proprio questo esempio.
PrimeReact è una libreria UI per React.
La sto testando per un'applicazione e mi ci sto trovando bene.
Il sito è pieno di esempi, ma come al solito qualcosa di oscuro ogni tanto c'è.
Supponiamo di avere un JSON di questo tipo:
[{
"id": "204",
"title": "fondazione e terra",
"author_id": null,
"author": "isaac asimov",
"editor_id": null,
"editor": "oscar mondadori",
"price": "26.49",
"isbn": "88-04-32634-4",
"note": "usato"
}, {
"id": "202",
"title": "l'orlo della fondazione",
"author_id": null,
"author": "isaac asimov",
"editor_id": null,
"editor": "oscar mondadori",
"price": "30.99",
"isbn": "978-88-04-39816-5",
"note": "usato"
}, {
"id": "217",
"title": "preludio alla fondazione",
"author_id": null,
"author": "isaac asimov",
"editor_id": null,
"editor": "mondadori",
"price": "27.90",
"isbn": "88-04-32450-3",
"note": "usato"
}]
E di volerlo raggruppare, andando a sommare un determinato campo.
In HTML l'entità rappresenta uno spazio bianco.
Quando ho provato a metterlo dentro una pagina creata con React non ha funzionato.
In un progetto fatto con React avevo la necessità di levare la pagination su una tabella creata con Ant Design.
Solo che Ant Design la pagination la mette di default.
jQuery ha la comoda funzione serializeArray che permette appunto di serializzare una serie dati.
Oggi vediamo come usarla per serializzare un form, e poi trasformarli in formato JSON.
jSuites è un insieme di componenti scritti in vanilla Javascript, e che quindi non richiede dipendenze.
Possiamo installarlo tramite npm, o includerlo nella pagina come faremo negli esempi.
react-bootstrap-table2 è un componente per React, compatibile con Bootstrap, che aggiunnge tantissime funzionalità alle tabelle HTML.
Do per scontato l'installazione e l'utilizzo di base; qui vediamo come visualizzare un Button dentro ad una cella.