From 849f9c01543e878613233dee6578b87f68aa665b Mon Sep 17 00:00:00 2001
From: RTrace <aretrace@hotmail.com>
Date: Fri, 26 Jul 2024 21:15:31 -0700
Subject: [PATCH] docs: complete react rendering configuration (#207)

---
 README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/README.md b/README.md
index bc089b7..9c9c48d 100644
--- a/README.md
+++ b/README.md
@@ -488,6 +488,54 @@ createClient({
 })
 ```
 
+Configure react in `vite.config.ts`.
+
+```ts
+// vite.config.ts
+import pages from '@hono/vite-cloudflare-pages'
+import honox from 'honox/vite'
+import { defineConfig } from 'vite'
+
+export default defineConfig(({ mode }) => {
+  if (mode === 'client') {
+    return {
+      build: {
+        rollupOptions: {
+          input: ['./app/client.ts'],
+          output: {
+            entryFileNames: 'static/client.js',
+            chunkFileNames: 'static/assets/[name]-[hash].js',
+            assetFileNames: 'static/assets/[name].[ext]'
+          }
+        },
+        emptyOutDir: false
+      }
+    }
+  } else {
+    return {
+      ssr: {
+        external: ['react', 'react-dom']
+      },
+      plugins: [honox(), pages()]
+    }
+  }
+})
+```
+
+Adjust `tsconfig.json` jsx factory function option.
+
+```ts
+// tsconfig.json
+{
+  "compilerOptions": {
+    ...
+    "jsxImportSource": "react"
+    ...
+  }
+}
+
+```
+
 ## Guides
 
 ### Nested Layouts