---

title: 最初のアプリケーション order: 0 category: Tutorials

import Link from "../../../../components/Link.jsx";

最初のアプリケーション

@lazarv/react-serverを使用した最初のアプリケーションへようこそ！このチュートリアルでは"Hello World!"を表示するだけのシンプルなアプリケーションを作ります。

<Link name="prerequisites"> ## 前提条件 </Link>

始める前に以下がインストールされている必要があります:

• Node.js
• npm, Yarn, or pnpm

このチュートリアルではpnpmを使用します。

<Link name="install"> ## インストール </Link>

新しいアプリケーションを初期化して作成するために、ターミナルで次のコマンドを実行します:

mkdir my-first-application
cd my-first-application
pnpm init
pnpm add @lazarv/react-server

このコマンドでmy-first-applicationという新しいディレクトリを作成し、pnpmプロジェクトを初期化、@lazarv/react-serverパッケージをインストールします。またreactやreact-domを個別にインストールする必要はありません。それらはランタイムが正しく動作するために特定のバージョンを必要とするため、@lazarv/react-serverの依存関係としてすでに含まれているからです。

<Link name="create"> ## React Server Componentを作成する </Link>

次にApp.jsxを作成します:

export default function App() {
  return <h1>Hello, World!</h1>;
}

ここでは"Hello World!"をh1要素としてレンダリングするReact Server Componentをエクスポートしています。

<Link name="development"> ## 開発 </Link>

開発サーバーを起動するには、次のコマンドを実行します:

pnpm react-server ./App.jsx

このコマンドは開発サーバーを起動し、App コンポーネントをレンダリングします。ブラウザで http://localhost:3000 を開くと、"Hello, World!"というメッセージが表示されます。

引数の./App.jsxは、サーバーのエントリーファイルを指定します。これをReact Server Componentファイルへのパスに置き換えることができます。

pnpmを使って@lazarv/react-serverパッケージのreact-serverスクリプトを実行しましたが、package.jsonファイルにdevスクリプトを追加しておくと便利です:

{
  "scripts": {
    "dev": "react-server ./App.jsx"
  }
}

以下のコマンドで開発サーバーを起動できるようになりました:

pnpm dev

<Link name="build"> ## ビルド </Link>

アプリケーションをビルドするには、以下のコマンドを実行します:

pnpm react-server build ./App.jsx

このコマンドは.react-serverディレクトリにアプリケーションの本番ビルドを生成します。このビルドは任意のNode.jsホスティングプロバイダを使用してサーバーにデプロイするか、独自のサーバーでホストすることができます。

buildスクリプトもpackage.jsonファイルに追加することができます:

{
  "scripts": {
    "dev": "react-server ./App.jsx",
    "build": "react-server build ./App.jsx"
  }
}

<Link name="production"> ## 本番環境 </Link>

本番環境のサーバーを立ち上げるには、以下のコマンドを実行します:

pnpm react-server start

このコマンドは本番サーバーを起動し、ビルドされた@lazarv/react-serverアプリケーションを提供します。ブラウザで http://localhost:3000 を開くと、"Hello, World!"というメッセージが表示されます。

ビルド出力は既にアプリケーションを提供するように構成されているため、サーバーのエントリーファイルを指定する必要はありません。

startスクリプトもpackage.jsonファイルに追加します:

{
  "scripts": {
    "dev": "react-server ./App.jsx",
    "build": "react-server build ./App.jsx",
    "start": "react-server start"
  }
}

<Link name="npx"> ## npxを使う </Link>

小さなプロジェクトで@lazarv/react-serverをインストールしたくない場合は、依存関係をインストールしなくてもnpxを使用してアプリケーションを動かすことができます。依存関係はアプリケーションに直接必要なものだけをインストールし、ランタイム自体やReactはインストールしません。以下のコマンドでnpxを使って開発サーバーを起動することができます:

npx @lazarv/react-server ./App.jsx

このモードは迅速なプロトタイピングやアプリケーションを、他のユーザーと共有する場合に便利です。npxを使ってbuildやstartコマンドを実行することもできます:

npx @lazarv/react-server build ./App.jsx
npx @lazarv/react-server start

<Link name="conclusion"> ## まとめ </Link>

おめでとうございます！@lazarv/react-serverを使用した最初のアプリケーションを作成することができました。これでReact Server Componentsやclient components、そしてserver functionsを使用してより複雑なアプリケーションを構築できるようになります。