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を使うこともできます。ツールを使うには、以下を実行してください :
<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を使ってゼロから始める方法を説明します。