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

相关推荐
Hello--_--World10 分钟前
Vue指令:v-if vs v-show、v-if 与 v-for 的优先级冲突、自定义指令
前端·javascript·vue.js
神の愛11 分钟前
ReactHooks
前端·javascript·react.js
蝎子莱莱爱打怪17 分钟前
用好CC,事半功倍!Claude Code 命令大全,黄金命令推荐、多模型配置、实践指南、Hooks 和踩坑记录大全
前端·人工智能·后端
本末倒置18329 分钟前
VS Code 这次稳了!CSS Anchor Positioning 彻底终结 WebView 定位卡顿
前端
OCN_Yang43 分钟前
能告诉我:你为什么用 MVI 吗?反正我不理解!
android·架构·前端框架
MonkeyKing71551 小时前
Flutter状态管理实战:全局、局部、页面状态拆分指南
前端·flutter
Panzer_Jack1 小时前
Copiwaifu:一个和 Claude Code、Codex、Copilot 等 AI 编程工具联动的 Live2D 桌宠[特殊字符]
前端·人工智能·copilot·web·live2d·pixi.js·easy-live2d
开源情报局2 小时前
从小红书评论区挖需求:我准备用 opencode 写一个 Chrome 插件
前端·javascript·chrome
用户125758524362 小时前
XYGo Admin 三级权限体系:RBAC 动态路由 + v-auth 按钮控制 + 字段级过滤全解析
前端