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

> Adicione um backend Base44 ao seu projeto React Native Expo

Siga este quickstart para adicionar a Base44 ao seu projeto React Native (Expo). Você criará um backend Base44, definirá entidades e integrará o SDK no seu app mobile.

<Note>A CLI requer Node.js 20.19.0 ou superior.</Note>

## Configuração

<Steps>
  <Step title="Instale a CLI da Base44">
    Instale a CLI da Base44 globalmente:

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

  <Step title="Crie um backend Base44">
    Navegue até o diretório do seu projeto React Native e execute:

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

    Se você ainda não estiver logado, o comando vai solicitar que você autentique.

    Selecione **Create a basic project** quando solicitado. Isso cria os arquivos do backend dentro do diretório do seu projeto React Native. Em seguida, siga as instruções para configurar seu projeto.

    Quando você cria um projeto, as [Base44 skills](/developers/backend/overview/base44-skills) são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
  </Step>

  <Step title="Defina entidades">
    Crie [schemas de entidade](/developers/references/entities/introduction) para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório `base44/entities/`.

    Por exemplo, crie `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="Envie entidades para a Base44">
    Envie seus schemas de entidade para a Base44:

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

    Este comando sincroniza suas definições locais de entidade com seu backend Base44, tornando-as disponíveis para uso na sua aplicação. Veja [`entities push`](/developers/references/cli/commands/entities-push) para mais informações.
  </Step>

  <Step title="Instale o SDK da Base44">
    Instale o SDK JavaScript da Base44:

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

  <Step title="Crie um cliente Base44">
    Crie um [cliente](/developers/references/sdk/getting-started/client) SDK da Base44 no seu projeto. O `appId` pode ser encontrado no seu arquivo `base44/.app.jsonc`.

    Por exemplo, crie `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="Crie uma tela de lista de tarefas">
    Crie um componente de tela simples para listar e adicionar tarefas. Por exemplo, crie `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>
      Use o nome exato da entidade do seu schema ao chamar o SDK, incluindo capitalização. Por convenção, os nomes de entidade começam com letra maiúscula. Por exemplo, se seu schema tem `"name": "Task"`, você acessa como `base44.entities.Task.list()`.
    </Note>
  </Step>

  <Step title="Use a tela no seu app">
    Atualize seu `App.js` para importar e renderizar o 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="Execute seu app localmente">
    Inicie seu servidor de desenvolvimento Expo para testar sua integração. A partir da raiz do projeto, execute:

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

    Siga as [instruções da Expo CLI](https://docs.expo.dev/more/expo-cli/#develop) para abrir seu app em um simulador, dispositivo físico ou navegador web.

    Seu app React Native se conectará ao seu backend Base44 através do cliente SDK, permitindo trabalhar com suas entidades implantadas em tempo real.
  </Step>
</Steps>

## Próximos passos

Agora que o backend Base44 está integrado ao seu projeto, você pode:

* Usar o [SDK](/developers/references/sdk/getting-started/overview) para adicionar mais funcionalidade ao seu app mobile.
* Adicionar [entidades](/developers/backend/resources/entities/overview), [funções de backend](/developers/backend/resources/functions) e [agentes](/developers/backend/resources/agents-config). Se está trabalhando em TypeScript, [gere tipos](/developers/references/sdk/getting-started/dynamic-types) para obter autocomplete e segurança de tipo.
* Testar localmente executando [`base44 dev`](/developers/references/cli/commands/dev) para o backend junto com o dev server do seu app. Veja [Desenvolvimento local](/developers/backend/overview/local-dev/local-development-overview) para instruções de configuração.

## Veja também

* [Referência de comandos da CLI](/developers/references/cli/commands/introduction): Todos os comandos da CLI disponíveis
* [Estrutura do projeto](/developers/backend/overview/project-structure): Como os arquivos do projeto são organizados
* [Documentação do SDK JavaScript](/developers/references/sdk/getting-started/overview): Conecte seu app ao backend
* [Base44 Skills](/developers/backend/overview/base44-skills): Ensine assistentes de IA a trabalhar com a Base44

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>