目前形成了一个可以使用的全量渲染组件树的示例代码。

2024-12-13 16:18:45 +08:00
commit 42cba4f19e
20 changed files with 1427 additions and 0 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,26 @@
+/// Bootstrap scripts
+import { StrictMode } from 'react';
+import { Route, Routes, StaticRouter } from 'react-router-dom';
+import { MainLayout } from './pages/MainLayout';
+
+export const App = () => {
+  return (
+    <StrictMode>
+      <html lang="zh-CN">
+        <head>
+          <meta charSet="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          <title>React SSR App</title>
+          <link rel="stylesheet" href="/src/index.css" />
+        </head>
+        <body>
+          <StaticRouter>
+            <Routes>
+              <Route path="/" element={<MainLayout />} />
+            </Routes>
+          </StaticRouter>
+        </body>
+      </html>
+    </StrictMode>
+  );
+};
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,27 @@
+@layer lib, base, theme, component, page, custom;
+
+@import 'sanitize.css' layer(lib);
+
+@layer base {
+  :root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+    font-size: 62.5%;
+
+    color-scheme: light dark;
+    color: hsla(0, 0%, 100%, 0.87);
+    background-color: hsl(0, 0%, 14%);
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,8 @@
+// Boot styles
+// import './index.css';
+
+// Boot scripts
+import { hydrateRoot } from 'react-dom/client';
+import { App } from './App';
+
+hydrateRoot(document, <App />);
--- a/src/pages/MainLayout.tsx
+++ b/src/pages/MainLayout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import styles from './MainLayout.module.css';
+
+export const MainLayout = () => {
+  return (
+    <div className={styles.main_layout}>
+      <div className={styles.navigation_column}>
+        <h1>React SSR</h1>
+      </div>
+      <div className={styles.content}>
+        <Outlet />
+      </div>
+    </div>
+  );
+};
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />