yggjs_react是一個用于快速創建React項目的工具，它集成了Vite、TypeScript、Zustand和React Router等現代前端技術棧，幫助開發者快速搭建高質量的React應用。
快速入門
快速入門部分將指導您如何安裝yggjs_react工具、創建新項目并啟動開發服務器。
安裝
首先，確保您的系統已安裝Node.js。然后使用npm全局安裝pnpm和yggjs_react：
npm install -g pnpm
npm install -g yggjs_react
查看版本
安裝完成后，可以使用以下命令查看yggjs_react的版本：
ggr --version
創建項目
使用以下命令創建一個新的React項目：
ggr create hello
這將創建一個名為"hello"的新項目目錄。
啟動服務
進入項目目錄并安裝依賴，然后啟動開發服務器：
cd hello
pnpm install --registry=https://registry.npmmirror.com
pnpm dev
這將啟動開發服務器，默認在 http://localhost:5173/ 上運行。
完整代碼
本節詳細展示了項目中各個核心文件的代碼實現。
package.json
項目的配置文件，定義了項目的基本信息、腳本命令和依賴項：
{"name": "hello","private": true,"version": "0.0.0","type": "module","packageManager": "pnpm@8.15.0","scripts": {"dev": "vite","build": "tsc && vite build","lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview": "vite preview"},"dependencies": {"react": "^18.3.1","react-dom": "^18.3.1","react-router-dom": "^6.28.0","zustand": "^5.0.1"},"devDependencies": {"@types/react": "^18.3.23","@types/react-dom": "^18.3.7","@typescript-eslint/eslint-plugin": "^6.21.0","@typescript-eslint/parser": "^6.21.0","@vitejs/plugin-react": "^4.3.4","eslint": "^8.57.1","eslint-plugin-react-hooks": "^4.6.2","eslint-plugin-react-refresh": "^0.4.14","typescript": "^5.9.2","vite": "^4.5.14"},"pnpm": {"registry": "https://registry.npmmirror.com"}
}
tsconfig.json
TypeScript編譯器配置文件，定義了編譯選項和項目包含的文件：
{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020","DOM","DOM.Iterable"],"module": "ESNext","skipLibCheck": true,"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src"],"references": [{"path": "./tsconfig.node.json"}]
}
tsconfig.node.json
Node.js環境的TypeScript配置文件：
{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true},"include": ["vite.config.ts"]
}
vite.config.ts
Vite構建工具的配置文件：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'// https://vitejs.dev/config/
export default defineConfig({plugins: [react()],
})
index.html
項目的入口HTML文件：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + React + TS</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body>
</html>
.npmrc
npm配置文件，用于設置包管理器的行為：
# 使用國內鏡像源加速包下載
registry=https://registry.npmmirror.com# React 相關包的鏡像源
@types:registry=https://registry.npmmirror.com
@typescript-eslint:registry=https://registry.npmmirror.com
@vitejs:registry=https://registry.npmmirror.com# 禁用包鎖定文件的自動更新
package-lock=false# 設置緩存目錄
cache-dir=.pnpm-cache# 啟用嚴格的 peer dependencies 檢查
strict-peer-dependencies=false# 設置網絡超時時間
network-timeout=60000# 啟用進度條
progress=true# 禁用工作區模式，強制在當前目錄安裝依賴
ignore-workspace=true
src/main.tsx
應用的入口文件，負責渲染根組件：
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.tsx'
import './index.css'ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>,
)
src/index.css
全局樣式文件，定義了應用的基本樣式：
:root {font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;line-height: 1.5;font-weight: 400;color-scheme: light dark;color: rgba(255, 255, 255, 0.87);background-color: #242424;font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust: 100%;
}a {font-weight: 500;color: #646cff;text-decoration: inherit;
}
a:hover {color: #535bf2;
}body {margin: 0;display: flex;place-items: center;min-width: 320px;min-height: 100vh;
}h1 {font-size: 3.2em;line-height: 1.1;
}button {border-radius: 8px;border: 1px solid transparent;padding: 0.6em 1.2em;font-size: 1em;font-weight: 500;font-family: inherit;background-color: #1a1a1a;color: white;cursor: pointer;transition: border-color 0.25s;
}
button:hover {border-color: #646cff;
}
button:focus,
button:focus-visible {outline: 4px auto -webkit-focus-ring-color;
}@media (prefers-color-scheme: light) {:root {color: #213547;background-color: #ffffff;}a:hover {color: #747bff;}button {background-color: #f9f9f9;color: #213547;}
}
src/App.tsx
應用的根組件，組合了布局和路由：
import { Layout } from './components'
import AppRoutes from './routers'
import './App.css'function App() {return (<Layout><AppRoutes /></Layout>)
}export default App
src/App.css
應用根組件的樣式：
#root {max-width: 1280px;margin: 0 auto;padding: 2rem;text-align: center;
}nav {margin-bottom: 2rem;
}nav a {margin: 0 1rem;padding: 0.5rem 1rem;border-radius: 4px;text-decoration: none;
}nav a:hover {background-color: #f0f0f0;
}.card {padding: 2em;
}.card button {margin: 0 0.5rem;
}.card span {margin: 0 1rem;font-size: 1.2em;font-weight: bold;
}
src/routers/index.tsx
應用的路由配置文件：
import { Routes, Route } from 'react-router-dom'
import { Home, About } from '../pages'function AppRoutes() {return (<Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes>)
}export default AppRoutes
src/store/counter.ts
使用Zustand創建的狀態管理文件：
import { create } from 'zustand'interface CounterState {count: numberincrement: () => voiddecrement: () => void
}export const useCounterStore = create<CounterState>((set) => ({count: 0,increment: () => set((state) => ({ count: state.count + 1 })),decrement: () => set((state) => ({ count: state.count - 1 })),
}))
src/components/Layout.tsx
應用的布局組件：
import { Link } from 'react-router-dom'
import { ReactNode } from 'react'interface LayoutProps {children: ReactNode
}function Layout({ children }: LayoutProps) {return (<div className="App"><nav><Link to="/">Home</Link><Link to="/about">About</Link></nav><main>{children}</main></div>)
}export default Layout
src/components/index.ts
組件導出文件：
// 組件導出
export { default as Layout } from './Layout'
src/pages/index.ts
頁面組件導出文件：
// 頁面組件導出
export { default as Home } from './Home'
export { default as About } from './About'
src/pages/Home.tsx
首頁組件，展示了計數器功能：
import { useCounterStore } from '../store/counter'function Home() {const { count, increment, decrement } = useCounterStore()return (<div><h1>Home Page</h1><div className="card"><button onClick={decrement}>-</button><span>count is {count}</span><button onClick={increment}>+</button></div></div>)
}export default Home
src/pages/About.tsx
關于頁面組件：
function About() {return (<div><h1>About Page</h1><p>This is a basic React template with Vite, TypeScript, Zustand, and React Router.</p></div>)
}export default About
啟動服務
在項目根目錄下執行以下命令安裝依賴并啟動開發服務器：
pnpm i
pnpm dev
瀏覽器訪問
服務啟動后，可以在瀏覽器中訪問以下地址：
- 主頁: http://localhost:5173/
- 關于頁面: http://localhost:5173/about
)
適配CmBacktrace錯誤追蹤)
