Pular para o conteúdo principal
Siga este quickstart para adicionar a Base44 ao seu projeto React. Você criará um backend Base44, definirá entidades e integrará o SDK no seu frontend.
A CLI requer Node.js 20.19.0 ou superior.

​
Configuração

1

Instale a CLI da Base44

Instale a CLI da Base44 globalmente:
npm install -g base44@latest
2

Crie um backend Base44

Navegue até o diretório do seu projeto React e execute:
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. Em seguida, siga as instruções para configurar seu projeto.Quando você cria um projeto, as Base44 skills são incluídas automaticamente, fornecendo ao seu agente de IA instruções e contexto para tarefas da Base44.
3

Configure o diretório de saída

Atualize seu config.jsonc para apontar para a saída do build do React. Adicione ou modifique o campo site.outputDirectory:
{
  "site": {
    "outputDirectory": "dist"
  }
}
4

Defina entidades

Crie schemas de entidade para definir suas estruturas de dados. Arquivos de entidade devem estar no diretório base44/entities/.Por exemplo, crie base44/entities/task.jsonc:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

Envie entidades para a Base44

Envie seus schemas de entidade para a Base44:
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 para mais informações.
6

Instale o SDK da Base44

Instale o SDK JavaScript da Base44:
npm install @base44/sdk
7

Crie um cliente Base44

Crie um cliente SDK da Base44 no seu projeto. O appId pode ser encontrado no seu arquivo base44/.app.jsonc.Por exemplo, crie src/api/base44Client.js:
import { createClient } from '@base44/sdk';

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

Use o SDK no seu frontend

Crie um componente simples para listar e adicionar tarefas. Por exemplo, crie src/components/TaskList.jsx:
import { useState, useEffect } from 'react';
import { base44 } from '../api/base44Client';

export default function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [newTaskTitle, setNewTaskTitle] = 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 (e) => {
    e.preventDefault();
    if (!newTaskTitle.trim()) return;

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

  return (
    <div>
      <h1>Tasks</h1>

      {isLoading && <p>Loading...</p>}

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>

      <form onSubmit={addTask}>
        <input
          type="text"
          value={newTaskTitle}
          onChange={(e) => setNewTaskTitle(e.target.value)}
          placeholder="New task"
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading || !newTaskTitle.trim()}>
          Add Task
        </button>
      </form>
    </div>
  );
}
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().
9

Execute seu app localmente

Inicie seu servidor de desenvolvimento Vite para testar sua integração. A partir da raiz do projeto, execute:
npm run dev
Seu projeto React se conectará ao seu backend Base44 através do cliente SDK, permitindo trabalhar com suas entidades implantadas em tempo real.
10

Faça build do seu frontend

Quando estiver satisfeito com como tudo está localmente, faça build do seu projeto React para produção:
npm run build
Isso cria arquivos de produção otimizados no seu diretório de saída (normalmente dist).
11

Implante seu frontend

Implante seu frontend compilado na Base44:
base44 deploy
O comando deploy implanta seu frontend compilado na hospedagem da Base44. Também enviará quaisquer atualizações nos seus schemas de entidade se você tiver feito mudanças desde o último push. Quando concluído, você verá o nome do seu projeto, um link para seu dashboard Base44 e a URL da sua aplicação ao vivo.

​
Próximos passos

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

​
Veja também

Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.