Express-React-Scaffold快速入门与实践

柯茵沙

于 2024-09-12 07:34:47 发布

阅读量454

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00236/article/details/142156282

版权

Express-React-Scaffold快速入门与实践

express-react-scaffold 🔨 后端使用node+express，前端使用react全家桶的精简脚手架。项目地址: https://gitcode.com/gh_mirrors/ex/express-react-scaffold

项目介绍

🚀 Express-React-Scaffold 是一个简洁高效的前后端分离脚手架，它结合了后端的 Node.js + Express 和前端的 React 全家桶，为开发者提供了一个快速搭建全栈应用程序的基础框架。项目采用了 MIT 许可证 ，支持热更新（Hot-Reloading）以提升开发体验，并且在生产模式下能够无缝运行，兼顾开发便利性和应用性能。

项目快速启动

要迅速启动并运行此项目，请遵循以下步骤：

环境准备

确保您的系统中已安装 Node.js (推荐版本 >=14.0.0)。

克隆项目

git clone https://github.com/luffyZh/express-react-scaffold.git
cd express-react-scaffold

安装依赖

npm install 或者 yarn

运行项目

启动开发服务器及客户端应用:

npm run dev

此时，你的应用应该已经运行在默认的端口上，通常是 http://localhost:3000 对于前端应用，和另一个指定的端口如 http://localhost:5000 用于后端服务。

应用案例和最佳实践

案例一：CRUD操作

为了展示如何在该框架基础上实现基本的 CRUD（创建、读取、更新、删除）操作，你可以创建一个新的 API 路由在 Express 后端，以及对应的前端组件来发送请求。例如，利用axios进行API调用：

前端发送GET请求示例：

import axios from 'axios';

async function fetchData() {
    const response = await axios.get('/api/data');
    console.log(response.data);
}

后端创建GET路由示例：

const express = require('express');
const router = express.Router();

router.get('/data', (req, res) => {
    // 假设从数据库获取数据...
    res.json({ message: "成功获取数据", data: [] });
});

module.exports = router;