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

相关推荐
拄杖盲学轻声码9 分钟前
【html网页制作】国庆节日主题网页制作含js轮播(5页面附效果源码)
前端·javascript·html
Envyᥫᩣ15 分钟前
Python中的机器学习:从入门到实战
python·前端框架
you来有去21 分钟前
npm install报错npm ERR! Found: vite@4.5.0
前端·npm·node.js
等什么君!42 分钟前
初识Vue3(详细版)
前端·vue
程序员奇奥1 小时前
Vue中对数组变化监听
前端·javascript·vue.js
胡西风_foxww1 小时前
用css画一个loading
前端·css·loading·加载中
i80131 小时前
弹性盒模型关键几个点:
前端·javascript·css
时清云1 小时前
【算法】搜索二维矩阵
前端·算法·面试
挣钱花3881 小时前
mapboxGL 离线部署或者说去除token最简单得方法
开发语言·前端·javascript
喵喵酱仔__1 小时前
css 数字比汉字要靠上
前端·css