零基础也能学会：从零搭建你的第一个 React 应用
大家好，我是小林，一名985毕业的全栈工程师，也是掘金上常写入门教程的“技术老学长”。最近有不少朋友私信我：“React 到底怎么入门？网上教程太复杂了！”其实，我当初学的时候也踩过不少坑——特别是看到一堆 import、export、JSX 时，完全懵了。所以今天，我决定用最直白的语言，手把手带你从安装到跑起第一个 React 应用，不讲理论堆砌，只讲能跑起来的最佳实践。
为什么选择 React？它和 Java 有关系吗？
先澄清一个常见误区：React 和 Java 没有任何关系！
虽然名字都带“J”，但：
- Java 是后端语言（比如做 Android App 或服务器）
- React 是前端 JavaScript 库，专门用来构建用户界面（比如网页、App 的 UI）
React 的核心优势是：组件化 + 高效更新。你可以把页面拆成一个个小“积木”（组件），每个积木独立工作，组合起来就是完整应用。这比传统写 HTML + jQuery 清晰太多！
我当初学完 Java 后转前端，一度以为 React 要用 Java 写，结果发现完全是两码事——别被名字误导！
第一步：环境准备（5 分钟搞定）
React 开发需要 Node.js（不是 Java！），它是 JavaScript 的运行环境。别担心，安装超简单：
1. 安装 Node.js
- 访问 https://nodejs.org
- 下载 LTS 版本（长期支持，最稳定）
- 安装时一路“下一步”即可
安装完成后，打开终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD），输入：
node -v
npm -v
如果显示版本号（如 v18.17.0），说明安装成功！
2. 创建 React 项目
我们使用官方推荐的脚手架工具 create-react-app（简称 CRA）：
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
⚠️ 注意：不要用
npm install -g create-react-app全局安装！官方已弃用，直接用npx即可。
执行后，浏览器会自动打开 http://localhost:3000，看到一个旋转的 React Logo —— 恭喜！你已经跑起了第一个 React 应用！
核心概念三连问（新手必懂）
1. 什么是 JSX？
JSX 是 React 的语法扩展，让你在 JS 里写“像 HTML 一样的代码”。比如：
// 这是 JSX
const element = <h1>Hello, React!</h1>;
它会被编译成普通的 JavaScript 函数调用。记住：JSX 不是字符串，也不是 HTML，而是 JS 的语法糖。
2. 什么是组件？
组件就是可复用的 UI 块。在 src/App.js 中，你看到的 App 就是一个函数组件：
function App() {
return (
<div className="App">
<h1>我的第一个 React 应用</h1>
</div>
);
}
✅ 最佳实践：所有组件名必须大写开头（如
MyButton），否则 React 会当成普通 HTML 标签。
3. 如何修改页面内容？
直接编辑 src/App.js，保存后浏览器会自动刷新（热更新）！试试把 <h1> 里的文字改成“Hello, World!”，看效果。
实战：做一个“计数器”小应用
现在，让我们动手写一个点击按钮增加数字的计数器。这是 React 的经典入门练习！
步骤 1：修改 App.js
替换 src/App.js 的全部内容为：
import React, { useState } from 'react';
function App() {
// 声明一个状态变量 count，初始值为 0
const [count, setCount] = useState(0);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>当前计数：{count}</h1>
<button onClick={() => setCount(count + 1)}>
点我加 1
</button>
</div>
);
}
export default App;
步骤 2：理解关键代码
useState(0)：React 的 Hook，用于管理组件状态。返回一个数组[当前值, 更新函数]setCount(count + 1)：调用它会更新count，并自动重新渲染页面{count}：在 JSX 中用花括号插入 JS 表达式
💡 我当初学的时候总忘记
setCount是异步的，但对初学者来说，先按同步理解即可。
步骤 3：运行效果
保存文件，浏览器会立刻显示计数器。点击按钮，数字就会增加！
新手常见问题 & 解决方案
| 问题 | 原因 | 解决方案 |
|---|---|---|
npm start 报错 |
端口 3000 被占用 | 终端按 Ctrl+C 停止，或改端口：PORT=4000 npm start |
| 页面空白，控制台报错 | JSX 语法错误 | 检查是否漏了 return，或标签未闭合（如 <div> 忘了 </div>） |
| 修改代码不自动刷新 | 编辑器保存问题 | 确保文件已保存（VS Code 右上角有 ● 表示未保存） |
useState 报错 |
忘记 import | 顶部必须写 import React, { useState } from 'react'; |
🚫 避坑指南：不要手动修改
node_modules！所有依赖通过npm install安装。
从 Java 转 React 的特别提醒
如果你有 Java 背景，注意以下差异：
| Java | React (JavaScript) |
|---|---|
| 强类型，编译时报错 | 弱类型，运行时才报错（可用 TypeScript 改善） |
| 类（class）是主流 | 函数组件 + Hooks 是现代 React 主流 |
| 需要手动编译 | 开发时自动编译（Babel + Webpack 已内置） |
我当初用 Java 思维写 React，总想定义接口和类，后来发现函数组件更简洁——拥抱函数式思维！
下一步学习建议
你已经完成了 React 的“Hello World”！接下来：
- 深入理解状态管理：学习
useEffect处理副作用（如数据请求） - 拆分组件：把计数器做成独立组件
<Counter /> - 学习路由：用
react-router-dom实现多页面跳转 - 尝试 TypeScript：给 React 加上类型检查，减少 bug
📌 我的开发心得：不要一上来就学 Redux！ 先用好
useState和useContext，90% 的小项目够用了。
结语
React 并没有想象中那么难。只要你能跑起第一个应用，就已经超越了 50% 的观望者。记住：编程是练出来的，不是看出来的。今天你写的这个计数器，可能就是明天你简历上的第一个项目！
如果你觉得这篇教程有帮助，欢迎在评论区留言“已跑通”，我会继续更新《React 状态管理实战》系列。技术路上，我们一起成长！
作者：小林 | 985 全栈工程师 | 掘金专栏作者
本文遵循最佳实践，所有代码经实测可运行（React 18 + CRA）
评论 0