最初のアプリケーション
@lazarv/react-serverを使用した最初のアプリケーションへようこそ！このチュートリアルでは"Hello World!"を表示するだけのシンプルなアプリケーションを作ります。
始める前に以下がインストールされている必要があります:
このチュートリアルではpnpmを使用します。
新しいアプリケーションを初期化して作成するために、ターミナルで次のコマンドを実行します:
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の依存関係としてすでに含まれているからです。
次にApp.jsxを作成します:
./App.jsxexport default function App() {
return <h1>Hello, World!</h1>;
}
ここでは"Hello World!"をh1要素としてレンダリングするReact Server Componentをエクスポートしています。
開発サーバーを起動するには、次のコマンドを実行します:
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スクリプトを追加しておくと便利です:
./package.json{
"scripts": {
"dev": "react-server ./App.jsx"
}
}
以下のコマンドで開発サーバーを起動できるようになりました:
pnpm dev
アプリケーションをビルドするには、以下のコマンドを実行します:
pnpm react-server build ./App.jsx
このコマンドは.react-serverディレクトリにアプリケーションの本番ビルドを生成します。このビルドは任意のNode.jsホスティングプロバイダを使用してサーバーにデプロイするか、独自のサーバーでホストすることができます。
buildスクリプトもpackage.jsonファイルに追加することができます:
./package.json{
"scripts": {
"dev": "react-server ./App.jsx",
"build": "react-server build ./App.jsx"
}
}
本番環境のサーバーを立ち上げるには、以下のコマンドを実行します:
pnpm react-server start
このコマンドは本番サーバーを起動し、ビルドされた@lazarv/react-serverアプリケーションを提供します。ブラウザで http://localhost:3000 を開くと、"Hello, World!"というメッセージが表示されます。
ビルド出力は既にアプリケーションを提供するように構成されているため、サーバーのエントリーファイルを指定する必要はありません。
startスクリプトもpackage.jsonファイルに追加します:
./package.json{
"scripts": {
"dev": "react-server ./App.jsx",
"build": "react-server build ./App.jsx",
"start": "react-server start"
}
}
小さなプロジェクトで@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
おめでとうございます！@lazarv/react-serverを使用した最初のアプリケーションを作成することができました。これでReact Server Componentsやclient components、そしてserver functionsを使用してより複雑なアプリケーションを構築できるようになります。