node后端react前端简单实例

安装node

mkdir my-node-server

cd my-node-server

npm init -y

npm install express cors

创建 server.js文件

const express = require('express');

const cors = require('cors');

const app = express();

const PORT = 4000;

app.use(cors()); // 允许跨域请求

app.get('/api/data', (req, res) => {

res.json({ message: 'Hello from Node.js server!' });

});

app.listen(PORT, () => {

console.log(`Server is running on http://localhost:${PORT}`);

});

node server.js

访问地址:

http://localhost:5000/api/data

创建react

npx create-react-app my-react-app

cd my-react-app

src下创建App.js

import React, { useState, useEffect } from 'react';

function App() {

const [data, setData] = useState(null);

useEffect(() => {

fetch('http://localhost:4000/api/data') // 发送网络请求

.then(response => response.json())

.then(data => setData(data));

}, []);

return (

<div>

<h1>React Demo Application</h1>

<pre>{JSON.stringify(data, null, 2)}</pre>

</div>

);

}

export default App;

npm start

http://localhost:3000

相关推荐
Lee川7 分钟前
深入浅出JavaScript事件机制:从捕获冒泡到事件委托
前端·javascript
光影少年7 分钟前
async/await和Promise的区别?
前端·javascript·掘金·金石计划
恋猫de小郭8 分钟前
Flutter 发布官方 Skills ,Flutter 在 AI 领域再添一助力
android·前端·flutter
心在飞扬9 分钟前
工具调用出错捕获提升程序健壮性
前端·后端
HelloReader9 分钟前
Tauri 命令作用域(Command Scopes)精细化控制你的应用权限
前端
心在飞扬10 分钟前
基于工具调用的智能体设计与实现(*)
前端·后端
心在飞扬11 分钟前
函数调用快速提取结构化数据使用技巧
前端·后端
心在飞扬13 分钟前
不支持函数调用的大语言模型解决技巧
前端·后端
codingWhat14 分钟前
如何实现一个「万能」的通用打印组件?
前端·javascript·vue.js
赵_叶紫38 分钟前
聊聊 Agent Skills 这个东西
前端