Quickstarters
Comment construire une application CRUD avec ReactJS ?

43min
Introduction
Dans ce tutoriel, vous allez créer une application CRUD complète (créer, lire, mettre à jour et supprimer) en utilisant ReactJS. 
Ce guide est conçu pour effectuer les opérations de base d'une application logicielle en démontrant comment construire des applications CRUD qui gèrent et mettent à jour efficacement les données. 
Vous commencerez par créer et configurer un projet Back4app nommé Basic-CRUD-App-ReactJS, qui sert de système backend robuste pour votre application web.
Ensuite, vous concevrez un schéma de base de données évolutif en définissant des collections et des champs détaillés—soit manuellement, soit avec l'aide de l'Agent IA de Back4app. 
Puis, vous utiliserez l'Application Admin de Back4app—un outil de gestion convivial avec une interface de glisser-déposer—pour gérer facilement vos collections de données. 
Cette interface d'administration améliore l'expérience utilisateur et simplifie l'interface utilisateur, permettant aux utilisateurs d'effectuer rapidement des opérations CRUD.
Enfin, vous déploierez votre frontend ReactJS et l'intégrerez avec Back4app en utilisant REST/GraphQL (ou le SDK Parse, lorsque disponible), tout en sécurisant votre backend avec des contrôles d'accès avancés.
À la fin de ce guide, vous aurez construit une application web prête pour la production qui non seulement prend en charge les opérations CRUD de base, mais inclut également l'authentification des utilisateurs et des capacités robustes de mise à jour des données.
Points clés à retenir
Apprenez à construire des applications CRUD qui gèrent efficacement les données à l'aide d'un système de gestion de base de données fiable.
Obtenez des informations pratiques sur la conception d'un backend évolutif et son intégration avec un frontend ReactJS pour améliorer l'expérience utilisateur.
Découvrez comment utiliser un outil de gestion par glisser-déposer (l'application Back4app Admin) pour simplifier les opérations de création, de lecture, de mise à jour et de suppression.
Comprenez les techniques de déploiement, y compris la conteneurisation Docker, pour lancer rapidement votre application web.
﻿
Prérequis
Avant de commencer, assurez-vous d'avoir ce qui suit :
Un compte Back4app et un nouveau projet configuré.
Si vous avez besoin d'aide, consultez Démarrer avec Back4app.
Un environnement de développement ReactJS.
Utilisez Create React App ou un outil similaire. Assurez-vous que Node.js (version 14 ou supérieure) est installé.
Compréhension de base de JavaScript, ReactJS et des API REST.
Consultez la documentation ReactJS si nécessaire.
﻿
Étape 1 – Configuration du projet
Créer un nouveau projet Back4app
Connectez-vous à votre compte Back4app.
Cliquez sur le bouton “Nouvelle application” dans votre tableau de bord.
Entrez le nom du projet : Basic-CRUD-App-ReactJS et suivez les instructions pour créer votre projet.
Créer un nouveau projet
﻿
Une fois créé, votre nouveau projet apparaîtra sur votre tableau de bord Back4app, fournissant une base solide pour votre configuration backend et la gestion de votre projet.
﻿
Étape 2 – Conception du schéma de base de données
Conception de votre modèle de données
Pour l'application CRUD de base, vous allez créer plusieurs collections. 
Voici quelques exemples des collections dont vous aurez besoin, décrivant les champs nécessaires et les types de données pour vous aider à configurer efficacement le schéma de votre base de données.
Ces collections sont conçues pour effectuer les opérations CRUD fondamentales qui permettent aux utilisateurs de créer, lire, mettre à jour et supprimer des données.
1. Collection d'articles
Cette collection stocke des informations sur chaque article.
Champ
Type de données
Description
_id
Identifiant d'objet
Clé primaire générée automatiquement.
titre
Chaîne
Le titre de l'élément.
description
Chaîne
Une brève description de l'article.
créé à
Date
Horodatage lorsque l'élément a été créé.
mis à jour le
Date
Horodatage de la dernière mise à jour de l'élément.
2. Collection des utilisateurs
Cette collection stocke les informations utilisateur et les détails d'authentification.
Champ
Type de données
Description
_id
Identifiant d'objet
Clé primaire générée automatiquement.
nom d'utilisateur
Chaîne
Nom d'utilisateur unique pour l'utilisateur.
email
Chaîne
Adresse e-mail unique.
hash_de_mot_de_passe
Chaîne
Mot de passe haché pour l'authentification.
créé à
Date
Horodatage de la création du compte utilisateur.
mis à jour le
Date
Horodatage de la mise à jour du compte utilisateur.
Vous pouvez configurer ces collections manuellement dans le tableau de bord Back4app en créant une nouvelle classe pour chaque collection et en ajoutant des colonnes pour définir les champs.
Créer une nouvelle classe
﻿
Vous pouvez facilement créer des champs pour votre base de données en sélectionnant un type de données, en nommant le champ, en définissant une valeur par défaut et en précisant s'il est requis.
Créer une colonne
﻿
﻿
Utiliser l'agent AI Back4app pour la génération de schémas
L'agent AI Back4app est un outil puissant disponible directement depuis votre tableau de bord Back4app. 
Il vous permet de générer automatiquement le schéma de votre base de données en fonction d'un prompt qui décrit vos collections et champs souhaités.
Cette fonctionnalité permet de gagner un temps précieux pour la gestion de projet et aide à garantir que votre système de gestion de base de données est configuré pour effectuer les opérations de base requises par votre application web.
Comment utiliser l'agent IA :
Ouvrez l'agent IA :
Connectez-vous à votre tableau de bord Back4app et localisez l'agent IA dans le menu ou dans les paramètres de votre projet.
Décrivez votre modèle de données :
Dans l'interface de l'agent IA, collez un prompt détaillé qui décrit les collections et champs dont vous avez besoin.
Examinez et appliquez :
Une fois soumis, l'agent IA générera les collections et les définitions de champs. Examinez ces suggestions et appliquez-les à votre projet.
Exemple de 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)
﻿
Utiliser l'agent IA de cette manière permet de gagner du temps et garantit que votre schéma est cohérent et optimisé pour les besoins de votre application.
﻿
Étape 3 – Activation de l'application Admin et opérations CRUD
Aperçu de l'application Admin
L'application Admin de Back4app est une interface puissante sans code qui vous permet de gérer vos données backend. 
Cet outil de gestion fournit une interface utilisateur par glisser-déposer qui permet aux utilisateurs d'effectuer facilement des opérations CRUD telles que créer, lire, mettre à jour et supprimer des enregistrements.
Activation de l'application Admin
Accédez au menu “Plus” dans votre tableau de bord Back4app.
Cliquez sur “Admin App” puis sur “Activer l'application Admin.”
Configurez vos identifiants administratifs en créant votre premier utilisateur admin. Ce processus configure également les rôles (par exemple, B4aAdminUser) et les collections système.
Activer l'application Admin
﻿
Après l'activation, connectez-vous à l'application Admin pour gérer vos données.
Tableau de bord de l'application Admin
﻿
Utiliser l'application Admin pour les opérations CRUD
Dans l'application Admin, vous pouvez :
Créer des enregistrements : Cliquez sur le bouton “Ajouter un enregistrement” dans une collection (par exemple, Articles) pour créer de nouvelles entrées.
Lire/Mettre à jour des enregistrements : Sélectionnez un enregistrement pour voir ses détails ou modifier des champs, garantissant une mise à jour fluide des données.
Supprimer des enregistrements : Utilisez l'option de suppression pour retirer les enregistrements qui ne sont plus nécessaires.
Cet outil de gestion facile à utiliser améliore l'expérience utilisateur globale en fournissant une interface simple de glisser-déposer pour les fonctions CRUD.
﻿
Étape 4 – Intégration de ReactJS avec Back4app
Maintenant que votre backend est configuré et géré via l'application Admin, il est temps de connecter votre frontend ReactJS à Back4app.
Option A : Utiliser le SDK Parse
Installer le SDK Parse :
Bash
npm install parse
npm install parse
﻿
Initialiser Parse dans votre application React :
Créer un fichier (par exemple, src/parseConfig.js) :
JS
// src/parseConfig.js
import Parse from 'parse';
// Remplacez par vos véritables identifiants Back4app
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
// src/parseConfig.js
import Parse from 'parse';
// Remplacez par vos véritables identifiants Back4app
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';
export default Parse;
﻿
Utiliser Parse dans un composant React :
Par exemple, créez un composant pour récupérer et afficher des éléments :
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("Erreur lors de la récupération des éléments :", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Éléments</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("Erreur lors de la récupération des éléments :", error);
      }
    };
    fetchItems();
  }, []);
  return (
    <div>
      <h2>Éléments</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.get("title")} — {item.get("description")}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default ItemsList;
﻿
Option B : Utiliser REST ou GraphQL
Si votre environnement ne prend pas en charge le SDK Parse, vous pouvez effectuer des opérations CRUD en utilisant REST ou GraphQL. Par exemple, pour récupérer des éléments en utilisant 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();
﻿
Intégrez ces appels API dans vos composants React selon vos besoins.
﻿
Étape 5 – Sécuriser votre Backend
Listes de Contrôle d'Accès (ACLs)
Sécurisez vos données en attribuant des ACL aux objets. Par exemple, pour créer un élément privé :
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);
  }
}
﻿
Permissions au Niveau de la Classe (CLPs)
Dans le tableau de bord Back4app, configurez les CLPs pour chaque collection afin de définir des règles d'accès par défaut. Cela garantit que seuls les utilisateurs authentifiés ou autorisés peuvent accéder aux données sensibles.
﻿
Étape 6 – Authentification des Utilisateurs
Configuration des Comptes Utilisateurs
Back4app utilise la classe User de Parse pour l'authentification. Dans votre application React, gérez l'inscription et la connexion des utilisateurs comme suit :
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>
  );
};
﻿
Une approche similaire peut être utilisée pour la connexion et la gestion des sessions. Des fonctionnalités supplémentaires telles que les connexions sociales, la vérification des emails et la réinitialisation des mots de passe peuvent être configurées dans le tableau de bord de Back4app.
﻿
Étape 7 – Déployer votre frontend ReactJS avec le déploiement Web
La fonctionnalité de déploiement Web de Back4app vous permet d'héberger votre frontend ReactJS sans effort en déployant votre code depuis un dépôt GitHub.
Dans cette section, vous apprendrez à préparer votre build de production, à valider votre code source sur GitHub, à intégrer votre dépôt avec le déploiement Web et à déployer votre site.
7.1 Préparez votre build de production
Ouvrez votre dossier de projet dans un terminal.
Exécutez la commande de construction :
Bash
npm run build
npm run build
﻿
Cette commande crée un dossier de construction contenant tous les fichiers statiques optimisés (y compris index.html, JavaScript, CSS et images).
Vérifiez la construction :
Assurez-vous que le dossier de construction contient un fichier index.html ainsi que les sous-répertoires d'actifs nécessaires.
﻿
7.2 Organisez et téléchargez votre code source
Votre dépôt doit inclure l'intégralité du code source de votre frontend ReactJS. Une structure de fichiers typique pourrait ressembler à ceci :
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
﻿
Exemples de fichiers de code source
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
﻿
Ajoutez vos fichiers sources :
Bash
git add .
git add .
﻿
Engagez vos modifications :
Bash
git commit -m "Engagement initial du code source frontend ReactJS"
git commit -m "Engagement initial du code source frontend ReactJS"
﻿
Créez un dépôt GitHub :
Par exemple, créez un dépôt nommé Basic-CRUD-App-ReactJS-Frontend sur GitHub.
Poussez votre code sur GitHub :
Bash
git remote add origin https://github.com/votre-nom-utilisateur/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
git remote add origin https://github.com/votre-nom-utilisateur/Basic-CRUD-App-ReactJS-Frontend.git
git push -u origin main
﻿
﻿
7.3 Intégrez votre dépôt GitHub avec le déploiement Web
Accéder au déploiement Web :
Connectez-vous à votre tableau de bord Back4app, naviguez vers votre projet (Basic-CRUD-App-ReactJS), et cliquez sur la fonctionnalité de déploiement Web.
Connectez-vous à GitHub :
Si vous ne l'avez pas encore fait, intégrez votre compte GitHub en suivant les instructions à l'écran. Cette connexion permet à Back4app d'accéder à votre dépôt.
Sélectionnez votre dépôt et votre branche :
Choisissez le dépôt que vous avez créé (par exemple, Basic-CRUD-App-ReactJS-Frontend) et sélectionnez la branche (par exemple, main) qui contient votre code ReactJS.
﻿
7.4 Configurez votre déploiement
Fournissez des détails de configuration supplémentaires :
Commande de construction :
Si votre dépôt n'inclut pas de dossier de construction pré-construit, spécifiez la commande de construction (par exemple, npm run build). Back4app exécutera cette commande lors du déploiement.
Répertoire de sortie :
Définissez le répertoire de sortie sur build afin que Back4app sache quel dossier contient vos fichiers de site statiques.
Variables d'environnement :
Si votre application dépend de variables d'environnement (par exemple, des clés API), ajoutez-les dans les paramètres de configuration.
﻿
7.5 Dockerisez votre projet d'application ReactJS
Si vous préférez utiliser Docker pour le déploiement, vous pouvez containeriser votre application ReactJS. Incluez un Dockerfile dans votre dépôt avec un contenu similaire à ce qui suit :
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;"]
﻿
Incluez ce Dockerfile dans votre dépôt. Ensuite, dans votre configuration de déploiement Web, sélectionnez l'option de déploiement Docker pour construire et déployer votre application conteneurisée.
﻿
7.6 Déployez votre application
Cliquez sur le bouton Déployer :
Une fois que vous avez configuré les paramètres de déploiement, cliquez sur le Déployer bouton.
Surveillez le processus de construction :
Back4app récupérera votre code depuis GitHub, exécutera la commande de construction (si configurée) et déploiera votre application dans un conteneur.
Obtenez votre URL :
Après la fin du déploiement, Back4app fournira une URL où votre application ReactJS est hébergée.
﻿
7.7 Vérifiez votre déploiement
Visitez l'URL fournie :
Ouvrez l'URL dans votre navigateur web pour voir votre site déployé.
Testez l'application :
Vérifiez que votre application se charge correctement, que toutes les routes fonctionnent comme prévu et que tous les actifs (CSS, JavaScript, images) sont correctement servis.
Déboguez si nécessaire :
Utilisez les outils de développement de votre navigateur pour vérifier les erreurs. Si des problèmes surviennent, consultez les journaux de déploiement dans Back4app et vérifiez votre intégration GitHub et vos paramètres de construction.
﻿
Étape 8 – Conclusion et Prochaines Étapes
Félicitations ! Vous avez construit une application CRUD de base complète en utilisant ReactJS et Back4app. 
Vous avez configuré un projet nommé Basic-CRUD-App-ReactJS, conçu des collections de base de données détaillées pour les Articles et les Utilisateurs, et géré vos données via la puissante Admin App. 
Vous avez également intégré votre frontend ReactJS avec votre backend et sécurisé vos données avec des contrôles d'accès robustes.
Prochaines Étapes :
Améliorez Votre Frontend :
Étendez votre application ReactJS avec des fonctionnalités telles que des vues détaillées des articles, une fonctionnalité de recherche et des notifications en temps réel.
Intégrez des Fonctionnalités Supplémentaires :
Envisagez d'ajouter une logique backend plus avancée (par exemple, des fonctions Cloud), des intégrations d'API tierces ou des contrôles d'accès basés sur les rôles.
Explorez d'Autres Ressources :
Consultez la documentation de Back4app et des tutoriels supplémentaires pour des plongées plus profondes dans l'optimisation des performances et les intégrations personnalisées.
En suivant ce tutoriel, vous avez maintenant les compétences nécessaires pour créer un backend CRUD robuste et évolutif pour votre application ReactJS en utilisant Back4app. Bon codage !
Champ	Type de données	Description
_id	Identifiant d'objet	Clé primaire générée automatiquement.
titre	Chaîne	Le titre de l'élément.
description	Chaîne	Une brève description de l'article.
créé à	Date	Horodatage lorsque l'élément a été créé.
mis à jour le	Date	Horodatage de la dernière mise à jour de l'élément.
Champ	Type de données	Description
_id	Identifiant d'objet	Clé primaire générée automatiquement.
nom d'utilisateur	Chaîne	Nom d'utilisateur unique pour l'utilisateur.
email	Chaîne	Adresse e-mail unique.
hash_de_mot_de_passe	Chaîne	Mot de passe haché pour l'authentification.
créé à	Date	Horodatage de la création du compte utilisateur.
mis à jour le	Date	Horodatage de la mise à jour du compte utilisateur.
Mis à jour 12 Feb 2025
Cette page vous a-t-elle aidée?
Tutoriels Back4app
Comment construire un backend pour Blazor ?