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

> Aggiungi un backend Base44 al tuo progetto React Native Expo

Segui questa quickstart per aggiungere Base44 al tuo progetto React Native (Expo). Creerai un backend Base44, definirai entità e integrerai l'SDK nella tua app mobile.

<Note>La CLI richiede Node.js 20.19.0 o superiore.</Note>

## Configurazione

<Steps>
  <Step title="Installa la CLI di Base44">
    Installa la CLI di Base44 a livello globale:

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

  <Step title="Crea un backend Base44">
    Vai nella directory del tuo progetto React Native, quindi esegui:

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

    Se non hai già effettuato l'accesso, il comando ti chiederà di autenticarti.

    Seleziona **Create a basic project** quando richiesto. Questo crea i file backend all'interno della directory del tuo progetto React Native. Quindi segui le richieste per configurare il tuo progetto.

    Quando crei un progetto, le [skill di Base44](/developers/backend/overview/base44-skills) sono incluse automaticamente, fornendo al tuo agente IA istruzioni e contesto per le attività Base44.
  </Step>

  <Step title="Definisci le entità">
    Crea [schemi di entità](/developers/references/entities/introduction) per definire le tue strutture di dati. I file delle entità devono essere posizionati nella directory `base44/entities/`.

    Ad esempio, crea `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="Invia le entità a Base44">
    Invia i tuoi schemi di entità a Base44:

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

    Questo comando sincronizza le tue definizioni di entità locali con il tuo backend Base44, rendendole disponibili per l'uso nella tua applicazione. Consulta [`entities push`](/developers/references/cli/commands/entities-push) per maggiori informazioni.
  </Step>

  <Step title="Installa l'SDK di Base44">
    Installa il JavaScript SDK di Base44:

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

  <Step title="Crea un client Base44">
    Crea un [client](/developers/references/sdk/getting-started/client) SDK di Base44 nel tuo progetto. L'`appId` si trova nel tuo file `base44/.app.jsonc`.

    Ad esempio, crea `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="Crea una schermata di elenco attività">
    Crea un semplice componente schermata per elencare e aggiungere attività. Ad esempio, crea `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>
      Usa il nome esatto dell'entità dal tuo schema quando chiami l'SDK, comprese le maiuscole. Per convenzione, i nomi delle entità iniziano con una lettera maiuscola. Ad esempio, se il tuo schema ha `"name": "Task"`, vi accedi come `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Usa la schermata nella tua app">
    Aggiorna il tuo `App.js` per importare e renderizzare il componente `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="Esegui la tua app in locale">
    Avvia il tuo server di sviluppo Expo per testare l'integrazione. Dalla root del tuo progetto, esegui:

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

    Segui le [istruzioni della CLI di Expo](https://docs.expo.dev/more/expo-cli/#develop) per aprire la tua app su un simulatore, un dispositivo fisico o un browser web.

    La tua app React Native si connetterà al tuo backend Base44 tramite il client SDK, permettendoti di lavorare con le tue entità distribuite in tempo reale.
  </Step>
</Steps>

## Passaggi successivi

Ora che il tuo backend Base44 è integrato con il tuo progetto, puoi:

* Usare l'[SDK](/developers/references/sdk/getting-started/overview) per aggiungere più funzionalità alla tua app mobile.
* Aggiungere [entità](/developers/backend/resources/entities/overview), [funzioni backend](/developers/backend/resources/functions) e [agenti](/developers/backend/resources/agents-config). Se stai lavorando in TypeScript, [genera i tipi](/developers/references/sdk/getting-started/dynamic-types) per ottenere autocompletamento e sicurezza dei tipi.
* Testare in locale eseguendo [`base44 dev`](/developers/references/cli/commands/dev) per il backend insieme al dev server della tua app. Consulta [Sviluppo locale](/developers/backend/overview/local-dev/local-development-overview) per le istruzioni di configurazione.

## Vedi anche

* [Riferimento comandi CLI](/developers/references/cli/commands/introduction): tutti i comandi CLI disponibili
* [Struttura del progetto](/developers/backend/overview/project-structure): come sono organizzati i file di progetto
* [Documentazione JavaScript SDK](/developers/references/sdk/getting-started/overview): collega la tua app al backend
* [Skill Base44](/developers/backend/overview/base44-skills): insegna agli assistenti IA a lavorare con Base44

<Note>Questa pagina è stata tradotta utilizzando l'IA. Per informazioni più accurate e aggiornate, consulta la [versione inglese](/). </Note>