react-server675fbba4
react-serverfilesdocssrcpagesja(pages)guidequick-start.mdx
docs/src/pages/ja/(pages)/guide/quick-start.mdxmdx3.3 KiBb543c188

title: クイックスタート order: 0 contents: false

import { Tabs, Tab } from "../../../../components/Tabs.jsx"; import Pnpm from "../../../../components/pnpm.jsx"; import Deno from "../../../../components/Deno.jsx";

クイックスタート

@lazarv/react-server ドキュメントへようこそ! このランタイムを使い始めるには、React Server Componentをデフォルトとしてエクスポートしたファイルを作成し、作成したファイル上でnpxを使って@lazarv/react-serverコマンドを実行するだけです。サーバーサイドレンダリングされたReactアプリケーションを始めるのに、必要なものは他にはありません!簡単でしょ?

export default function App() {
  return <h1>Hello, World!</h1>;
}
<Tabs name="runtime">

<Tab title={<><Pnpm className="w-4 max-h-4" />pnpm</>}>

pnpx @lazarv/react-server ./App.jsx
</Tab>

<Tab title={<><img src="/npm.svg" alt="npm" className="w-4" />npm</>}>

npx @lazarv/react-server ./App.jsx
</Tab>

<Tab title={<><img src="/yarn.svg" alt="yarn" className="w-4" />Yarn</>}>

yarn dlx @lazarv/react-server ./App.jsx
</Tab>

<Tab title={<><img src="/bun.svg" alt="bun" className="w-4" />Bun</>}>

bunx --bun @lazarv/react-server ./App.jsx
</Tab>

<Tab title={<><Deno className="w-4 max-h-4" />Deno</>}>

deno run -A npm:@lazarv/react-server ./App.jsx
</Tab></Tabs>

ガイドチュートリアルのセクションを調べたり、機能ファイルシステムベースのルーターデプロイする方法について学んだりして、旅を続けてください。ご質問やヘルプが必要な場合は、GitHubのissueにお願いします。喜んでお手伝いさせていただきます!

@lazarv/react-serverプロジェクトを起動するには、簡単に初期セットアップができるCLIツール、@lazarv/create-react-serverを使うこともできます。ツールを使うには、以下を実行してください :

<Tabs name="create">

<Tab title={<><Pnpm className="w-4 max-h-4" />pnpm</>}>

pnpx @lazarv/create-react-server
</Tab>

<Tab title={<><img src="/npm.svg" alt="npm" className="w-4" />npm</>}>

npx @lazarv/create-react-server
</Tab>

<Tab title={<><img src="/yarn.svg" alt="yarn" className="w-4" />Yarn</>}>

yarn dlx @lazarv/create-react-server
</Tab>

<Tab title={<><img src="/bun.svg" alt="bun" className="w-4" />Bun</>}>

bunx --bun @lazarv/create-react-server
</Tab>

<Tab title={<><Deno className="w-4 max-h-4" />Deno</>}>

deno run -A npm:@lazarv/create-react-server
</Tab></Tabs>

ウィザードの設定が完了したら、ターミナルに表示される手順に沿って、新しいプロジェクトを試してみましょう!

近日公開予定: サードパーティ製の UIライブラリ、データベース、状態管理、認証機能などは、@lazarv/create-react-server で作成したプロジェクトにスムーズに導入できます。今後のアップデートをお楽しみに!

次の章では、@lazarv/react-serverを使ってゼロから始める方法を説明します。