# はじめよう 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](https://nodejs.org/ja) v20.10.0 以降 - [pnpm](https://pnpm.io/ja) JavaScriptランタイムとしてBunを使用する場合は、他に何も必要ありません。Bunを使用するだけです。 - [Bun](https://bun.sh) v1.2.9 以降 JavaScriptランタイムとしてDenoを使用する場合： - [Deno](https://deno.com) v2.0 以降 ## インストール `@lazarv/react-server`をプロジェクトに追加するだけでインストールすることができます。マイクロアプリケーションを始めるのに、他に必要なものはありません。 ```sh pnpm add @lazarv/react-server ``` ```sh npm install @lazarv/react-server ``` ```sh yarn add @lazarv/react-server ``` ```sh bun add @lazarv/react-server ``` ```sh deno run -A npm:@lazarv/react-server ``` ## 初めてのアプリケーション `App.jsx`を作成してください。React Server Componentをエクスポートするとアプリケーションを立ち上げることが出来ます。 ```jsx export default function App() { return

Hello World

; } ``` ## ディベロップメントモード アプリケーションのエントリーファイルのパスを`react-server` CLIに渡すことでアプリケーションをディベロップメントモードで動かすことが出来ます。`--open` オプションを使うとデフォルトブラウザで http://localhost:3000 にアクセスしてくれます。 ```sh pnpm react-server ./App.jsx ``` ```sh npx react-server ./App.jsx ``` ```sh yarn react-server ./App.jsx ``` ```sh bun --bun react-server ./App.jsx ``` ```sh deno run -A npm:@lazarv/react-server ./App.jsx ``` > **Note:** もし デフォルトブラウザでアプリケーションにアクセスしたい場合は、`--open` オプションを使うことができます。 ## プロダクションビルド アプリケーションの開発が終われば、プロダクションモードでビルドすることも出来ます。プロダクションビルドをすると `.react-server` ディレクトリの中にプロダクションモードでの実行に必要なファイルを作成します。BunまたはDenoを使用する場合、対応するアダプタが自動的に検出・使用され、`.bun/` または `.deno/` に自己完結型のエッジバンドルを生成します。`--adapter ` で自動検出を上書きするか、`--no-adapter` で無効にできます。 ```sh pnpm react-server build ./App.jsx ``` ```sh npx react-server build ./App.jsx ``` ```sh yarn react-server build ./App.jsx ``` ```sh bun --bun react-server build ./App.jsx ``` ```sh deno run -A npm:@lazarv/react-server build ./App.jsx ``` ## プロダクションモード プロダクションモードでアプリケーションを実行するには`start`コマンドを実行してください。BunまたはDenoを使用する場合、startコマンドはアダプタが生成したエントリーポイントを直接実行します。 ```sh pnpm react-server start ``` ```sh npx react-server start ``` ```sh yarn react-server start ``` ```sh bun --bun react-server start ``` ```sh deno run -A npm:@lazarv/react-server start ``` > **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-server`CLIを実行することが出来ます。Denoを使っている場合、`deno run -A npm:@lazarv/react-server ./App.jsx`を実行すればディベロップメントサーバーを起動できます。 ## 次のステップ おめでとうございます！`@lazarv/react-server`を使って初めてのアプリケーションを作成しました。 より深く学ぶためのおすすめトピックをいくつかご紹介します。これらのトピックは、好きな順番で読むことができます。また、今はこのガイドを離れてアプリの開発を始めることもできますし、問題に遭遇したり質問があるときに戻ってくることもできます。 > 質問や助けが必要な場合は[GitHub Discussions](https://github.com/lazarv/react-server/discussions)に参加できます。 #### 統合 ##### 他のライブラリとの統合方法 他のライブラリとの統合方法や、ランタイムがVite、TypeScript、Tailwind CSSなどのツールとどのように連携するかを学びましょう。 さらに詳しく #### 機能 ##### 高度な機能 HTTPリクエストとレスポンスオブジェクトへのアクセス方法、キャッシュの使用方法、マイクロフロントエンドアプリケーションの構築方法など、`@lazarv/react-server`の高度な機能について学びましょう。 さらに詳しく #### ルーター ##### ファイルシステムベースのルーター ファイルシステムベースのルーターを使用して、ネストされたルート、動的ルートなどを含む本格的なアプリケーションを作成する方法を学びましょう。 さらに詳しく また、以下のチュートリアルを読むことで、ランタイムについてより深く学ぶことができます。これらはreact-serverに初めて触れる人にとって必須ではありませんが、いくつかの概念や機能を理解するのに役立ちます。 #### Hello World! ##### 初めてのアプリケーション わずか数ステップでサーバーサイドレンダリングを備えた新しいReactアプリケーションを作成します。React Server Componentsを使用してアプリの構築を開始し、初期ページの読み込みを高速化しましょう。 チュートリアルを読む #### Todoアプリケーション ##### サーバー関数を使う サーバー関数を使用してシンプルなTodoアプリケーションを構築します。サーバーコンポーネントを用いて、サーバー側の操作を効率的に管理する方法を学びましょう。 チュートリアルを読む #### フォトギャラリーアプリケーション ##### クライアントコンポーネントの使用 クライアントコンポーネントを使用して、アプリケーション内にインタラクティブな要素を作成する方法を学びましょう。クライアントサイドレンダリングと動的なコンテンツ更新によって、ユーザーエクスペリエンスを向上させます。 チュートリアルを読む