> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart React

> Ajoutez un backend Base44 à votre projet React

Suivez ce quickstart pour ajouter Base44 à votre projet React. Vous allez créer un backend Base44, définir des entités et intégrer le SDK dans votre frontend.

<Note>La CLI nécessite Node.js 20.19.0 ou supérieur.</Note>

## Configuration

<Steps>
  <Step title="Installer la CLI Base44">
    Installez la CLI Base44 globalement :

    ```bash theme={null}
    npm install -g base44@latest
    ```
  </Step>

  <Step title="Créer un backend Base44">
    Naviguez vers le répertoire de votre projet React, puis exécutez :

    ```bash theme={null}
    base44 create
    ```

    Si vous n'êtes pas déjà connecté, la commande vous demandera de vous authentifier.

    Sélectionnez **Create a basic project** lorsque demandé. Cela crée les fichiers backend dans le répertoire de votre projet React. Suivez ensuite les invites pour configurer votre projet.

    Lorsque vous créez un projet, les [skills Base44](/developers/backend/overview/base44-skills) sont incluses automatiquement, fournissant à votre agent IA des instructions et du contexte pour les tâches Base44.
  </Step>

  <Step title="Configurer le répertoire de sortie">
    Mettez à jour votre [config.jsonc](/developers/backend/overview/project-structure#config-jsonc) pour pointer vers la sortie de build React. Ajoutez ou modifiez le champ `site.outputDirectory` :

    ```json theme={null}
    {
      "site": {
        "outputDirectory": "dist"
      }
    }
    ```
  </Step>

  <Step title="Définir des entités">
    Créez des [schémas d'entités](/developers/references/entities/introduction) pour définir vos structures de données. Les fichiers d'entités doivent être placés dans le répertoire `base44/entities/`.

    Par exemple, créez `base44/entities/task.jsonc` :

    ```json theme={null}
    {
      "name": "Task",
      "type": "object",
      "properties": {
        "title": {
          "type": "string"
        },
        "completed": {
          "type": "boolean",
          "default": false
        }
      },
      "required": ["title"]
    }
    ```
  </Step>

  <Step title="Pousser les entités vers Base44">
    Poussez vos schémas d'entités vers Base44 :

    ```bash theme={null}
    base44 entities push
    ```

    Cette commande synchronise vos définitions d'entités locales avec votre backend Base44, les rendant disponibles pour une utilisation dans votre application. Consultez [`entities push`](/developers/references/cli/commands/entities-push) pour plus d'informations.
  </Step>

  <Step title="Installer le SDK Base44">
    Installez le SDK JavaScript Base44 :

    ```bash theme={null}
    npm install @base44/sdk
    ```
  </Step>

  <Step title="Créer un client Base44">
    Créez un [client](/developers/references/sdk/getting-started/client) SDK Base44 dans votre projet. L'`appId` peut être trouvé dans votre fichier `base44/.app.jsonc`.

    Par exemple, créez `src/api/base44Client.js` :

    ```javascript theme={null}
    import { createClient } from '@base44/sdk';

    export const base44 = createClient({
      appId: 'your-app-id-from-app.jsonc'
    });
    ```
  </Step>

  <Step title="Utiliser le SDK dans votre frontend">
    Créez un composant simple pour lister et ajouter des tâches. Par exemple, créez `src/components/TaskList.jsx` :

    ```jsx theme={null}
    import { useState, useEffect } from 'react';
    import { base44 } from '../api/base44Client';

    export default function TaskList() {
      const [tasks, setTasks] = useState([]);
      const [newTaskTitle, setNewTaskTitle] = useState('');
      const [isLoading, setIsLoading] = useState(false);

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

      const loadTasks = async () => {
        setIsLoading(true);
        try {
          // Get records
          const taskList = await base44.entities.Task.list();
          setTasks(taskList);
        } catch (error) {
          console.error('Error loading tasks:', error);
        }
        setIsLoading(false);
      };

      const addTask = async (e) => {
        e.preventDefault();
        if (!newTaskTitle.trim()) return;

        setIsLoading(true);
        try {
          // Create a record
          const newTask = await base44.entities.Task.create({
            title: newTaskTitle,
            completed: false
          });
          setTasks([...tasks, newTask]);
          setNewTaskTitle('');
        } catch (error) {
          console.error('Error creating task:', error);
        }
        setIsLoading(false);
      };

      return (
        <div>
          <h1>Tasks</h1>

          {isLoading && <p>Loading...</p>}

          <ul>
            {tasks.map((task) => (
              <li key={task.id}>{task.title}</li>
            ))}
          </ul>

          <form onSubmit={addTask}>
            <input
              type="text"
              value={newTaskTitle}
              onChange={(e) => setNewTaskTitle(e.target.value)}
              placeholder="New task"
              disabled={isLoading}
            />
            <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
              Add Task
            </button>
          </form>
        </div>
      );
    }
    ```

    <Note>
      Utilisez le nom exact de l'entité de votre schéma lors de l'appel du SDK, y compris la capitalisation. Par convention, les noms d'entités commencent par une majuscule. Par exemple, si votre schéma a `"name": "Task"`, vous y accédez avec `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Exécuter votre application localement">
    Démarrez votre serveur de développement Vite pour tester votre intégration. Depuis la racine de votre projet, exécutez :

    ```bash theme={null}
    npm run dev
    ```

    Votre projet React se connectera à votre backend Base44 via le client SDK, vous permettant de travailler avec vos entités déployées en temps réel.
  </Step>

  <Step title="Construire votre frontend">
    Lorsque vous êtes satisfait du rendu local, construisez votre projet React pour la production :

    ```bash theme={null}
    npm run build
    ```

    Cela crée des fichiers de production optimisés dans votre répertoire de sortie (généralement `dist`).
  </Step>

  <Step title="Déployer votre frontend">
    Déployez votre frontend compilé sur Base44 :

    ```bash theme={null}
    base44 deploy
    ```

    La commande `deploy` déploie votre frontend compilé sur l'hébergement Base44. Elle poussera également toutes les mises à jour de vos schémas d'entités si vous avez fait des changements depuis le dernier push. Une fois terminé, vous verrez le nom de votre projet, un lien vers votre tableau de bord Base44 et l'URL de votre application en direct.
  </Step>
</Steps>

## Étapes suivantes

Maintenant que votre backend Base44 est intégré à votre projet, vous pouvez :

* Utiliser le [SDK](/developers/references/sdk/getting-started/overview) pour ajouter plus de fonctionnalités à votre frontend.
* Ajouter des [entités](/developers/backend/resources/entities/overview), des [fonctions backend](/developers/backend/resources/functions) et des [agents](/developers/backend/resources/agents-config). Si vous travaillez en TypeScript, [générez des types](/developers/references/sdk/getting-started/dynamic-types) pour obtenir l'autocomplétion et la sécurité des types.
* Tester localement en exécutant [`base44 dev`](/developers/references/cli/commands/dev) pour le backend et `npm run dev` pour le frontend. Consultez [Développement local](/developers/backend/overview/local-dev/local-development-overview) pour les instructions de configuration.
* Continuer à construire votre frontend et déployer les mises à jour avec [`base44 deploy`](/developers/references/cli/commands/deploy).
* Ouvrir votre site déployé avec [`base44 site open`](/developers/references/cli/commands/site-open).

## Voir aussi

* [Référence des commandes CLI](/developers/references/cli/commands/introduction) : toutes les commandes CLI disponibles
* [Structure du projet](/developers/backend/overview/project-structure) : comment les fichiers de projet sont organisés
* [Documentation du SDK JavaScript](/developers/references/sdk/getting-started/overview) : connectez votre application au backend
* [Skills Base44](/developers/backend/overview/base44-skills) : apprenez aux assistants IA à travailler avec Base44

<Note>Cette page a été traduite à l'aide de l'IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/). </Note>