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

手把手搭建首个React项目

news 2026/6/12 2:13:28

React 是一个用于构建用户界面的 JavaScript 库，专注于视图层，以其组件化、声明式和高效的特性而闻名。其核心优势在于通过虚拟DOM和高效的Diff算法来最小化真实DOM操作，从而提升应用性能。

React 核心概念

概念	说明
组件化	React 应用由独立、可复用的组件构成，每个组件管理自身的状态和 UI，是构建 React 应用的基石。
JSX	JavaScript 语法扩展，允许在 JavaScript 代码中编写类似 HTML 的结构，最终会被编译为`React.createElement()`调用。
虚拟DOM	一个轻量级的 JavaScript 对象，是真实 DOM 的抽象。状态变更时，React 先在虚拟DOM上计算差异，再高效地更新真实 DOM。
状态 (State)	组件内部管理的数据，当状态改变时，组件会重新渲染。
属性 (Props)	从父组件传递给子组件的数据，使组件可配置且可复用。
单向数据流	数据自上而下（从父组件到子组件）流动，使得状态变化更可预测和易于调试。

如何实现第一个 React 项目

以下是通过官方工具Create React App创建和运行第一个 React 应用的完整步骤。

1. 环境准备

确保你的计算机已安装Node.js(建议版本 14 或更高) 和npm(Node.js 包管理器)。

2. 创建项目

打开终端或命令行工具，执行以下命令来创建一个名为my-first-react-app的新项目：

npx create-react-app my-first-react-app

此命令会自动安装 React、ReactDOM 以及开发服务器、构建工具等全套开发环境。

3. 启动项目

创建完成后，进入项目目录并启动开发服务器：

cd my-first-react-app npm start

执行后，浏览器会自动打开http://localhost:3000，你将看到 React 的默认欢迎页面。

4. 项目结构初探

创建的项目主要包含以下关键文件：

my-first-react-app/ ├── public/ │ └── index.html # 应用的主 HTML 模板 ├── src/ │ ├── App.js # 应用的根组件 │ ├── index.js # 应用的入口文件，负责渲染根组件到 DOM │ └── ... (其他样式和资源文件) └── package.json # 项目依赖和脚本配置

5. 编写你的第一个组件

让我们修改src/App.js，创建一个简单的“Hello, React!”组件。

// src/App.js import React from 'react'; import './App.css'; // 引入样式文件 // 定义一个函数组件 function App() { // 组件状态示例 const [count, setCount] = React.useState(0); // 事件处理函数 const handleClick = () => { setCount(count + 1); }; return ( <div className="App"> <header className="App-header"> {/* 使用 JSX 编写 UI */} <h1>Hello, React!</h1> <p>你点击了 {count} 次</p> {/* 绑定点击事件 */} <button onClick={handleClick}> 点我增加 </button> </header> </div> ); } export default App; // 导出组件

6. 理解入口文件

查看src/index.js，它负责将App组件挂载到 DOM 中：

// src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; // React 18 的客户端API import './index.css'; import App from './App'; // 导入 App 组件 // 获取根 DOM 节点并创建根 const root = ReactDOM.createRoot(document.getElementById('root')); // 将 React 组件渲染到根节点 root.render( <React.StrictMode> <App /> </React.StrictMode> );

7. 构建与部署

开发完成后，可以使用以下命令构建用于生产环境的优化版本：