当前位置：首页 > web >正文

yggjs_react使用教程 v0.1.1

web 2025/8/22 12:09:41

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