React基础入门：从零开始构建你的第一个组件
(177) feilong.org 修订于2026-06-24 14:28:29 react教程React 是现代前端开发的重要工具之一。本文将带您完成从环境搭建到项目运行的完整流程。
作为飞龙，我将通过具体案例帮助您理解 React 的核心概念。
一、创建项目环境
在开始前请确保已安装 Node.js 和 npm。建议使用国内镜像加速依赖包下载：
npm config set registry https://registry.npmmirror.com
1. 打开命令行工具
2. 执行命令创建项目：
|
1 |
npx create-react-app my-first-app |
等待依赖包下载完成后，进入项目目录启动开发服务器：
|
1 2 |
cd my-first-app npm start |
二、理解组件结构
React 项目默认包含一个 App.js 文件。这是主组件文件，需在此处编写逻辑。
1. 打开 App.js 文件
2. 替换原有内容为以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; function App() { return ( <div> <h1>欢迎使用 React</h1> <p>这是飞龙为您准备的第一个组件</p> </div> ); } export default App; |
保存后页面将自动刷新显示新内容。组件通过 JSX 语法定义，每个组件都是独立的模块。
三、状态管理实践
状态是 React 应用的核心。我们通过 useState 钩子实现简单交互。
1. 在 App.js 添加状态变量
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); return ( <div> <h1>计数器</h1> <p>当前数值：{count}</p> <button onClick={() => setCount(count + 1)}>增加</button> </div> ); } export default App; |
点击按钮时，count 状态会实时更新。这展示了 React 的响应式特性。
四、组件通信技巧
多个组件间可通过 props 传递数据。我们创建一个子组件演示通信机制。
1. 新建 Counter.js 文件
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from 'react'; function Counter({ value, onIncrement }) { return ( <div> <p>当前数值：{value}</p> <button onClick={onIncrement}>增加</button> </div> ); } export default Counter; |
2. 修改 App.js 引入子组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { useState } from 'react'; import Counter from './Counter'; function App() { const [count, setCount] = useState(0); return ( <div> <h1>计数器</h1> <Counter value={count} onIncrement={() => setCount(count + 1)} /> </div> ); } export default App; |
子组件通过 props 接收数据，并通过回调函数实现交互。
五、性能优化建议
React 提供多种优化手段。对于大型项目，建议使用 React.memo 防止不必要的渲染。
1. 修改子组件添加 memo 包裹
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React, { memo } from 'react'; function Counter({ value, onIncrement }) { return ( <div> <p>当前数值：{value}</p> <button onClick={onIncrement}>增加</button> </div> ); } export default memo(Counter); |
2. 在 App.js 添加性能监控
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import React, { useState, useEffect } from 'react'; import Counter from './Counter'; function App() { const [count, setCount] = useState(0); useEffect(() => { console.log('组件更新', count); }, [count]); return ( <div> <h1>计数器</h1> <Counter value={count} onIncrement={() => setCount(count + 1)} /> </div> ); } export default App; |
通过 useEffect 钩子可以监控组件状态变化。
通过以上步骤，您已掌握 React 的基本开发流程。飞龙建议在实际项目中结合 TypeScript 提升代码质量，并使用 React Developer Tools 进行调试。随着经验积累，您将能够构建更复杂的交互式界面。
更新网址：https://feilong.org/article-20260313
最初发布：20260313 09:39:32 feilong.org 于广州
加入收藏夹，查看更方便。