メインコンテンツへスキップ
このクイックスタートに従って、React プロジェクトに Base44 を追加してください。Base44 バックエンドを作成し、エンティティを定義して、SDK をフロントエンドに統合します。
CLI には Node.js 20.19.0 以上が必要です。

​
セットアップ

1

Base44 CLI をインストール

Base44 CLI をグローバルにインストールします:
npm install -g base44@latest
2

Base44 バックエンドを作成

React プロジェクトディレクトリに移動して、次を実行します:
base44 create
まだログインしていない場合、コマンドは認証を促します。プロンプトが表示されたら Create a basic project を選択してください。これにより、React プロジェクトディレクトリ内にバックエンドファイルが作成されます。その後、プロジェクトを構成するためのプロンプトに従ってください。プロジェクトを作成する際、Base44 skills が自動的に含まれ、AI エージェントに Base44 タスクの指示とコンテキストを提供します。
3

出力ディレクトリを構成

config.jsonc を更新して React のビルド出力を指すように設定してください。site.outputDirectory フィールドを追加または変更します:
{
  "site": {
    "outputDirectory": "dist"
  }
}
4

エンティティを定義

データ構造を定義するエンティティスキーマを作成します。エンティティファイルは base44/entities/ ディレクトリに配置する必要があります。例えば、base44/entities/task.jsonc を作成します:
{
  "name": "Task",
  "type": "object",
  "properties": {
    "title": {
      "type": "string"
    },
    "completed": {
      "type": "boolean",
      "default": false
    }
  },
  "required": ["title"]
}
5

エンティティを Base44 にプッシュ

エンティティスキーマを Base44 にプッシュします:
base44 entities push
このコマンドは、ローカルのエンティティ定義を Base44 バックエンドと同期し、アプリケーションで使用できるようにします。詳細は entities push を参照してください。
6

Base44 SDK をインストール

Base44 JavaScript SDK をインストールします:
npm install @base44/sdk
7

Base44 クライアントを作成

プロジェクトで Base44 SDK クライアントを作成します。appId は base44/.app.jsonc ファイルで確認できます。例えば、src/api/base44Client.js を作成します:
import { createClient } from '@base44/sdk';

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

フロントエンドで SDK を使用

タスクをリストして追加するシンプルなコンポーネントを作成します。例えば、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>
  );
}
SDK を呼び出すときは、大文字小文字を含むスキーマの正確なエンティティ名を使用してください。慣例上、エンティティ名は大文字で始まります。例えば、スキーマに "name": "Task" がある場合、base44.entities.Task.list() としてアクセスします。
9

アプリをローカルで実行

Vite 開発サーバーを起動して、インテグレーションをテストします。プロジェクトルートから次を実行します:
npm run dev
React プロジェクトは SDK クライアントを介して Base44 バックエンドに接続し、デプロイされたエンティティをリアルタイムで操作できます。
10

フロントエンドをビルド

ローカルですべてが意図通りに見えたら、React プロジェクトを本番用にビルドします:
npm run build
これにより、出力ディレクトリ (通常は dist) に最適化された本番ファイルが作成されます。
11

フロントエンドをデプロイ

ビルドされたフロントエンドを Base44 にデプロイします:
base44 deploy
deploy コマンドは、ビルドされたフロントエンドを Base44 ホスティングにデプロイします。前回のプッシュ以降にエンティティスキーマに変更があれば、それらの更新もプッシュします。完了すると、プロジェクト名、Base44 ダッシュボードへのリンク、ライブアプリケーション URL が表示されます。

​
次のステップ

これでプロジェクトに Base44 バックエンドが統合されたので、次のことができます:
  • SDK を使用してフロントエンドにより多くの機能を追加します。
  • エンティティ、バックエンド関数、エージェントを追加します。TypeScript で作業している場合は、オートコンプリートと型安全性を得るために型を生成してください。
  • バックエンドの base44 dev とフロントエンドの npm run dev を実行してローカルでテストします。セットアップ手順については、ローカル開発を参照してください。
  • フロントエンドの構築を続け、base44 deploy で更新をデプロイします。
  • base44 site open でデプロイされたサイトを開きます。

​
関連項目

このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。