create-react-app + Nodejs (express) 服务器

JS

使用create-react-app和Node.JS（express）服务器开发全栈应用

在现代Web开发中，前后端分离的架构已成为主流。为了快速搭建一个React前端应用，并结合Node.JS后端服务器进行开发，我们可以使用create-react-app和Node.JS（express）来实现全栈应用的开发。

首先，我们需要安装create-react-app脚手架工具。在命令行中运行以下命令：

npx create-react-app my-app

这将在当前目录下创建一个名为my-app的React应用。

接下来，我们需要安装Node.JS和express框架。在命令行中运行以下命令：

npm install express

完成安装后，我们可以开始编写后端服务器的代码。在项目根目录下创建一个server.JS文件，并将以下代码添加到文件中：

Javascript
const express = require('express');
const app = express();
const port = 5000;
app.get('/api', (req, res) => {
  res.send('Hello from the backend server!');
});
app.listen(port, () => {
  console.log(<code>Server is running on port ${port}</code>);
});

以上代码创建了一个简单的express服务器，监听5000端口，并在访问/api路径时返回一条简单的消息。

现在，我们可以启动前后端服务器。在命令行中分别运行以下命令：

npm start

这将启动前端React应用。同时，在新的命令行窗口中运行以下命令：

node server.JS

这将启动后端服务器。

现在，我们可以在浏览器中访问http://localhost:3000来查看前端应用，以及访问http://localhost:5000/api来测试后端服务器是否正常工作。

接下来，我们可以根据项目需求在前端React应用中编写业务逻辑和UI组件，同时在后端服务器中编写API接口和数据库交互等功能。这样，我们就可以实现一个完整的全栈应用。

案例代码：

在下面的示例中，我们将在前端React应用中创建一个简单的待办事项（Todo）应用，并通过后端服务器实现待办事项的存储和获取功能。

首先，在前端React应用的src目录下创建一个名为TodoList.JS的文件，并将以下代码添加到文件中：

Javascript
import React, { useState, useEffect } from 'react';
const TodoList = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    fetch('/api/todos')
      .then(response => response.JSon())
      .then(data => setTodos(data));
  }, []);
  return (
    <div>
      <h2><strong>Todo List</strong></h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

以上代码定义了一个名为TodoList的React组件，它通过useState和useEffect钩子来管理待办事项的状态和获取数据。在组件的渲染过程中，它会向后端服务器发送一个GET请求来获取待办事项列表，并将数据渲染为一个无序列表。

接下来，我们需要在后端服务器中定义一个用于处理待办事项的API接口。在server.JS文件中添加以下代码：

Javascript
const todos = [
  { id: 1, title: 'Finish homework' },
  { id: 2, title: 'Go grocery shopping' },
  { id: 3, title: 'Clean the house' }
];
app.get('/api/todos', (req, res) => {
  res.JSon(todos);
});

以上代码定义了一个名为/api/todos的GET接口，它返回一个包含待办事项的数组。在这个示例中，我们使用了一个硬编码的待办事项数组，实际项目中可以通过数据库或其他方式来获取数据。

现在，我们可以在前端React应用中使用TodoList组件来展示待办事项列表。在src/App.JS文件中将以下代码添加到文件中：

Javascript
import React from 'react';
import TodoList from './TodoList';
const App = () => {
  return (
    <div>
      <h1><strong>Todo App</strong></h1>
      <TodoList />
    </div>
  );
};
export default App;

以上代码在App组件中渲染了一个标题，并使用TodoList组件来展示待办事项列表。

现在，我们可以在浏览器中访问http://localhost:3000来查看待办事项应用的效果。页面将显示一个标题和待办事项列表，列表中的数据来自后端服务器。

：

本文介绍了如何使用create-react-app和Node.JS（express）服务器来开发全栈应用。我们通过创建一个简单的待办事项应用来演示前后端的协同工作。通过这个案例，你可以了解到前后端分离开发的基本流程，并学习如何通过API接口来实现数据的传递和交互。希望本文对你有所帮助！