全栈开发第一天：从Vite到Express的踩坑实录

周三下午，我删掉了第三个配置失败的React项目文件夹。屏幕右下角显示17:43，Node.js的安装进度条终于走到100%。这是我全栈开发旅程的第一天，目标很简单：让React跑在本地，让Node.js服务器能响应一个请求。

环境搭建：工具链的军备竞赛

现代前端开发的第一步不是写代码，是安装工具。我列了清单：Vercel和Render用于部署，MongoDB Atlas和Compass管数据库，React加Node.js是核心环境。看起来五个勾，实际花了三小时。

Node.js的安装验证了两次。第一次在Command Prompt输入node -v，返回空白。重启电脑后，v20.12.1终于出现。这个细节让我意识到：JavaScript离开浏览器运行时，需要独立的环境支撑。浏览器里的JS是沙盒里的宠物，Node.js是放归野外的版本。

Vite：Create React App的终结者

创建第一个React项目时，我选择了Vite而非传统的Create React App。官方文档的说法是"faster and modern"，实际体验是：初始化耗时从分钟级降到秒级，热更新几乎无感。

命令行跑完npm create vite@latest，进入项目目录执行npm install和npm run dev，localhost:5173弹出默认页面。这个过程没有报错，反而让我不安——太顺利了，一定漏了什么。检查了三遍package.json，确认React 18和Vite 5都在依赖列表里，才继续下一步。

本地运行的React应用截图留在了文档里：黑底白字的Vite欢迎页，React和TypeScript的logo旋转加载。这是第一天的里程碑，虽然只是个空壳。

Node.js服务器：从文件到响应

React是前端，Node.js是后端。我创建了一个server.js文件，写入六行代码：引入http模块，创建服务器，监听3000端口。浏览器访问localhost:3000，白色页面显示"Hello World"。

这个瞬间比React页面弹出更让我触动。因为这里涉及完整的请求-响应循环：浏览器发起HTTP请求，Node.js接收、处理、返回数据。React只是渲染，Node.js是真的在"服务"。

为了巩固，我写了一个命令行计算器。支持加减乘除，用process.argv读取用户输入。没有图形界面，黑底白字的交互，但逻辑完整。输入node calculator.js add 5 3，返回8。这种即时反馈很适合验证JavaScript基础——变量、函数、条件判断，都在十几行代码里跑通。

Express.js：框架的降维打击

原生Node.js写服务器是手工打造，Express.js是工业化生产。我新建文件夹myapp，执行npm init生成package.json，再npm install express。node_modules文件夹自动膨胀到几百MB，里面藏着Express的依赖树。

app.js的代码比原生版本更短：引入express，创建实例，定义路由，监听端口。但功能更强——路由系统、中间件机制、HTTP方法封装，都预备好了。执行成功时，终端显示"Server running on port 3000"，和原生Node.js同样的输出，底气却不同。

这是后端API开发的第一步。接下来要接数据库、写接口、做认证，但框架的地基已经打好。

MongoDB Atlas：云数据库的第一次连接

本地开发用MongoDB Compass，生产环境用MongoDB Atlas。我在Atlas创建集群，复制连接字符串，替换密码，写入Node.js代码。连接成功的提示出现后，做了简单的CRUD操作：创建文档、读取列表、更新字段、删除记录。

数据库操作和之前的计算器形成对比。计算器的数据存在内存，进程结束就消失；MongoDB的数据持久化在云端，可以跨设备、跨会话访问。这是"应用"和"玩具"的分界线。

第一天的真实进度

回顾七小时的投入：React环境就绪但未写业务组件，Node.js服务器跑通但未接数据库，Express框架启动但未定义API路由，MongoDB连接成功但未设计数据模型。每个环节都停在"Hello World"级别，但工具链的拼图已经完成。

全栈开发的门槛不在代码复杂度，在配置和整合。Vite隐藏了Webpack的配置地狱，Express封装了HTTP协议的繁琐，Atlas省去了数据库服务器的运维。这些抽象层让单人开发成为可能，也让第一天的我能同时触碰前后端和数据库。

明天的目标：让React调用Express接口，Express读写MongoDB，完成第一次全栈数据流转。今天的localhost:5173和localhost:3000还是孤岛，需要一座桥。