> ## 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 Native (Expo)

> Ajoutez un backend Base44 à votre projet React Native Expo

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

<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 Native, 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 Native. 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="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 `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="Créer un écran de liste de tâches">
    Créez un composant d'écran simple pour lister et ajouter des tâches. Par exemple, créez `screens/TaskListScreen.js` :

    ```javascript theme={null}
    import { useState, useEffect } from 'react';
    import { View, Text, FlatList, Button, TextInput, StyleSheet, ActivityIndicator } from 'react-native';
    import { base44 } from '../api/base44Client';

    export default function TaskListScreen() {
      const [tasks, setTasks] = useState([]);
      const [newTitle, setNewTitle] = 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 () => {
        if (!newTitle.trim()) return;

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

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Tasks</Text>

      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text style={styles.task}>{item.title}</Text>}
        ListEmptyComponent={
          isLoading ? <ActivityIndicator /> : <Text style={styles.empty}>No tasks yet</Text>
        }
      />

          <View style={styles.inputRow}>
            <TextInput
              style={styles.input}
              value={newTitle}
              onChangeText={setNewTitle}
              placeholder="New task"
              editable={!isLoading}
            />
            <Button title="Add" onPress={addTask} disabled={isLoading || !newTitle.trim()} />
          </View>
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 20,
      },
      title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
      },
      task: {
        fontSize: 16,
        padding: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
      },
      empty: {
        textAlign: 'center',
        color: '#999',
        marginTop: 20,
      },
      inputRow: {
        flexDirection: 'row',
        gap: 10,
        marginTop: 20,
      },
      input: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        borderRadius: 5,
      },
    });
    ```

    <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="Utiliser l'écran dans votre application">
    Mettez à jour votre `App.js` pour importer et rendre le composant `TaskListScreen` :

    ```javascript theme={null}
    import { StatusBar } from 'expo-status-bar';
    import { StyleSheet, SafeAreaView } from 'react-native';
    import TaskListScreen from './screens/TaskListScreen';

    export default function App() {
      return (
        <SafeAreaView style={styles.container}>
          <TaskListScreen />
          <StatusBar style="auto" />
        </SafeAreaView>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
      },
    });
    ```
  </Step>

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

    ```bash theme={null}
    npx expo start
    ```

    Suivez les [instructions de la CLI Expo](https://docs.expo.dev/more/expo-cli/#develop) pour ouvrir votre application sur un simulateur, un appareil physique ou un navigateur web.

    Votre application React Native 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>
</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 application mobile.
* 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 aux côtés du serveur de développement de votre application. Consultez [Développement local](/developers/backend/overview/local-dev/local-development-overview) pour les instructions de configuration.

## 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>