首页/新闻资讯/正文详情

React:第一个 Vite 应用

发布时间:2026/9/24 13:10:21 来源:云帆数科 栏目:资讯中心
React:第一个 Vite 应用
React第一个 Vite 应用系列React入门指南目标本地跑起第一个 React TypeScript 页面建立「组件 → 虚拟 DOM → 真实 DOM」心智模型。引言别一上来啃全家桶。先把最小闭环跑通脚手架 → 改一行字 → 浏览器立刻变。本篇 demo 在demo/用 Vite 官方react-ts模板改写。心智模型你写的是组件函数返回 UI 描述React 先在内存里做协调虚拟 DOM再尽量少地改浏览器真实 DOM。动手安装与启动完整代码react2/01-hello-react/democdreact2/01-hello-react/demonpminstallnpmrun dev浏览器打开终端里提示的地址一般是http://localhost:5173。代码在干什么src/App.tsx是一个函数组件export default function App() { const name React const year new Date().getFullYear() return ( main classNamepage h1你好{name}/h1 p classNamemeta页面渲染年份{year}/p /main ) }要点JSX看起来像 HTML其实是 JS 表达式{name}插入变量。一个组件返回一棵 UI 树main.tsx里createRoot(...).render(App /)把它挂到#root。改保存后 Vite HMR 会热更新一般不用整页刷新。运行截图常见坑现象排查端口被占用换端口npm run dev -- --port 5174白屏打开浏览器控制台检查main.tsx是否渲染了App中文乱码确认文件 UTF-8 保存下一篇组件与 Props把 UI 拆成可复用积木。

相关推荐

零基础搭建DeepSeek API监控:日志、看板与成本告警
零基础搭建DeepSeek API监控:日志、看板与成本告警

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 13:10:21

华为单板硬件岗机考高频考点与真题解析
华为单板硬件岗机考高频考点与真题解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 13:10:21

TEA2016引脚功能深度解析:从1脚启动供电到LLC调试实战
TEA2016引脚功能深度解析:从1脚启动供电到LLC调试实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 13:10:15

办公AI实战横评:从文档摘要到会议自动化,谁才是真生产力工具?
办公AI实战横评:从文档摘要到会议自动化,谁才是真生产力工具?

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 13:38:04

grammars-v4 仓库 TypeScript 语法详解:基于 ANTLR v4 的实用主义 TypeScript 解析方案
grammars-v4 仓库 TypeScript 语法详解:基于 ANTLR v4 的实用主义 TypeScript 解析方案

编程语言编译器开发工具 【免费下载链接】grammars-v4 Grammars written for ANTLR v4; expectation that the grammars are free of actions. 项目地址: https://gitcode.com/gh_mirrors/gr/grammars-v4 点击查看 免费下载 导读 本文聚焦 grammars-v4 仓库中 jav… · 2026/9/24 13:38:04

探索开放资源的无限可能:Jackett
探索开放资源的无限可能:Jackett

探索开放资源的无限可能:Jackett 项目介绍 Jackett 是一个强大的开源代理服务器软件,它为众多流行的下载管理器(如Sonarr, Radarr, SickRage等)提供服务。通过翻译和解析各种追踪器站点的独特查询语法,Jackett使得从… · 2026/9/24 13:37:57

MaxKB 架构深度拆解:RAG 智能体平台如何跑通一次问答请求
MaxKB 架构深度拆解:RAG 智能体平台如何跑通一次问答请求

MaxKB 架构深度拆解:RAG 智能体平台如何跑通一次问答请求 【免费下载链接】MaxKB 🔥 MaxKB is an open-source platform for building enterprise-grade agents. 强大易用的开源企业级智能体平台。 项目地址: https://gitcode.com/GitHub_Trending/ma/… · 2026/9/24 13:37:57

F´ 参数服务端口深度解析:Fw::PrmGet / Fw::PrmSet 的接口契约、状态语义与 PrmDb 集成实战
F´ 参数服务端口深度解析:Fw::PrmGet / Fw::PrmSet 的接口契约、状态语义与 PrmDb 集成实战

F 参数服务端口深度解析:Fw::PrmGet / Fw::PrmSet 的接口契约、状态语义与 PrmDb 集成实战 【免费下载链接】fprime F - A flight software and embedded systems framework 项目地址: https://gitcode.com/gh_mirrors/fp/fprime 导读 本篇技术指南围绕 F&a… · 2026/9/24 13:37:57

thumbor 亮度调节滤镜 brightness 完全指南:参数详解、URL 用法与逐像素实现原理
thumbor 亮度调节滤镜 brightness 完全指南:参数详解、URL 用法与逐像素实现原理

后端图像处理 【免费下载链接】thumbor thumbor is an open-source photo thumbnail service by globo.com 项目地址: https://gitcode.com/gh_mirrors/th/thumbor 点击查看 免费下载 thumbor 是一个开源的照片缩略图服务,内置了一套可串联的滤镜&#… · 2026/9/24 13:37:57

基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程
基于YOLOv8的渔船作业监控系统:从环境搭建到边缘部署全流程

简介:这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源,围绕YOLOv8实现渔船作业监控系统,可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件,约24.21MB,以70个Python源码文件为… · 2026/9/24 0:00:13

1D-CNN时间序列建模实战:从Conv1d原理到工业落地
1D-CNN时间序列建模实战:从Conv1d原理到工业落地

简介:面向时间序列数据建模的一维卷积神经网络完整实现,适合深度学习入门者及需要快速验证时序模型的研究者,能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小,只有3KB,内含3个Python脚… · 2026/9/24 0:00:26

柔软的L:汉语语流中被忽视的舌肌张力控制
柔软的L:汉语语流中被忽视的舌肌张力控制

1. 这个“L”不是字母表里的L,而是舌尖上的L最近在几个方言群和语音教学社群里,反复看到有人发一句:“也说字母L:柔软的长舌”。初看以为是英语发音课笔记,点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码