new examples

node/react/src/App.tsx

@@ -0,0 +1,20 @@
+import { Routes, Route, Link } from 'react-router-dom'
+import Home from './pages/Home'
+import About from './pages/About'
+
+function App() {
+  return (
+    <div id="app">
+      <nav style={{ padding: '20px' }}>
+        <Link to="/" style={{ marginRight: '10px' }}>Home</Link>
+        <Link to="/about">About</Link>
+      </nav>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </div>
+  )
+}
+
+export default App

node/react/src/index.css

@@ -0,0 +1,39 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: #213547;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+h1 {
+  font-size: 2.5em;
+  line-height: 1.1;
+}

node/react/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>,
+)

node/react/src/pages/About.tsx

@@ -0,0 +1,15 @@
+import { Link } from 'react-router-dom'
+
+function About() {
+  return (
+    <div>
+      <h1>About</h1>
+      <p>This is a simple React example with React Router.</p>
+      <p>
+        <Link to="/">Go to Home</Link>
+      </p>
+    </div>
+  )
+}
+
+export default About

node/react/src/pages/Home.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+// Build-time public var (baked into bundle)
+const buildPublicVar = import.meta.env.VITE_BUILD_PUBLIC_VAR || 'default-value'
+
+function Home() {
+  useEffect(() => {
+    console.log('=== Build-time Variables ===')
+    console.log('VITE_BUILD_PUBLIC_VAR:', buildPublicVar)
+  }, [])
+
+  return (
+    <div>
+      <h1>Welcome to React</h1>
+
+      <div style={{ padding: '20px', background: '#f0f0f0', margin: '20px', borderRadius: '8px' }}>
+        <h2>Environment Variable Test</h2>
+
+        <h3>Build-time (baked into bundle)</h3>
+        <p><strong>VITE_BUILD_PUBLIC_VAR:</strong> {buildPublicVar}</p>
+
+        <p style={{ color: '#666', fontSize: '14px' }}>
+          Note: Static sites only support build-time env vars (no server at runtime)
+        </p>
+      </div>
+
+      <p>
+        <Link to="/about">Go to About</Link>
+      </p>
+    </div>
+  )
+}
+
+export default Home

node/react/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BUILD_PUBLIC_VAR: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}