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

相关推荐
椰羊~王小美7 分钟前
除了前端 JS 配置的国际化,对于 JS 没覆盖到的文本,怎么实现国际化
前端·javascript·状态模式
AC赳赳老秦16 分钟前
DBA 专属方案:用 OpenClaw 实现 SQL 语句优化、慢查询分析、数据库备份巡检全自动化
服务器·前端·数据库·ffmpeg·自动化·deepseek·openclaw
茅盾体23 分钟前
React Native
android·react native·react.js
燐妤33 分钟前
前端HTML编程1:初识html
前端·html5
xiaoye370833 分钟前
java接口文档工具 swagger2和swagger3对比
java·服务器·前端
tongyiixiaohuang36 分钟前
基于轻易云的数据集成,实现企业系统间灵活对接
java·前端·数据库
哥本哈士奇41 分钟前
Power BI学习笔记第17篇:Power BI Dashboard 常用布局方案推荐
前端·powerbi
军军君011 小时前
数字孪生监控大屏实战模板:固体颗粒物监管平台
前端·javascript·vue.js·typescript·前端框架·echarts·less
菜鸟小码1 小时前
MapReduce 核心思想:分而治之,大数据处理的智慧之源
前端·javascript·mapreduce
前端那点事1 小时前
Cookie和Token的核心区别(附使用场景,易懂好记)
前端·vue.js