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

相关推荐
Mapmost3 分钟前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端
San30.23 分钟前
Ajax 数据请求:从 XMLHttpRequest 到现代前端数据交互的演进
前端·ajax·交互
西西西西胡萝卜鸡33 分钟前
虚拟列表(Virtual List)组件实现与优化铁臂猿版(简易版)
前端·vue.js
宇余40 分钟前
Unibest:新一代uni-app工程化最佳实践指南
前端·vue.js
性野喜悲1 小时前
ts+uniapp小程序时间日期选择框(分开选择)
前端·javascript·vue.js
P***25392 小时前
前端构建工具缓存清理,npm cache与yarn cache
前端·缓存·npm
好奇的菜鸟2 小时前
解决 npm 依赖版本冲突:从 “unable to resolve dependency tree“ 到依赖管理高手
前端·npm·node.js
lcc1872 小时前
Vue 内置指令
前端·vue.js
lijun_xiao20093 小时前
前端React18入门到实战
前端
o***Z4483 小时前
前端响应式设计资源,框架+模板
前端