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

相关推荐
遇见你...1 小时前
TypeScript
前端·javascript·typescript
Highcharts.js2 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
懂懂tty5 小时前
CRA 迁移 Rspack(实战)
前端·架构
小码哥_常6 小时前
Kotlin 助力 Android 启动“大提速”
前端
GreenTea6 小时前
AI 时代,工程师的不可替代性在哪里
前端·人工智能·后端
Jagger_7 小时前
能不能别再弄低代码害人了
前端
朦胧之7 小时前
AI 编程开发思维
前端·后端·ai编程
踩着两条虫7 小时前
VTJ:快速开始
前端·低代码·架构
木斯佳8 小时前
前端八股文面经大全:携程前端一面(2026-04-17)·面经深度解析
前端·状态模式
Java后端的Ai之路8 小时前
LangChain ReAct Agent 核心技术问答
前端·react.js·langchain