周三下午,我刪掉了第三個(gè)配置失敗的React項(xiàng)目文件夾。屏幕右下角顯示17:43,Node.js的安裝進(jìn)度條終于走到100%。這是我全棧開(kāi)發(fā)旅程的第一天,目標(biāo)很簡(jiǎn)單:讓React跑在本地,讓Node.js服務(wù)器能響應(yīng)一個(gè)請(qǐng)求。
環(huán)境搭建:工具鏈的軍備競(jìng)賽
![]()
現(xiàn)代前端開(kāi)發(fā)的第一步不是寫(xiě)代碼,是安裝工具。我列了清單:Vercel和Render用于部署,MongoDB Atlas和Compass管數(shù)據(jù)庫(kù),React加Node.js是核心環(huán)境。看起來(lái)五個(gè)勾,實(shí)際花了三小時(shí)。
Node.js的安裝驗(yàn)證了兩次。第一次在Command Prompt輸入node -v,返回空白。重啟電腦后,v20.12.1終于出現(xiàn)。這個(gè)細(xì)節(jié)讓我意識(shí)到:JavaScript離開(kāi)瀏覽器運(yùn)行時(shí),需要獨(dú)立的環(huán)境支撐。瀏覽器里的JS是沙盒里的寵物,Node.js是放歸野外的版本。
Vite:Create React App的終結(jié)者
創(chuàng)建第一個(gè)React項(xiàng)目時(shí),我選擇了Vite而非傳統(tǒng)的Create React App。官方文檔的說(shuō)法是"faster and modern",實(shí)際體驗(yàn)是:初始化耗時(shí)從分鐘級(jí)降到秒級(jí),熱更新幾乎無(wú)感。
命令行跑完npm create vite@latest,進(jìn)入項(xiàng)目目錄執(zhí)行npm install和npm run dev,localhost:5173彈出默認(rèn)頁(yè)面。這個(gè)過(guò)程沒(méi)有報(bào)錯(cuò),反而讓我不安——太順利了,一定漏了什么。檢查了三遍package.json,確認(rèn)React 18和Vite 5都在依賴列表里,才繼續(xù)下一步。
本地運(yùn)行的React應(yīng)用截圖留在了文檔里:黑底白字的Vite歡迎頁(yè),React和TypeScript的logo旋轉(zhuǎn)加載。這是第一天的里程碑,雖然只是個(gè)空殼。
Node.js服務(wù)器:從文件到響應(yīng)
React是前端,Node.js是后端。我創(chuàng)建了一個(gè)server.js文件,寫(xiě)入六行代碼:引入http模塊,創(chuàng)建服務(wù)器,監(jiān)聽(tīng)3000端口。瀏覽器訪問(wèn)localhost:3000,白色頁(yè)面顯示"Hello World"。
這個(gè)瞬間比React頁(yè)面彈出更讓我觸動(dòng)。因?yàn)檫@里涉及完整的請(qǐng)求-響應(yīng)循環(huán):瀏覽器發(fā)起HTTP請(qǐng)求,Node.js接收、處理、返回?cái)?shù)據(jù)。React只是渲染,Node.js是真的在"服務(wù)"。
為了鞏固,我寫(xiě)了一個(gè)命令行計(jì)算器。支持加減乘除,用process.argv讀取用戶輸入。沒(méi)有圖形界面,黑底白字的交互,但邏輯完整。輸入node calculator.js add 5 3,返回8。這種即時(shí)反饋很適合驗(yàn)證JavaScript基礎(chǔ)——變量、函數(shù)、條件判斷,都在十幾行代碼里跑通。
Express.js:框架的降維打擊
原生Node.js寫(xiě)服務(wù)器是手工打造,Express.js是工業(yè)化生產(chǎn)。我新建文件夾myapp,執(zhí)行npm init生成package.json,再npm install express。node_modules文件夾自動(dòng)膨脹到幾百M(fèi)B,里面藏著Express的依賴樹(shù)。
app.js的代碼比原生版本更短:引入express,創(chuàng)建實(shí)例,定義路由,監(jiān)聽(tīng)端口。但功能更強(qiáng)——路由系統(tǒng)、中間件機(jī)制、HTTP方法封裝,都預(yù)備好了。執(zhí)行成功時(shí),終端顯示"Server running on port 3000",和原生Node.js同樣的輸出,底氣卻不同。
這是后端API開(kāi)發(fā)的第一步。接下來(lái)要接數(shù)據(jù)庫(kù)、寫(xiě)接口、做認(rèn)證,但框架的地基已經(jīng)打好。
MongoDB Atlas:云數(shù)據(jù)庫(kù)的第一次連接
本地開(kāi)發(fā)用MongoDB Compass,生產(chǎn)環(huán)境用MongoDB Atlas。我在Atlas創(chuàng)建集群,復(fù)制連接字符串,替換密碼,寫(xiě)入Node.js代碼。連接成功的提示出現(xiàn)后,做了簡(jiǎn)單的CRUD操作:創(chuàng)建文檔、讀取列表、更新字段、刪除記錄。
數(shù)據(jù)庫(kù)操作和之前的計(jì)算器形成對(duì)比。計(jì)算器的數(shù)據(jù)存在內(nèi)存,進(jìn)程結(jié)束就消失;MongoDB的數(shù)據(jù)持久化在云端,可以跨設(shè)備、跨會(huì)話訪問(wèn)。這是"應(yīng)用"和"玩具"的分界線。
第一天的真實(shí)進(jìn)度
回顧七小時(shí)的投入:React環(huán)境就緒但未寫(xiě)業(yè)務(wù)組件,Node.js服務(wù)器跑通但未接數(shù)據(jù)庫(kù),Express框架啟動(dòng)但未定義API路由,MongoDB連接成功但未設(shè)計(jì)數(shù)據(jù)模型。每個(gè)環(huán)節(jié)都停在"Hello World"級(jí)別,但工具鏈的拼圖已經(jīng)完成。
全棧開(kāi)發(fā)的門(mén)檻不在代碼復(fù)雜度,在配置和整合。Vite隱藏了Webpack的配置地獄,Express封裝了HTTP協(xié)議的繁瑣,Atlas省去了數(shù)據(jù)庫(kù)服務(wù)器的運(yùn)維。這些抽象層讓單人開(kāi)發(fā)成為可能,也讓第一天的我能同時(shí)觸碰前后端和數(shù)據(jù)庫(kù)。
明天的目標(biāo):讓React調(diào)用Express接口,Express讀寫(xiě)MongoDB,完成第一次全棧數(shù)據(jù)流轉(zhuǎn)。今天的localhost:5173和localhost:3000還是孤島,需要一座橋。
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號(hào)”用戶上傳并發(fā)布,本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.