React基础-第一章：React 简介与开发环境搭建

第一章React 简介与开发环境搭建1. 什么是 ReactReact 是一个由 Facebook现 Meta开发并维护的前端 JavaScript 库用于构建用户界面尤其是单页应用SPA。✅ 核心特点组件化开发把 UI 拆分成独立可复用的组件。声明式编程你描述“想要什么”而不是一步步操作 DOM。虚拟 DOMVirtual DOM高效更新视图提升性能。支持服务端渲染SSR和移动端React Native 类比HTML/CSS/JS 是盖房子的砖头水泥React 就是预制板 起重机 —— 更快更高效地搭建复杂结构。2. JSX 是什么React 使用JSXJavaScript XML它是一种语法扩展允许你在 JS 中写类似 HTML 的代码。const element h1Hello, React!/h1;这看起来像 HTML但其实是会被编译成 JavaScript 函数调用React.createElement()。⚠️ 注意JSX 不是字符串也不是 HTML它是语法糖需要工具如 Babel编译。3. 搭建开发环境推荐使用 Vite虽然你可以用create-react-app但我们推荐更快的现代工具Vite✅ 步骤一安装 Node.js前提确保你已安装 Node.js建议 v16。打开终端运行node-vnpm-v如果显示版本号说明已安装。✅ 步骤二创建 React 项目使用 Vite在终端中运行以下命令npmcreate vitelatest my-react-app ----templatereact解释npm create vitelatest使用最新版 Vite 创建项目my-react-app你的项目名可自定义-- --template react指定使用 React 模板注意两个--✅ 步骤三进入项目并安装依赖cdmy-react-appnpminstall✅ 步骤四启动开发服务器npmrun dev你会看到类似输出Local: http://localhost:5173/浏览器自动打开你应该能看到 Vite React 的欢迎页面 4. 项目结构概览关键文件进入项目目录后重点关注这些文件my-react-app/ ├── src/ │ ├── main.jsx # 入口文件 │ ├── App.jsx # 主组件 │ └── assets/ # 静态资源 ├── index.html # 主 HTML 文件只有一个 div#root └── vite.config.js # Vite 配置文件 看一眼src/main.jsximport React from react import ReactDOM from react-dom/client import App from ./App.jsx ReactDOM.createRoot(document.getElementById(root)).render( React.StrictMode App / /React.StrictMode )这段代码的意思是找到 HTML 中 id 为root的元素把App /组件渲染进去 再看src/App.jsxfunction App() { return ( div h1Vite React/h1 /div ) } export default App这就是一个最简单的 React 函数组件✅ 小练习动手试试修改App.jsx中的h1文字为h1我的第一个 React 应用/h1保存文件观察浏览器是否热重载自动刷新在App.jsx中添加一行p现在时间是{new Date().toLocaleTimeString()}/p查看页面是否显示当前时间静态不会动✅ 提示花括号{}可以嵌入任意 JavaScript 表达式 本章重点总结概念说明React构建 UI 的 JavaScript 库JSX在 JS 中写 HTML-like 语法Vite快速现代化构建工具组件一个返回 JSX 的函数渲染流程index.html→main.jsx→App.jsx→ 浏览器显示✅恭喜你完成第一章你现在知道了 React 是什么搭建了开发环境运行了一个 React 项目修改了组件内容下一章组件与 JSX发布于2026-05-14著作权归作者所有