海西高端网站建设价格,免费注册营业执照,怀柔成都网站建设,中企动力做销售有前景吗yggjs_react是一个用于快速创建React项目的工具#xff0c;它集成了Vite、TypeScript、Zustand和React Router等现代前端技术栈#xff0c;帮助开发者快速搭建高质量的React应用。
快速入门
快速入门部分将指导您如何安装yggjs_react工具、创建新项目并启动开发服务器。
安…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 --registryhttps://registry.npmmirror.com
pnpm dev这将启动开发服务器默认在 http://localhost:5173/ 上运行。
完整代码
本节详细展示了项目中各个核心文件的代码实现。
package.json
项目的配置文件定义了项目的基本信息、脚本命令和依赖项
{name: hello,private: true,version: 0.0.0,type: module,packageManager: pnpm8.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 langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite React TS/title/headbodydiv idroot/divscript typemodule src/src/main.tsx/script/body
/html.npmrc
npm配置文件用于设置包管理器的行为
# 使用国内镜像源加速包下载
registryhttps://registry.npmmirror.com# React 相关包的镜像源
types:registryhttps://registry.npmmirror.com
typescript-eslint:registryhttps://registry.npmmirror.com
vitejs:registryhttps://registry.npmmirror.com# 禁用包锁定文件的自动更新
package-lockfalse# 设置缓存目录
cache-dir.pnpm-cache# 启用严格的 peer dependencies 检查
strict-peer-dependenciesfalse# 设置网络超时时间
network-timeout60000# 启用进度条
progresstrue# 禁用工作区模式强制在当前目录安装依赖
ignore-workspacetruesrc/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.cssReactDOM.createRoot(document.getElementById(root)!).render(React.StrictModeBrowserRouterApp //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.cssfunction App() {return (LayoutAppRoutes //Layout)
}export default Appsrc/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 ../pagesfunction AppRoutes() {return (RoutesRoute path/ element{Home /} /Route path/about element{About /} //Routes)
}export default AppRoutessrc/store/counter.ts
使用Zustand创建的状态管理文件
import { create } from zustandinterface CounterState {count: numberincrement: () voiddecrement: () void
}export const useCounterStore createCounterState((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 reactinterface LayoutProps {children: ReactNode
}function Layout({ children }: LayoutProps) {return (div classNameAppnavLink to/Home/LinkLink to/aboutAbout/Link/navmain{children}/main/div)
}export default Layoutsrc/components/index.ts
组件导出文件
// 组件导出
export { default as Layout } from ./Layoutsrc/pages/index.ts
页面组件导出文件
// 页面组件导出
export { default as Home } from ./Home
export { default as About } from ./Aboutsrc/pages/Home.tsx
首页组件展示了计数器功能
import { useCounterStore } from ../store/counterfunction Home() {const { count, increment, decrement } useCounterStore()return (divh1Home Page/h1div classNamecardbutton onClick{decrement}-/buttonspancount is {count}/spanbutton onClick{increment}/button/div/div)
}export default Homesrc/pages/About.tsx
关于页面组件
function About() {return (divh1About Page/h1pThis 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
