周三下午,我删掉了第三个配置失败的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 installnpm 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还是孤岛,需要一座桥。