> ## 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.

# React クイックスタート

> Base44 バックエンドと Vite ベースの React フロントエンドを持つフルスタック Base44 プロジェクトを作成

このクイックスタートに従って、プロジェクトをスキャフォールドし、エンティティを定義し、アプリをローカルで実行してください。このプロジェクトには、事前構成された Base44 SDK クライアント、UI コンポーネント、Tailwind CSS スタイリングが含まれています。

<Note>CLI には Node.js 20.19.0 以上が必要です。</Note>

## セットアップ

<Steps>
  <Step title="Base44 CLI をインストール">
    Base44 CLI をグローバルにインストールします:

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

  <Step title="プロジェクトを作成">
    新しい Base44 プロジェクトを作成します:

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

    まだログインしていない場合、コマンドは認証を促します。

    プロンプトが表示されたら **Start from a template** を選択し、その後プロジェクトを構成し、エンティティをプッシュし、サイトをデプロイするためのプロンプトに従ってください。
  </Step>
</Steps>

完了すると、プロジェクト名、Base44 ダッシュボードへのリンク、ライブアプリケーション URL が表示されます。

生成されたプロジェクト構造:

<Tree>
  <Tree.Folder name="<your-project-name>" defaultOpen>
    <Tree.Folder name="base44" defaultOpen>
      <Tree.File name=".app.jsonc" />

      <Tree.File name="config.jsonc" />

      <Tree.Folder name="entities" defaultOpen>
        <Tree.File name="task.jsonc" />
      </Tree.Folder>
    </Tree.Folder>

    <Tree.Folder name="src" defaultOpen>
      <Tree.Folder name="api">
        <Tree.File name="base44Client.js" />
      </Tree.Folder>

      <Tree.Folder name="components">
        <Tree.Folder name="ui" />

        <Tree.File name="Base44Logo.jsx" />
      </Tree.Folder>

      <Tree.File name="App.jsx" />

      <Tree.File name="main.jsx" />

      <Tree.File name="index.css" />
    </Tree.Folder>

    <Tree.File name=".gitignore" />

    <Tree.File name=".nvmrc" />

    <Tree.File name="components.json" />

    <Tree.File name="index.html" />

    <Tree.File name="jsconfig.json" />

    <Tree.File name="package.json" />

    <Tree.File name="postcss.config.js" />

    <Tree.File name="README.md" />

    <Tree.File name="tailwind.config.js" />

    <Tree.File name="vite.config.js" />
  </Tree.Folder>
</Tree>

このプロジェクト内のファイルの詳細については、[プロジェクト構造](/developers/backend/overview/project-structure)を参照してください。

このプロジェクトには、プロジェクト作成中に Base44 にプッシュされた `base44/entities/task.jsonc` 内の例の `Task` [エンティティ](/developers/references/entities/introduction)が含まれています。このエンティティを変更したり、追加のエンティティを作成したりできます。

## 次のステップ

これでプロジェクトに Base44 バックエンドが統合されたので、次のことができます:

* [SDK](/developers/references/sdk/getting-started/overview) を使用してフロントエンドにより多くの機能を追加します。
* [エンティティ](/developers/backend/resources/entities/overview)、[バックエンド関数](/developers/backend/resources/functions)、[エージェント](/developers/backend/resources/agents-config)を追加します。TypeScript で作業している場合は、オートコンプリートと型安全性を得るために[型を生成](/developers/references/sdk/getting-started/dynamic-types)してください。
* バックエンドの [`base44 dev`](/developers/references/cli/commands/dev) とフロントエンドの `npm run dev` を実行してローカルでテストします。セットアップ手順については、[ローカル開発](/developers/backend/overview/local-dev/local-development-overview)を参照してください。
* [`base44 deploy`](/developers/references/cli/commands/deploy) で更新をデプロイします。
* [`base44 site open`](/developers/references/cli/commands/site-open) でデプロイされたサイトを開きます。

プロジェクトには、AI コーディングアシスタントに Base44 での作業方法を教える [Base44 skills](/developers/backend/overview/base44-skills) が含まれています。Cursor、Claude Code、またはお好みの AI アシスタントでプロジェクトを開いて、構築したいものを記述できます。

## 関連項目

* [CLI Command Reference](/developers/references/cli/commands/introduction): 利用可能なすべての CLI コマンド
* [Project Structure](/developers/backend/overview/project-structure): プロジェクトリソースの構成方法
* [Entities](/developers/references/entities/introduction): データベーススキーマ構成について学ぶ
* [Example apps](https://github.com/base44/apps-examples): 学ぶためのサンプルプロジェクト

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