2026最新React快速入门教程Vite从零搭建基础实战完整配置指南前言时至今日React已经成为前端主流框架之一广泛应用于企业级后台、移动端、中大型Web项目。在2026年的当下官方已彻底放弃CRAcreate-react-app全面推荐Vite作为React项目构建工具具备启动极速、热更新秒级响应、打包性能极强的优势。本篇教程面向零基础前端开发者全程手把手带你完成环境安装、项目创建、目录解析、JSX语法入门、组件编写、状态使用、项目打包部署看完即可上手开发React项目。技术栈版本React 19 Vite 6 TypeScript 5.4一、前置环境准备React是基于Node.js的前端框架本地开发必须先安装Node环境。1.1 安装Node.js下载地址https://nodejs.org推荐版本v20.x LTS稳定版适配最新Vite和React 19安装注意全程默认下一步自动配置环境变量无需手动配置。1.2 验证环境是否生效打开电脑终端CMD/PowerShell/VSCode终端输入以下命令输出版本号即安装成功# 查看node版本node-v# 查看npm版本npm-v# 查看npx版本npx-v二、使用Vite快速创建React项目对比老旧的CRA脚手架Vite启动速度提升10倍以上热更新无延迟是2026年React官方首选构建工具。2.1 创建项目命令终端输入以下命令一键初始化React项目npmcreate vitelatest my-react-demo ----templatereact-ts命令解析my-react-demo项目名称可自定义小写英文、无空格--template react-ts指定TypeScript版本React模板如需JS版本替换为react即可。2.2 启动项目依次执行以下三条命令运行本地开发环境# 进入项目文件夹cdmy-react-demo# 安装项目依赖npminstall# 启动本地开发服务npmrun dev2.3 访问项目启动成功后终端会输出本地访问地址默认http://localhost:5173打开浏览器访问看到React初始页面代表项目搭建成功三、核心目录结构解析删除项目默认冗余文件只保留核心目录帮你快速理清React项目结构my-react-demo ├── src # 项目核心源码目录 │ ├── App.tsx # 根组件页面核心组件 │ ├── main.tsx # 项目入口文件全局挂载、初始化 │ ├── index.css # 全局样式文件 │ └── vite-env.d.ts # Vite类型声明 ├── index.html # 项目主页模板Vite入口 ├── package.json # 项目配置、依赖、脚本命令 ├── tsconfig.json # TypeScript配置 ├── tsconfig.app.json # 应用TypeScript配置 ├── tsconfig.node.json # Node端TypeScript配置 ├── vite.config.ts # Vite打包配置文件 └── eslint.config.js # ESLint代码规范配置关键文件作用main.tsx项目入口负责将App组件挂载到浏览器页面。import{StrictMode}fromreactimport{createRoot}fromreact-dom/clientimport./index.cssimportAppfrom./App.tsxcreateRoot(document.getElementById(root)!).render(StrictModeApp//StrictMode,)index.htmlVite的入口HTML文件注意script标签指向/src/main.tsx。!doctypehtmlhtmllangenheadmetacharsetUTF-8/linkrelicontypeimage/svgxmlhref/vite.svg/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleVite React TS/title/headbodydividroot/divscripttypemodulesrc/src/main.tsx/script/body/html四、JSX语法入门JSX是React的核心语法它允许你在JavaScript中编写类似HTML的代码。4.1 JSX基础规则// 1. 必须有一个根元素或用Fragment function App() { return ( h1Hello World/h1 pThis is a paragraph/p / ); } // 2. 使用嵌入JavaScript表达式 function Greeting({ name }: { name: string }) { return h1Hello, {name.toUpperCase()}!/h1; } // 3. class改为classNamefor改为htmlFor function Form() { return ( div classNamecontainer label htmlForusername用户名/label input idusername typetext / /div ); } // 4. 内联样式使用对象 function StyledBox() { const style { backgroundColor: #f0f0f0, padding: 20px, borderRadius: 8px, }; return div style{style}Styled Content/div; }4.2 条件渲染function UserStatus({ isLoggedIn }: { isLoggedIn: boolean }) { // 方式一三元表达式 return ( div {isLoggedIn ? span已登录/span : span未登录/span} /div ); } function AdminPanel({ role }: { role: string }) { // 方式二短路运算 return ( div {role admin button管理面板/button} /div ); }4.3 列表渲染interface Todo { id: number; text: string; completed: boolean; } function TodoList({ todos }: { todos: Todo[] }) { return ( ul {todos.map((todo) ( li key{todo.id} className{todo.completed ? completed : } {todo.text} /li ))} /ul ); }五、组件编写5.1 函数组件React 19中函数组件是唯一的组件编写方式。// 基础函数组件 function Welcome() { return h1Welcome to React 19/h1; } // 带Props的组件 interface ButtonProps { label: string; onClick: () void; variant?: primary | secondary | danger; disabled?: boolean; } function Button({ label, onClick, variant primary, disabled false }: ButtonProps) { const baseClass btn; const variantClass btn-${variant}; return ( button className{${baseClass} ${variantClass}} onClick{onClick} disabled{disabled} {label} /button ); }5.2 组件组合// 使用children实现组件组合 function Card({ title, children }: { title: string; children: React.ReactNode }) { return ( div classNamecard div classNamecard-header h2{title}/h2 /div div classNamecard-body {children} /div /div ); } // 使用示例 function Dashboard() { return ( div classNamedashboard Card title用户统计 p总用户数1,234/p p活跃用户567/p /Card Card title订单概览 p今日订单89/p p待处理12/p /Card /div ); }六、状态管理6.1 useState基础import { useState } from react; function Counter() { const [count, setCount] useState(0); return ( div p当前计数{count}/p button onClick{() setCount(count 1)}1/button button onClick{() setCount(count - 1)}-1/button button onClick{() setCount(0)}重置/button /div ); }6.2 表单处理function LoginForm() { const [formData, setFormData] useState({ username: , password: , }); const [errors, setErrors] useStateRecordstring, string({}); const handleChange (e: React.ChangeEventHTMLInputElement) { const { name, value } e.target; setFormData(prev ({ ...prev, [name]: value })); // 清除对应字段的错误 if (errors[name]) { setErrors(prev { const next { ...prev }; delete next[name]; return next; }); } }; const validate (): boolean { const newErrors: Recordstring, string {}; if (!formData.username.trim()) { newErrors.username 请输入用户名; } if (!formData.password) { newErrors.password 请输入密码; } else if (formData.password.length 6) { newErrors.password 密码至少6位; } setErrors(newErrors); return Object.keys(newErrors).length 0; }; const handleSubmit (e: React.FormEvent) { e.preventDefault(); if (validate()) { console.log(提交数据, formData); // 调用API登录 } }; return ( form onSubmit{handleSubmit} div label htmlForusername用户名/label input idusername nameusername typetext value{formData.username} onChange{handleChange} / {errors.username span classNameerror{errors.username}/span} /div div label htmlForpassword密码/label input idpassword namepassword typepassword value{formData.password} onChange{handleChange} / {errors.password span classNameerror{errors.password}/span} /div button typesubmit登录/button /form ); }6.3 useEffect副作用处理import { useState, useEffect } from react; interface User { id: number; name: string; email: string; } function UserList() { const [users, setUsers] useStateUser[]([]); const [loading, setLoading] useState(true); const [error, setError] useStatestring | null(null); useEffect(() { let cancelled false; async function fetchUsers() { try { setLoading(true); const response await fetch(https://jsonplaceholder.typicode.com/users); if (!response.ok) throw new Error(请求失败); const data await response.json(); if (!cancelled) { setUsers(data); setError(null); } } catch (err) { if (!cancelled) { setError(err instanceof Error ? err.message : 未知错误); } } finally { if (!cancelled) { setLoading(false); } } } fetchUsers(); // 清理函数组件卸载时取消状态更新 return () { cancelled true; }; }, []); // 空依赖数组仅在挂载时执行一次 if (loading) return div加载中.../div; if (error) return div错误{error}/div; return ( ul {users.map(user ( li key{user.id} {user.name} - {user.email} /li ))} /ul ); }七、自定义Hook自定义Hook是React代码复用的核心模式。// useLocalStorage持久化状态到localStoragefunctionuseLocalStorageT(key:string,initialValue:T){const[storedValue,setStoredValue]useStateT((){try{constitemwindow.localStorage.getItem(key);returnitem?JSON.parse(item):initialValue;}catch{returninitialValue;}});constsetValue(value:T|((val:T)T)){constvalueToStorevalueinstanceofFunction?value(storedValue):value;setStoredValue(valueToStore);window.localStorage.setItem(key,JSON.stringify(valueToStore));};return[storedValue,setValue]asconst;}// useDebounce防抖处理functionuseDebounceT(value:T,delay:number):T{const[debouncedValue,setDebouncedValue]useState(value);useEffect((){consttimersetTimeout(()setDebouncedValue(value),delay);return()clearTimeout(timer);},[value,delay]);returndebouncedValue;}八、路由配置使用React Router v7进行页面路由管理。npminstallreact-router-dom// router/index.tsx import { createBrowserRouter, RouterProvider } from react-router-dom; import Layout from ../components/Layout; import Home from ../pages/Home; import About from ../pages/About; import UserDetail from ../pages/UserDetail; import NotFound from ../pages/NotFound; const router createBrowserRouter([ { path: /, element: Layout /, children: [ { index: true, element: Home / }, { path: about, element: About / }, { path: users/:id, element: UserDetail / }, { path: *, element: NotFound / }, ], }, ]); export default function AppRouter() { return RouterProvider router{router} /; }九、项目打包与部署9.1 生产构建# 构建生产版本npmrun build# 预览构建结果npmrun preview构建产物在dist目录下包含优化后的HTML、CSS、JS文件。9.2 Vite配置优化// vite.config.tsimport{defineConfig}fromvite;importreactfromvitejs/plugin-react;importpathfrompath;exportdefaultdefineConfig({plugins:[react()],resolve:{alias:{:path.resolve(__dirname,./src),},},build:{rollupOptions:{output:{manualChunks:{react-vendor:[react,react-dom],router-vendor:[react-router-dom],},},},chunkSizeWarningLimit:1000,},server:{port:3000,open:true,},});十、总结通过本教程你已经完成了从零搭建React项目到掌握核心概念的全过程。回顾一下学到的内容使用Vite创建ReactTypeScript项目理解项目目录结构和关键文件掌握JSX语法和组件编写使用useState和useEffect管理状态和副作用编写自定义Hook实现逻辑复用配置React Router实现页面路由优化构建配置并打包部署下一步建议深入学习React 19的Server Components、学习状态管理库Zustand、掌握TanStack Query进行数据请求、了解Next.js全栈开发。React的学习是一个持续积累的过程关键在于多写代码、多看文档、多思考最佳实践。祝你在React开发之路上越走越远