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

> Añade un backend de Base44 a tu proyecto React Native Expo

Sigue este quickstart para añadir Base44 a tu proyecto React Native (Expo). Crearás un backend de Base44, definirás entidades e integrarás el SDK en tu app móvil.

<Note>El CLI requiere Node.js 20.19.0 o superior.</Note>

## Configuración

<Steps>
  <Step title="Instala el CLI de Base44">
    Instala el CLI de Base44 globalmente:

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

  <Step title="Crea un backend de Base44">
    Navega al directorio de tu proyecto React Native y ejecuta:

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

    Si aún no has iniciado sesión, el comando te pedirá que te autentiques.

    Selecciona **Create a basic project** cuando se te indique. Esto crea los archivos del backend dentro del directorio de tu proyecto React Native. Luego sigue las indicaciones para configurar tu proyecto.

    Cuando creas un proyecto, las [skills de Base44](/developers/backend/overview/base44-skills) se incluyen automáticamente, proporcionando a tu agente de IA instrucciones y contexto para las tareas de Base44.
  </Step>

  <Step title="Define entidades">
    Crea [esquemas de entidades](/developers/references/entities/introduction) para definir tus estructuras de datos. Los archivos de entidades deben colocarse en el directorio `base44/entities/`.

    Por ejemplo, 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="Envía las entidades a Base44">
    Envía los esquemas de tus entidades a Base44:

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

    Este comando sincroniza tus definiciones de entidades locales con tu backend de Base44, haciéndolas disponibles para su uso en tu aplicación. Consulta [`entities push`](/developers/references/cli/commands/entities-push) para más información.
  </Step>

  <Step title="Instala el SDK de Base44">
    Instala el SDK de JavaScript de Base44:

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

  <Step title="Crea un cliente de Base44">
    Crea un [cliente](/developers/references/sdk/getting-started/client) del SDK de Base44 en tu proyecto. El `appId` se puede encontrar en tu archivo `base44/.app.jsonc`.

    Por ejemplo, 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 pantalla de lista de tareas">
    Crea un componente de pantalla sencillo para listar y añadir tareas. Por ejemplo, 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 el nombre exacto de la entidad de tu esquema al llamar al SDK, incluida la capitalización. Por convención, los nombres de entidades comienzan con mayúscula. Por ejemplo, si tu esquema tiene `"name": "Task"`, accedes a ella como `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Usa la pantalla en tu app">
    Actualiza tu `App.js` para importar y renderizar el 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="Ejecuta tu app localmente">
    Inicia tu servidor de desarrollo de Expo para probar tu integración. Desde la raíz de tu proyecto, ejecuta:

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

    Sigue las [instrucciones de Expo CLI](https://docs.expo.dev/more/expo-cli/#develop) para abrir tu app en un simulador, un dispositivo físico o un navegador web.

    Tu app de React Native se conectará a tu backend de Base44 a través del cliente del SDK, lo que te permite trabajar con tus entidades desplegadas en tiempo real.
  </Step>
</Steps>

## Siguientes pasos

Ahora que tu backend de Base44 está integrado con tu proyecto, puedes:

* Usar el [SDK](/developers/references/sdk/getting-started/overview) para añadir más funcionalidad a tu app móvil.
* Añadir [entidades](/developers/backend/resources/entities/overview), [funciones de backend](/developers/backend/resources/functions) y [agentes](/developers/backend/resources/agents-config). Si trabajas en TypeScript, [genera tipos](/developers/references/sdk/getting-started/dynamic-types) para obtener autocompletado y seguridad de tipos.
* Probar localmente ejecutando [`base44 dev`](/developers/references/cli/commands/dev) para el backend junto con el servidor de desarrollo de tu app. Consulta [Desarrollo local](/developers/backend/overview/local-dev/local-development-overview) para las instrucciones de configuración.

## Ver también

* [Referencia de comandos del CLI](/developers/references/cli/commands/introduction): Todos los comandos del CLI disponibles
* [Estructura del proyecto](/developers/backend/overview/project-structure): Cómo se organizan los archivos del proyecto
* [Documentación del SDK de JavaScript](/developers/references/sdk/getting-started/overview): Conecta tu app al backend
* [Skills de Base44](/developers/backend/overview/base44-skills): Enseña a los asistentes de IA a trabajar con Base44

<Note>Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la [versión en inglés](/). </Note>