1、全栈概览与环境搭建：Node.js与React简介、全栈项目架构、开发环境配置（VSCode、Node、npm/yarn）、创建第一个React应用
1.1 全栈开发到底在讲什么？
说实话，很多新手一听到「全栈」两个字就发怵。其实没那么玄乎。
全栈开发，说白了就是一个人能搞定前端和后端。前端你看到的页面、按钮、动画，后端处理数据、登录、存储。React管前端，Node.js管后端，两者通过API通信。
我刚开始带团队的时候，发现一个有意思的现象：前端工程师不懂后端怎么存数据，后端工程师不知道前端怎么渲染页面。结果呢？联调的时候天天吵架。后来我要求团队每个人都必须懂一点对方的领域——嗯，这就是全栈的价值。
你想想看，如果你能一个人打通整个链路，从数据库设计到页面交互全包了，那你在团队里的话语权完全不一样。
1.2 Node.js 与 React：为什么是它们？
选技术栈就像选工具，顺手最重要。
Node.js 是什么？它不是一门新语言，而是让 JavaScript 跑在服务器上的运行时环境。以前 JavaScript 只能在浏览器里玩，Node.js 把它带到了后端。
我个人习惯用 Node.js 做后端，原因很简单：
- 前后端都用 JavaScript，减少上下文切换
- npm 生态太强大了，几乎你能想到的功能都有现成的包
- 异步非阻塞 I/O，处理高并发请求很轻松
React 呢？它是 Facebook 开源的 UI 库。注意，我说的是「库」不是「框架」。React 只关心视图层，怎么组织代码是你的事。
我在项目中遇到过很多次这样的场景：产品经理说「这个页面要加个实时更新的数据面板」。如果用传统 jQuery，你得手动操作 DOM，代码很快就变成一坨。但 React 的组件化 + 状态管理，改个数据就自动重新渲染——省心太多了。
核心概念速览：
- 组件化：页面拆成独立的小块，每个块只管自己的事
- 单向数据流：数据从父组件流向子组件，清晰可追踪
- 虚拟 DOM：React 在内存里维护一个轻量级的 DOM 副本，只更新真正变化的部分
1.3 全栈项目架构长什么样？
一个典型的全栈项目，目录结构大概是这样的：
my-fullstack-app/
├── client/ # React 前端
│ ├── public/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── services/ # API 调用
│ │ └── App.js
│ └── package.json
├── server/ # Node.js 后端
│ ├── routes/
│ ├── models/
│ ├── controllers/
│ ├── config/
│ └── package.json
└── README.md
为什么要分 client 和 server？
我曾经接手过一个项目，前后端代码混在一起，那个乱啊...改个前端路由结果把后端接口搞崩了。所以从一开始就分开，各管各的，互不干扰。
前后端通过 HTTP 请求通信。前端发请求，后端处理完返回 JSON 数据。就这么简单。
我的建议： 刚开始学的时候，别急着搞 monorepo 或者微服务。老老实实分成两个文件夹，跑两个端口。等熟练了再考虑更复杂的架构。
1.4 开发环境配置：一步都不能错
环境配置是很多新手的第一道坎。我见过太多人卡在这一步，然后怀疑自己是不是不适合写代码。别急，一步步来。
1.4.1 VSCode：你的主战场
编辑器我推荐 VSCode，免费、轻量、插件丰富。装好之后，建议先装这几个插件：
| 插件名 | 作用 |
|---|---|
| ESLint | 代码规范检查，帮你写出干净的代码 |
| Prettier | 自动格式化代码，团队协作必备 |
| React Developer Tools | 调试 React 组件的神器 |
| GitLens | 查看代码历史，谁改了什么都一清二楚 |
1.4.2 Node.js 安装
去官网下载 LTS 版本。LTS 就是长期支持版，稳定，适合生产环境。
安装完成后，打开终端验证：
node -v
# 输出类似 v18.17.0
npm -v
# 输出类似 9.6.7
看到版本号就说明装好了。如果报错，大概率是环境变量没配好。Windows 用户检查一下系统变量里有没有 Node.js 的路径。
注意： 不要用最新版 Node.js！我踩过这个坑。最新版可能有些包还没适配，跑起来全是警告。LTS 版本最稳。
1.4.3 npm 还是 yarn？
两者都是包管理工具。npm 是 Node.js 自带的，yarn 是 Facebook 出的。
我个人习惯用 yarn，原因就一个：快。yarn 有缓存机制，同一个包装第二次几乎是秒装。而且 yarn.lock 文件能保证团队所有人装的版本一致。
安装 yarn：
npm install -g yarn
验证：
yarn --version
当然，用 npm 也没问题。选你顺手的就行。
1.5 创建第一个 React 应用
终于到了动手环节。别紧张，跟着我一步步来。
1.5.1 使用 Create React App
最快速的方式是用官方脚手架：
npx create-react-app my-first-app
cd my-first-app
npm start
等几秒钟，浏览器会自动打开 http://localhost:3000，你会看到一个 React 的默认页面。
为什么会用 npx 而不是 npm？npx 会临时下载 create-react-app 并执行，不会全局安装。用完就删，不占空间。
1.5.2 项目结构解读
打开项目，你会看到这些文件和文件夹：
my-first-app/
├── public/
│ └── index.html # 入口 HTML
├── src/
│ ├── App.js # 根组件
│ ├── App.css
│ ├── index.js # 入口 JS
│ └── index.css
├── package.json
└── README.md
index.js 是入口文件，它把 App 组件渲染到 public/index.html 里的 div#root 上。
App.js 就是你的第一个组件。打开看看：
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello, 全栈开发！</h1>
</div>
);
}
export default App;
看到没？一个组件就是一个函数，返回 JSX。JSX 看起来像 HTML，但其实是 JavaScript 的语法扩展。
1.5.3 热更新体验
现在把 App.js 里的文字改成「我的第一个 React 应用」，保存。浏览器会自动刷新，不需要手动操作。
这就是热更新（Hot Module Replacement）。我在项目中特别喜欢这个功能，改完代码立刻看到效果，开发效率翻倍。
小技巧： 如果你不想让浏览器自动打开，可以在启动时加个参数：BROWSER=none npm start。我自己就是这么干的，省得每次弹窗。
1.6 本章小结
这一章我们做了几件事：
- 理解了全栈开发的核心概念
- 知道了 Node.js 和 React 为什么是黄金搭档
- 搭建了完整的开发环境
- 创建并运行了第一个 React 应用
环境搭好了，接下来就可以真正开始写代码了。下一章我们会深入 React 的核心——组件和 JSX。到时候你会发现自己写的东西开始「活」起来了。
嗯，先到这。去喝杯水，活动一下脖子。写代码是场马拉松，别一开始就冲刺。