# サーバ関数を使う
このチュートリアルの目標は、クライアント側のJavaScriptとReactハイドレーションを一切使用しないことです。React Server Componentsとサーバ関数のみを使用します。これは可能でしょうか？もちろん可能です！
## セットアップ
新しいフォルダを作成してpnpmを初期化し、必要な依存関係をすべてインストールして、新しいプロジェクトを作成しましょう。
```bash
mkdir todo
cd todo
pnpm init
pnpm add @lazarv/react-server better-sqlite3 zod
pnpm add -D @types/better-sqlite3 @types/react @types/react-dom autoprefixer postcss tailwindcss@3 typescript
pnpx tailwindcss@3 init -p
```
Todo項目を保存するには、ローカルのSqliteデータベースを使用します。検証にはZodを使用し、スタイル設定にはTailwind CSSを使用します。すべてのソースコードをTailwindコンテンツとして含めるには、**tailwind.config.js**を次のように変更します:
```jsx filename="./tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.tsx"],
theme: {
extend: {},
},
plugins: [],
};
```
今回は特別凝ったTailwindでのスタイリングは行わないので、通常の3行のTailwind設定を**src/index.css**に配置します:
```css filename="./src/index.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## Hello World!
さて、何よりも良いのは古典的な"Hello World!"アプリです。Todoアプリのエントリーポイントを作成しましょう！以下のコードを**src/index.tsx**に入れてください:
```jsx filename="./src/index.tsx"
export default function Index() {
return (
Hello World!
);
}
```
このマイクロアプリを実行するには、`pnpm react-server ./src/index.tsx`を使用するだけです。作業を簡単にするために、**package.json**にnpmスクリプトをいくつか追加しましょう:
```jsx filename="./package.json"
"scripts": {
"dev": "react-server ./src/index.tsx",
"build": "react-server build ./src/index.tsx",
"start": "react-server start"
},
```
`pnpm dev`を使用して開発サーバを起動します。開発サーバが起動したら、[http://localhost:3000](http://localhost:3000)を開いて、Hello World!アプリを起動してください。`pnpm dev --open`を使用しても実行できます。
## レイアウト
Todoアプリにはレイアウトが必要なので、**src/Layout.tsx**を作成しましょう:
```jsx filename="./src/Layout.tsx"
export default function Layout({ children }: React.PropsWithChildren) {
return (
Todo
);
}
```
特別なことは何もなく、通常のHTMLドキュメントテンプレートです。このレイアウトコンポーネントをアプリのラッパーとして使用します。
## ページ
メインページはTodoアプリです。ここで、すべての構成要素を使用してアプリを作成します。Hello World!に別れを告げて、コンポーネントを次のように変更します:
```jsx filename="./src/index.tsx"
import "./index.css";
import { allTodos } from "./actions";
import AddTodo from "./AddTodo";
import Item from "./Item";
import Layout from "./Layout";
export default function Index() {
const todos = allTodos();
return (
{todos.length === 0 && No todos yet!
}
{todos.map((todo) => (