Quickstarters
Come costruire un'app CRUD con ReactJS?

42min
Introduzione
In questo tutorial, costruirai un'applicazione CRUD (crea, leggi, aggiorna e cancella) completa utilizzando ReactJS. 
Questa guida è progettata per eseguire le operazioni di base di un'applicazione software dimostrando come costruire app CRUD che gestiscono e aggiornano efficacemente i dati. 
Inizierai creando e configurando un progetto Back4app chiamato Basic-CRUD-App-ReactJS, che funge da robusto sistema backend per la tua applicazione web.
Successivamente, progetterai uno schema di database scalabile definendo collezioni e campi dettagliati—sia manualmente che con l'aiuto dell'Agente AI di Back4app. 
Poi, sfrutterai l'App di Amministrazione di Back4app—uno strumento di gestione user-friendly con un'interfaccia drag and drop—per gestire facilmente i tuoi dati nelle collezioni. 
Questa interfaccia di amministrazione migliora l'esperienza dell'utente e semplifica l'interfaccia utente, consentendo agli utenti di eseguire rapidamente operazioni CRUD.
Infine, distribuirai il tuo frontend ReactJS e lo integrerai con Back4app utilizzando REST/GraphQL (o il Parse SDK, dove disponibile), il tutto mentre proteggi il tuo backend con controlli di accesso avanzati.
Entro la fine di questa guida, avrai costruito un'applicazione web pronta per la produzione che non solo supporta le operazioni CRUD di base, ma include anche l'autenticazione degli utenti e robuste capacità di aggiornamento dei dati.
Punti Chiave
Impara a costruire applicazioni CRUD che gestiscono i dati in modo efficiente utilizzando un sistema di gestione database affidabile.
Acquisisci intuizioni pratiche sulla progettazione di un backend scalabile e sulla sua integrazione con un frontend ReactJS per migliorare l'esperienza utente.
Scopri come utilizzare uno strumento di gestione drag and drop (l'app Back4app Admin) per semplificare le operazioni di creazione, lettura, aggiornamento e cancellazione.
Comprendi le tecniche di distribuzione, inclusa la containerizzazione Docker, per lanciare rapidamente la tua applicazione web.
﻿
Requisiti Preliminari
Prima di iniziare, assicurati di avere quanto segue:
Un account Back4app e un nuovo progetto impostato.
Se hai bisogno di aiuto, fai riferimento a Iniziare con Back4app.
Un ambiente di sviluppo ReactJS.
Usa Create React App o uno strumento simile. Assicurati che Node.js (versione 14 o superiore) sia installato.
Comprensione di base di JavaScript, ReactJS e REST API.
Rivedi la documentazione di ReactJS se necessario.
﻿
Passo 1 – Impostazione del Progetto
Creare un nuovo progetto Back4app
Accedi al tuo account Back4app.
Clicca sul pulsante “Nuova App” nella tua dashboard.
Inserisci il nome del progetto: Basic-CRUD-App-ReactJS e segui le istruzioni per creare il tuo progetto.
Crea Nuovo Progetto
﻿
Una volta creato, il tuo nuovo progetto apparirà sulla tua dashboard di Back4app, fornendo una solida base per la configurazione del backend e la gestione del progetto.
﻿
Passo 2 – Progettazione dello schema del database
Progettazione del tuo modello di dati
Per l'app CRUD di base, creerai diverse collezioni. 
Di seguito sono riportati alcuni esempi delle collezioni di cui avrai bisogno, che delineano i campi e i tipi di dati necessari per aiutarti a configurare efficacemente lo schema del tuo database.
Queste collezioni sono progettate per eseguire le fondamentali operazioni CRUD che consentono agli utenti di creare, leggere, aggiornare e eliminare dati.
1. Collezione degli Articoli
Questa collezione memorizza informazioni su ciascun articolo.
Campo
Tipo di Dati
Descrizione
_id
ObjectId
Chiave primaria generata automaticamente.
titolo
Stringa
Il titolo dell'elemento.
descrizione
Stringa
Una breve descrizione dell'oggetto.
creato_il
Data
Timestamp quando l'elemento è stato creato.
aggiornato_il
Data
Timestamp dell'ultima aggiornamento dell'elemento.
2. Raccolta Utenti
Questa collezione memorizza le informazioni degli utenti e i dettagli di autenticazione.
Campo
Tipo di dato
Descrizione
_id
ObjectId
Chiave primaria generata automaticamente.
nome utente
Stringa
Nome utente unico per l'utente.
email
Stringa
Indirizzo email unico.
hash_password
Stringa
Password hash per l'autenticazione.
creato_il
Data
Timestamp in cui è stato creato l'account utente.
aggiornato_a
Data
Timestamp quando l'account utente è stato aggiornato.
Puoi impostare queste collezioni manualmente nel dashboard di Back4app creando una nuova classe per ogni collezione e aggiungendo colonne per definire i campi.
Crea Nuova Classe
﻿
Puoi facilmente creare campi per il tuo database selezionando un tipo di dato, nominando il campo, impostando un valore predefinito e definendo se è obbligatorio.
Crea Colonna
﻿
﻿
Utilizzare l'agente AI di Back4app per la generazione dello schema
L'agente AI di Back4app è uno strumento potente disponibile direttamente dal tuo dashboard di Back4app. 
Consente di generare automaticamente lo schema del database in base a un prompt che descrive le collezioni e i campi desiderati.
Questa funzionalità è un notevole risparmio di tempo per la gestione dei progetti e aiuta a garantire che il sistema di gestione del database sia configurato per eseguire le operazioni di base richieste dalla tua applicazione web.
Come utilizzare l'agente AI:
Apri l'agente AI:
Accedi al tuo dashboard di Back4app e individua l'agente AI nel menu o nelle impostazioni del tuo progetto.
Descrivi il tuo modello di dati:
Nell'interfaccia dell'agente AI, incolla un prompt dettagliato che delinea le collezioni e i campi di cui hai bisogno.
Rivedi e applica:
Una volta inviato, l'agente AI genererà le collezioni e le definizioni dei campi. Rivedi queste proposte e applicale al tuo progetto.
Esempio di prompt
Text
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app application:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
Utilizzare l'agente AI in questo modo fa risparmiare tempo e garantisce che il tuo schema sia coerente e ottimizzato per le esigenze della tua applicazione.
﻿
Passaggio 3 – Abilitazione dell'App Admin e Operazioni CRUD
Panoramica dell'App Admin
L'App Admin di Back4app è un'interfaccia potente e senza codice che ti consente di gestire i tuoi dati di backend. 
Questo strumento di gestione fornisce un'interfaccia utente drag and drop che consente agli utenti di eseguire facilmente operazioni CRUD come creare, leggere, aggiornare ed eliminare record.
Abilitazione dell'App Admin
Naviga nel menu “Altro nel tuo dashboard di Back4app.
Clicca su “App Admin” e poi su “Abilita App Admin.”
Configura le tue credenziali admin creando il tuo primo utente admin. Questo processo imposta anche i ruoli (ad es., B4aAdminUser) e le collezioni di sistema.
Abilita App Admin
﻿
Dopo aver abilitato, accedi all'App Admin per gestire i tuoi dati.
Dashboard dell'app Admin
﻿
Utilizzare l'app Admin per le operazioni CRUD
All'interno dell'app Admin puoi:
Creare record: Fai clic sul pulsante “Aggiungi record” all'interno di una collezione (ad es., Articoli) per creare nuove voci.
Leggere/Aggiornare record: Seleziona un record per visualizzarne i dettagli o modificare i campi, assicurando un aggiornamento dei dati fluido.
Eliminare record: Usa l'opzione di eliminazione per rimuovere i record che non sono più necessari.
Questo strumento di gestione facile da usare migliora l'esperienza complessiva dell'utente fornendo un'interfaccia semplice di trascinamento e rilascio per le funzioni CRUD.
﻿
Passo 4 – Integrare ReactJS con Back4app
Ora che il tuo backend è impostato e gestito tramite l'app Admin, è tempo di collegare il tuo frontend ReactJS a Back4app.
Opzione A: Utilizzare il Parse SDK
Installa il Parse SDK:
Bash
npm install parse
npm install parse
﻿
Inizializza Parse nella tua app React:
Crea un file (ad esempio, src/parseConfig.js):
JS
// src/parseConfig.js
import Parse from 'parse';
// Sostituisci con le tue credenziali Back4app reali
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Sostituisci con le tue credenziali Back4app reali
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Usa Parse in un componente React:
Ad esempio, crea un componente per recuperare e visualizzare gli elementi:
JS
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Errore nel recupero degli elementi:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Elementi</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
// src/components/ItemsList.js
import React, { useEffect, useState } from 'react';
import Parse from '../parseConfig';
const ItemsList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const fetchItems = async () => {
      const Items = Parse.Object.extend("Items");
      const query = new Parse.Query(Items);
      try {
        const results = await query.find();
        setItems(results);
      } catch (error) {
        console.error("Errore nel recupero degli elementi:", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Elementi</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
Opzione B: Utilizzare REST o GraphQL
Se il tuo ambiente non supporta il Parse SDK, puoi eseguire operazioni CRUD utilizzando REST o GraphQL. Ad esempio, per recuperare elementi utilizzando REST:
JS
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
// Example REST call to fetch items
const fetchItems = async () => {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    const data = await response.json();
    console.log('Fetched items:', data.results);
  } catch (error) {
    console.error('Error fetching items:', error);
  }
};
fetchItems();
﻿
Integra queste chiamate API nei tuoi componenti React secondo necessità.
﻿
Passo 5 – Sicurezza del tuo Backend
Liste di Controllo degli Accessi (ACL)
Proteggi i tuoi dati assegnando ACL agli oggetti. Ad esempio, per creare un elemento privato:
JS
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
async function createPrivateItem(itemData, ownerUser) {
  const Items = Parse.Object.extend('Items');
  const item = new Items();
  item.set('title', itemData.title);
  item.set('description', itemData.description);

  // Set ACL: only the owner can read and write
  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);
  item.setACL(acl);

  try {
    const savedItem = await item.save();
    console.log('Private item created:', savedItem);
  } catch (error) {
    console.error('Error saving item:', error);
  }
}
﻿
Permessi a Livello di Classe (CLP)
Nel dashboard di Back4app, configura i CLP per ogni collezione per impostare le regole di accesso predefinite. Questo assicura che solo gli utenti autenticati o autorizzati possano accedere ai dati sensibili.
﻿
Passo 6 – Autenticazione Utente
Impostazione degli Account Utente
Back4app sfrutta la classe User di Parse per l'autenticazione. Nella tua app React, gestisci la registrazione e il login degli utenti come segue:
JS
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
// src/components/Auth.js
import React, { useState } from 'react';
import Parse from '../parseConfig';

export const SignUp = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    const user = new Parse.User();
    user.set('username', username);
    user.set('password', password);
    user.set('email', email);

    try {
      await user.signUp();
      alert('User signed up successfully!');
    } catch (error) {
      alert('Error signing up: ' + error.message);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={e => setPassword(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};
﻿
Un approccio simile può essere utilizzato per il login e la gestione delle sessioni. Funzionalità aggiuntive come i login social, la verifica dell'email e il ripristino della password possono essere configurate nel dashboard di Back4app.
﻿
Passo 7 – Distribuire il tuo frontend ReactJS con Web Deployment
La funzionalità di Web Deployment di Back4app ti consente di ospitare il tuo frontend ReactJS senza problemi distribuendo il tuo codice da un repository GitHub.
In questa sezione, imparerai come preparare la tua build di produzione, impegnare il tuo codice sorgente su GitHub, integrare il tuo repository con Web Deployment e distribuire il tuo sito.
7.1 Prepara la tua build di produzione
Apri la cartella del tuo progetto in un terminale.
Esegui il comando di build:
Bash
npm run build
npm run build
﻿
Questo comando crea una build cartella contenente tutti i file statici ottimizzati (inclusi index.html, JavaScript, CSS e immagini).
Verifica la Build:
Assicurati che la build cartella contenga un index.html file insieme alle necessarie sottodirectory di asset.
﻿
7.2 Organizza e Carica il Tuo Codice Sorgente
Il tuo repository dovrebbe includere il codice sorgente completo per il tuo frontend ReactJS. Una struttura di file tipica potrebbe apparire così:
Text
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
Basic-CRUD-App-ReactJS-Frontend/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.js
│   ├── parseConfig.js
│   └── components/
│       ├── ItemsList.js
│       └── Auth.js
├── package.json
└── README.md
﻿
Esempi di File di Codice Sorgente
src/parseConfig.js
JS
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace with your actual Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
src/App.js
JS
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
// src/App.js
import React, { useEffect, useState } from 'react';
import Parse from './parseConfig';

function App() {
  const [items, setItems] = useState([]);
  const [newItemTitle, setNewItemTitle] = useState("");
  const [newItemDescription, setNewItemDescription] = useState("");
  const [editingItemId, setEditingItemId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");
  const [editingDescription, setEditingDescription] = useState("");

  const fetchItems = async () => {
    const Items = Parse.Object.extend("Items");
    const query = new Parse.Query(Items);
    try {
      const results = await query.find();
      setItems(results);
    } catch (error) {
      console.error("Error fetching items:", error);
    }
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const handleAddItem = async () => {
    const Items = Parse.Object.extend("Items");
    const item = new Items();
    item.set("title", newItemTitle);
    item.set("description", newItemDescription);

    try {
      await item.save();
      setNewItemTitle("");
      setNewItemDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error saving item:", error);
    }
  };

  const handleDeleteItem = async (id) => {
    try {
      const item = await Parse.Object.createWithoutData("Items", id);
      await item.destroy();
      fetchItems();
    } catch (error) {
      console.error("Error deleting item:", error);
    }
  };

  const startEditingItem = (item) => {
    setEditingItemId(item.id);
    setEditingTitle(item.get("title"));
    setEditingDescription(item.get("description"));
  };

  const handleUpdateItem = async () => {
    try {
      const Items = Parse.Object.extend("Items");
      const item = new Items();
      item.id = editingItemId;
      item.set("title", editingTitle);
      item.set("description", editingDescription);
      await item.save();
      setEditingItemId(null);
      setEditingTitle("");
      setEditingDescription("");
      fetchItems();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>Items</h1>
      <div style={{ marginBottom: '1rem' }}>
        <h2>Add Item</h2>
        <input 
          type="text" 
          placeholder="Title" 
          value={newItemTitle}
          onChange={(e) => setNewItemTitle(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <input 
          type="text" 
          placeholder="Description" 
          value={newItemDescription}
          onChange={(e) => setNewItemDescription(e.target.value)}
          style={{ marginRight: '0.5rem' }}
        />
        <button onClick={handleAddItem}>Add Item</button>
      </div>
      <h2>Item List</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id} style={{ marginBottom: '1rem' }}>
            {editingItemId === item.id ? (
              <div>
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <input
                  type="text"
                  value={editingDescription}
                  onChange={(e) => setEditingDescription(e.target.value)}
                  style={{ marginRight: '0.5rem' }}
                />
                <button onClick={handleUpdateItem}>Save</button>
                <button onClick={() => setEditingItemId(null)} style={{ marginLeft: '0.5rem' }}>
                  Cancel
                </button>
              </div>
            ) : (
              <div>
                <strong>{item.get("title")}</strong> - {item.get("description")}
                <button onClick={() => startEditingItem(item)} style={{ marginLeft: '1rem' }}>
                  Edit
                </button>
                <button onClick={() => handleDeleteItem(item.id)} style={{ marginLeft: '0.5rem' }}>
                  Delete
                </button>
              </div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App;

#### Commit Your Code to GitHub
1. **Initialize a Git repository** in your project folder (if you haven’t already):
   ```bash
   git init
﻿
Aggiungi i tuoi file sorgente:
Bash
git add .
git add .
﻿
Esegui il commit delle tue modifiche:
Bash
git commit -m "Commit iniziale del codice sorgente del frontend ReactJS"
git commit -m "Commit iniziale del codice sorgente del frontend ReactJS"
﻿
Crea un repository GitHub:
Ad esempio, crea un repository chiamato Basic-CRUD-App-ReactJS-Frontend su GitHub.
Invia il tuo codice a GitHub:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Integra il tuo repository GitHub con il Web Deployment
Accedi al Web Deployment:
Accedi al tuo dashboard di Back4app, naviga al tuo progetto (Basic-CRUD-App-ReactJS) e clicca sulla funzione Web Deployment.
Collegati a GitHub:
Se non lo hai già fatto, integra il tuo account GitHub seguendo le istruzioni sullo schermo. Questa connessione consente a Back4app di accedere al tuo repository.
Seleziona il tuo repository e branch:
Scegli il repository che hai creato (ad esempio, Basic-CRUD-App-ReactJS-Frontend) e seleziona il branch (ad esempio, main) che contiene il tuo codice ReactJS.
﻿
7.4 Configura il tuo Deployment
Fornisci dettagli di configurazione aggiuntivi:
Comando di Build:
Se il tuo repository non include una build precompilata, specifica il comando di build (ad es., npm run build). Back4app eseguirà questo comando durante il deployment.
Directory di Output:
Imposta la directory di output su build in modo che Back4app sappia quale cartella contiene i file del tuo sito statico.
Variabili d'Ambiente:
Se la tua applicazione dipende da variabili d'ambiente (ad es., chiavi API), aggiungile nelle impostazioni di configurazione.
﻿
7.5 Dockerizza il tuo Progetto Applicativo ReactJS
Se preferisci utilizzare Docker per il deployment, puoi containerizzare la tua applicazione ReactJS. Includi un Dockerfile nel tuo repository con contenuti simili ai seguenti:
Dockerfile
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node runtime as a parent image
FROM node:16-alpine as build

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application
COPY . .

# Build the React app
RUN npm run build

# Use Nginx to serve the build
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
Includi questo Dockerfile nel tuo repository. Poi, nella tua configurazione di distribuzione web, seleziona l'opzione di distribuzione Docker per costruire e distribuire la tua applicazione containerizzata.
﻿
7.6 Distribuisci la tua applicazione
Clicca sul pulsante di distribuzione:
Una volta configurate le impostazioni di distribuzione, clicca sul Distribuisci pulsante.
Monitora il processo di costruzione:
Back4app preleverà il tuo codice da GitHub, eseguirà il comando di costruzione (se configurato) e distribuirà la tua app all'interno di un container.
Ottieni il tuo URL:
Dopo il completamento della distribuzione, Back4app fornirà un URL dove è ospitata la tua applicazione ReactJS.
﻿
7.7 Verifica la tua distribuzione
Visita l'URL fornito:
Apri l'URL nel tuo browser per visualizzare il tuo sito distribuito.
Testa l'applicazione:
Verifica che la tua applicazione si carichi correttamente, che tutte le rotte funzionino come previsto e che tutte le risorse (CSS, JavaScript, immagini) siano servite correttamente.
Risolvi i problemi se necessario:
Usa gli strumenti per sviluppatori del tuo browser per controllare eventuali errori. Se si verificano problemi, rivedi i log di distribuzione in Back4app e verifica l'integrazione con GitHub e le impostazioni di costruzione.
﻿
Passo 8 – Conclusione e Prossimi Passi
Congratulazioni! Hai costruito un'app CRUD di base completa utilizzando ReactJS e Back4app. 
Hai configurato un progetto chiamato Basic-CRUD-App-ReactJS, progettato collezioni di database dettagliate per Articoli e Utenti, e gestito i tuoi dati tramite il potente Admin App. 
Hai anche integrato il tuo frontend ReactJS con il tuo backend e protetto i tuoi dati con controlli di accesso robusti.
Prossimi Passi:
Migliora il tuo Frontend:
Estendi la tua app ReactJS con funzionalità come visualizzazioni dettagliate degli articoli, funzionalità di ricerca e notifiche in tempo reale.
Integra Funzionalità Aggiuntive:
Considera di aggiungere logica backend più avanzata (ad es., Cloud Functions), integrazioni API di terze parti o controlli di accesso basati sui ruoli.
Esplora Risorse Aggiuntive:
Rivedi la documentazione di Back4app e tutorial aggiuntivi per approfondimenti sull'ottimizzazione delle prestazioni e integrazioni personalizzate.
Seguendo questo tutorial, ora hai le competenze per creare un backend CRUD robusto e scalabile per la tua applicazione ReactJS utilizzando Back4app. Buon coding!
Campo	Tipo di Dati	Descrizione
_id	ObjectId	Chiave primaria generata automaticamente.
titolo	Stringa	Il titolo dell'elemento.
descrizione	Stringa	Una breve descrizione dell'oggetto.
creato_il	Data	Timestamp quando l'elemento è stato creato.
aggiornato_il	Data	Timestamp dell'ultima aggiornamento dell'elemento.
Campo	Tipo di dato	Descrizione
_id	ObjectId	Chiave primaria generata automaticamente.
nome utente	Stringa	Nome utente unico per l'utente.
email	Stringa	Indirizzo email unico.
hash_password	Stringa	Password hash per l'autenticazione.
creato_il	Data	Timestamp in cui è stato creato l'account utente.
aggiornato_a	Data	Timestamp quando l'account utente è stato aggiornato.
Aggiornato 12 Feb 2025
Questa pagina ti è stata di aiuto?
Tutorial di Back4app
AVANTI IL PROSSIMO
Come costruire un backend per Blazor?