yggjs_react使用教程 v0.1.1

yggjs_react是一个用于快速创建React项目的工具，它集成了Vite、TypeScript、Zustand和React Router等现代前端技术栈，帮助开发者快速搭建高质量的React应用。

快速入门

快速入门部分将指导您如何安装yggjs_react工具、创建新项目并启动开发服务器。

安装

首先，确保您的系统已安装Node.js。然后使用npm全局安装pnpm和yggjs_react：

bash 复制代码

npm install -g pnpm
npm install -g yggjs_react

查看版本

安装完成后，可以使用以下命令查看yggjs_react的版本：

bash 复制代码

ggr --version

创建项目

使用以下命令创建一个新的React项目：

bash 复制代码

ggr create hello

这将创建一个名为"hello"的新项目目录。

启动服务

进入项目目录并安装依赖，然后启动开发服务器：

bash 复制代码

cd hello
pnpm install --registry=https://registry.npmmirror.com
pnpm dev

这将启动开发服务器，默认在 http://localhost:5173/ 上运行。

完整代码

本节详细展示了项目中各个核心文件的代码实现。

package.json

项目的配置文件，定义了项目的基本信息、脚本命令和依赖项：

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编译器配置文件，定义了编译选项和项目包含的文件：

json 复制代码

{
  "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配置文件：

json 复制代码

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "vite.config.ts"
  ]
}

vite.config.ts

Vite构建工具的配置文件：

ts 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

index.html

项目的入口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配置文件，用于设置包管理器的行为：

bash 复制代码

# 使用国内镜像源加速包下载
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

应用的入口文件，负责渲染根组件：

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

全局样式文件，定义了应用的基本样式：

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

应用的根组件，组合了布局和路由：

tsx 复制代码

import { Layout } from './components'
import AppRoutes from './routers'
import './App.css'

function App() {
  return (
    <Layout>
      <AppRoutes />
    </Layout>
  )
}

export default App

src/App.css

应用根组件的样式：

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

应用的路由配置文件：

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创建的状态管理文件：

ts 复制代码

import { create } from 'zustand'

interface CounterState {
  count: number
  increment: () => void
  decrement: () => 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

应用的布局组件：

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

组件导出文件：

ts 复制代码

// 组件导出
export { default as Layout } from './Layout'

src/pages/index.ts

页面组件导出文件：

ts 复制代码

// 页面组件导出
export { default as Home } from './Home'
export { default as About } from './About'

src/pages/Home.tsx

首页组件，展示了计数器功能：

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

关于页面组件：

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

启动服务

在项目根目录下执行以下命令安装依赖并启动开发服务器：

bash 复制代码

pnpm i
pnpm dev

浏览器访问

服务启动后，可以在浏览器中访问以下地址：

主页: http://localhost:5173/
关于页面: http://localhost:5173/about