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

相关推荐
摘星编程26 分钟前
React Native鸿蒙:BiometricAuth指纹解锁实现
react native·react.js·harmonyos
摘星编程35 分钟前
用React Native开发OpenHarmony应用:NFC读取标签数据
javascript·react native·react.js
GISer_Jing35 分钟前
AI驱动营销:业务技术栈实战(From AIGC,待总结)
前端·人工智能·aigc·reactjs
哈哈你是真的厉害2 小时前
小白基础入门 React Native 鸿蒙跨平台开发:实现一个简单的文件路径处理工具
react native·react.js·harmonyos
GIS之路2 小时前
GDAL 实现影像裁剪
前端·python·arcgis·信息可视化
AGMTI2 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript
不会Android的潘潘3 小时前
受限系统环境下的 WebView 能力演进:车载平台 Web 渲染异常的根因分析与优化实践
android·java·前端·aosp
建军啊3 小时前
java web常见lou洞
android·java·前端
阳无3 小时前
宝塔部署的前后端项目从IP访问改成自定义域名访问
java·前端·部署
哈哈你是真的厉害3 小时前
小白基础入门 React Native 鸿蒙跨平台开发:实现一个简单的个人所得税计算器
react native·react.js·harmonyos