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

相关推荐
ZC跨境爬虫10 分钟前
前端实战复盘:从零完成Apple中国大陆官网UI第一阶段全量静态复刻
前端·css·ui·html
苏一恒18 分钟前
MP4 在 <video> 里,必须全量下载才能起播吗?—— moov、Range 与被误解的 FastStart
前端
Java小卷26 分钟前
低代码并没有过时!可拖拽表单设计器布局思路
前端·低代码
idcu29 分钟前
深入 Lyt.js 响应式系统:Proxy + Signal 双模式
前端
idcu30 分钟前
Vapor Mode 揭秘:无虚拟 DOM 的极致性能
前端
idcu31 分钟前
从 Vue 3 到 Lyt.js:无痛迁移指南
前端
尘世壹俗人32 分钟前
如何检查服务器上消耗资源的程序是那个
服务器·前端·chrome
LIO38 分钟前
Vue Router 进阶:深入用法与最佳实践
前端·vue-router
Hilaku1 小时前
做了 6 年前端,技术不差却拿不到 Offer?
前端·javascript·程序员
古茗前端团队1 小时前
钉钉小程序蓝牙打印探索与实践
前端·蓝牙