Saltar al contenido principal
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.
El CLI requiere Node.js 20.19.0 o superior.

​
Configuración

1

Instala el CLI de Base44

Instala el CLI de Base44 globalmente:
npm install -g base44@latest
2

Crea un backend de Base44

Navega al directorio de tu proyecto React Native y ejecuta:
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 se incluyen automáticamente, proporcionando a tu agente de IA instrucciones y contexto para las tareas de Base44.
3

Define entidades

Crea esquemas de entidades para definir tus estructuras de datos. Los archivos de entidades deben colocarse en el directorio base44/entities/.Por ejemplo, crea base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
4

Envía las entidades a Base44

Envía los esquemas de tus entidades a Base44:
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 para más información.
5

Instala el SDK de Base44

Instala el SDK de JavaScript de Base44:
npm install @base44/sdk
6

Crea un cliente de Base44

Crea un cliente del SDK de Base44 en tu proyecto. El appId se puede encontrar en tu archivo base44/.app.jsonc.Por ejemplo, crea api/base44Client.js:
import { createClient } from '@base44/sdk';

export const base44 = createClient({
  appId: 'your-app-id-from-app.jsonc'
});
7

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:
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,
  },
});
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().
8

Usa la pantalla en tu app

Actualiza tu App.js para importar y renderizar el componente TaskListScreen:
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',
  },
});
9

Ejecuta tu app localmente

Inicia tu servidor de desarrollo de Expo para probar tu integración. Desde la raíz de tu proyecto, ejecuta:
npx expo start
Sigue las instrucciones de Expo CLI 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.

​
Siguientes pasos

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

​
Ver también

Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la versión en inglés.