はじめよう

React Server Componentsを使い始めるのに、@lazarv/react-serverほど簡単なものはありません。node.js と同じように react-server CLI を使うことができます。Server Component をエクスポートしたファイルがあれば、react-server をつかって実行することができます。ひとつのファイルを使ってマイクロアプリケーションを作ることもできますし、ファイルシステムベースのルーターを使用して本格的で複雑なアプリケーションを作成することもできます。

@lazarv/react-serverはnode.jsとパッケージ・マネージャーさえあれば始めることができます。最新のnode.jsランタイムとpnpmをパッケージ・マネージャーとして推奨しますが、どのパッケージ・マネージャーを使っても構いません。

• Node.js v20.10.0 以降
• pnpm

JavaScriptランタイムとしてBunを使用する場合は、他に何も必要ありません。Bunを使用するだけです。

• Bun v1.1.45 以降

Note: Denoはまだサポートされていません。後日アップデートを確認してください。

@lazarv/react-serverをプロジェクトに追加するだけでインストールすることができます。マイクロアプリケーションを始めるのに、他に必要なものはありません。

pnpm

npm

Yarn

Bun

Deno

pnpm add @lazarv/react-server

npm install @lazarv/react-server

yarn add @lazarv/react-server

bun add @lazarv/react-server

Note: Denoはまだサポートされていません。後日アップデートを確認してください。

App.jsxを作成してください。React Server Componentをエクスポートするとアプリケーションを立ち上げることが出来ます。

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

アプリケーションのエントリーファイルのパスをreact-server CLIに渡すことでアプリケーションをディベロップメントモードで動かすことが出来ます。--open オプションを使うとデフォルトブラウザで http://localhost:3000 にアクセスしてくれます。

pnpm

npm

Yarn

Bun

Deno

pnpm react-server ./App.jsx

npx react-server ./App.jsx

yarn react-server ./App.jsx

bun --bun react-server ./App.jsx

Note: Denoはまだサポートされていません。後日アップデートを確認してください。

Note: もし デフォルトブラウザでアプリケーションにアクセスしたい場合は、--open オプションを使うことができます。

アプリケーションの開発が終われば、プロダクションモードでビルドすることも出来ます。プロダクションビルドをすると .react-server ディレクトリの中にプロダクションモードでの実行に必要なファイルを作成します。

pnpm

npm

Yarn

Bun

Deno

pnpm react-server build ./App.jsx

npx react-server build ./App.jsx

yarn react-server build ./App.jsx

bun --bun react-server build ./App.jsx

Note: Denoはまだサポートされていません。後日アップデートを確認してください。

プロダクションモードでアプリケーションを実行するにはstartコマンドを実行してください。

pnpm

npm

Yarn

Bun

Deno

pnpm react-server start

npx react-server start

yarn react-server start

bun --bun react-server start

Note: Denoはまだサポートされていません。後日アップデートを確認してください。

Note: @lazarv/react-serverをインストールせず高速にアプリを実行したい場合、npxを使ってreact-server CLIを実行することができます。JavaScriptを使用する場合、このようにすれば他のものをインストールする必要はありません。アプリの実行にはReact Server Componentをエクスポートした.jsxファイルがあれば十分です。npx @lazarv/react-server ./App.jsx を実行すればディベロップメントモードでアプリケーションを立ち上げることが出来ます。Bunを使っている場合、bunx --bun @lazarv/react-serverを実行すればreact-serverCLIを実行することが出来ます。

おめでとうございます！@lazarv/react-serverを使って初めてのアプリケーションを作成しました。

より深く学ぶためのおすすめトピックをいくつかご紹介します。これらのトピックは、好きな順番で読むことができます。また、今はこのガイドを離れてアプリの開発を始めることもできますし、問題に遭遇したり質問があるときに戻ってくることもできます。

質問や助けが必要な場合はGitHub Discussionsに参加できます。

また、以下のチュートリアルを読むことで、フレームワークについてより深く学ぶことができます。これらはreact-serverに初めて触れる人にとって必須ではありませんが、いくつかの概念や機能を理解するのに役立ちます。