在我之前的博客中,我介紹了 React 和 Node.js?,F(xiàn)在,讓我們將它們聚集在一起構(gòu)建更令人興奮的東西:一個簡單的全棧應(yīng)用程序!您可能認為全棧應(yīng)用程序僅適用于具有多個數(shù)據(jù)庫和復(fù)雜結(jié)構(gòu)的大型項目。雖然從概念上講這是正確的,但實際上,全棧應(yīng)用程序可以像帶有基本后??端的小型前端一樣簡單。那么,讓我們分解一下,看看使用 React 和 Node.js 創(chuàng)建一個全棧應(yīng)用程序是多么容易。
第 1 步:使用 Node.js 和 Express 進行后端
讓我們從創(chuàng)建后端開始。我們將使用 Express 作為我們的服務(wù)器,向前端發(fā)送簡單的 JSON 消息響應(yīng)。
- 安裝 Express: 首先,首先在終端中運行以下命令來安裝 Express:
npm install express
- 創(chuàng)建服務(wù)器: 現(xiàn)在,讓我們創(chuàng)建一個具有簡單路由的服務(wù)器,該路由將返回問候消息。
const express = require('express'); const app = express(); const PORT = 3000; app.get('/greet', (req, res) => { res.status(200).json({ message: "Zee here..." }); }); app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`));
說明:
- 我們導(dǎo)入express模塊??并使用express()創(chuàng)建它的實例。
- 我們在 /greet 設(shè)置了一個簡單的 GET 路由,它響應(yīng)包含問候消息的 JSON 對象。
- 我們在端口 3000 上啟動服務(wù)器,控制臺將記錄服務(wù)器正在運行。
第 2 步:使用 React 進行前端
現(xiàn)在,讓我們使用 React 創(chuàng)建前端。我們將使用兩個鉤子:useState 和 useEffect 從后端獲取數(shù)據(jù)。
- 創(chuàng)建 React 應(yīng)用: 如果您尚未設(shè)置 React 應(yīng)用程序,則可以通過運行以下命令使用 create-react-app 創(chuàng)建一個應(yīng)用程序:
npx create-react-app my-fullstack-app cd my-fullstack-app
- 編寫前端代碼: 現(xiàn)在,讓我們修改 App.js 文件以從后端獲取數(shù)據(jù)并顯示它。
import { useState, useEffect } from 'react'; export function App() { const [response, setResponse] = useState(null); useEffect(() => { const controller = new AbortController(); // This is used to abort the fetch request if the component is unmounted const fetchData = async () => { try { const response = await fetch('http://localhost:3000/greet', { signal: controller.signal, }); if (!response.ok) throw new Error("Couldn't fetch data"); const data = await response.json(); setResponse(data.message); // Corrected the response property here } catch (error) { console.error(error); } }; fetchData(); // Clean up function to abort the fetch request if needed return () => controller.abort(); }, []); return ( <div> {response ? <p>{response}</p> : <p>Loading...</p>} </div> ); }
說明:
- useState 用于保存后端返回的響應(yīng)數(shù)據(jù)。
- useEffect 用于在組件掛載時觸發(fā) fetch 請求。
- 我們使用 fetch() API 向 http://localhost:3000/greet 發(fā)送請求并處理響應(yīng)。如果獲取成功,我們將使用來自后端的消息更新響應(yīng)狀態(tài)。
- 我們在組件中顯示響應(yīng),在請求正在進行時顯示“正在加載...”。
第 3 步:運行應(yīng)用程序
- 啟動后端: 在后端文件夾(server.js 文件所在的位置)中,運行:
npm install express
- 啟動前端: 在前端文件夾(React 應(yīng)用程序所在的位置)中,運行:
const express = require('express'); const app = express(); const PORT = 3000; app.get('/greet', (req, res) => { res.status(200).json({ message: "Zee here..." }); }); app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`));
現(xiàn)在,打開瀏覽器并訪問 http://localhost:3000。您應(yīng)該會看到從后端獲取的一條簡單消息,它將顯示“Zee here...”。
結(jié)論
就是這樣!您剛剛使用 React 和 Express 創(chuàng)建了一個簡單的全棧應(yīng)用程序。這是一個很好的開始,有了這個基礎(chǔ),您就可以擴展和構(gòu)建更復(fù)雜的應(yīng)用程序。快樂編碼!
要點:
- 全棧應(yīng)用程序不需要很復(fù)雜。一個簡單的前端和后端就可以被認為是全棧。
- React 的 useState 和 useEffect 掛鉤非常適合從后端 API 獲取數(shù)據(jù)。
- Express 是一個簡單而強大的框架,用于構(gòu)建后端 API。
以上是使用 React 和 Node.js 創(chuàng)建簡單的全棧應(yīng)用程序的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機

Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

在JavaScript中,選擇單行注釋(//)還是多行注釋(//)取決于注釋的目的和項目需求:1.使用單行注釋進行快速、內(nèi)聯(lián)的解釋;2.使用多行注釋進行詳細的文檔說明;3.保持注釋風(fēng)格的一致性;4.避免過度注釋;5.確保注釋與代碼同步更新。選擇合適的注釋風(fēng)格有助于提高代碼的可讀性和可維護性。

是的,javascriptcommentsarenectary和shouldshouldshouldseffectional.1)他們通過codeLogicAndIntentsgudedepleders,2)asevitalincomplexprojects,和3)handhanceClaritywithOutClutteringClutteringThecode。

Java和JavaScript是不同的編程語言,各自適用于不同的應(yīng)用場景。Java用于大型企業(yè)和移動應(yīng)用開發(fā),而JavaScript主要用于網(wǎng)頁開發(fā)。

JavascriptconcommentsenceenceEncorenceEnterential gransimenting,reading and guidingCodeeXecution.1)單inecommentsareusedforquickexplanations.2)多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3)

評論arecrucialinjavascriptformaintainingclarityclarityandfosteringCollaboration.1)heelpindebugging,登機,andOnderStandingCodeeVolution.2)使用林格forquickexexplanations andmentmentsmmentsmmentsmments andmmentsfordeffordEffordEffordEffordEffordEffordEffordEffordEddeScriptions.3)bestcractices.3)bestcracticesincracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptIspreferredforredforwebdevelverment,而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1)JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2)

JavaScript中的日期和時間處理需注意以下幾點:1.創(chuàng)建Date對象有多種方式,推薦使用ISO格式字符串以保證兼容性;2.獲取和設(shè)置時間信息可用get和set方法,注意月份從0開始;3.手動格式化日期需拼接字符串,也可使用第三方庫;4.處理時區(qū)問題建議使用支持時區(qū)的庫,如Luxon。掌握這些要點能有效避免常見錯誤。
