当前位置：首页 > news >正文

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

news 2026/5/15 21:08:32

📘 第一章：React 简介与开发环境搭建

1. 什么是 React？

React 是一个由 Facebook（现 Meta）开发并维护的前端 JavaScript 库，用于构建用户界面，尤其是单页应用（SPA）。

✅ 核心特点：

组件化开发：把 UI 拆分成独立可复用的组件。
声明式编程：你描述“想要什么”，而不是一步步操作 DOM。
虚拟 DOM（Virtual DOM）：高效更新视图，提升性能。
支持服务端渲染（SSR）和移动端（React Native）

💡 类比：HTML/CSS/JS 是盖房子的砖头水泥，React 就是预制板 + 起重机 —— 更快更高效地搭建复杂结构。

2. JSX 是什么？

React 使用JSX（JavaScript XML），它是一种语法扩展，允许你在 JS 中写类似 HTML 的代码。

const element = <h1>Hello, 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 vite@latest my-react-app ----templatereact

解释：

npm create vite@latest：使用最新版 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.jsx`：

import 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.jsx`：

function App() { return ( <div> <h1>Vite + 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`→ 浏览器显示