使用 React 和 Express 实现全栈开发的实践-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的普及，Web 应用程序的开发变得越来越重要。在这个领域中，全栈开发已经成为了一个非常热门的话题。全栈开发是指开发人员能够同时处理前端和后端的技术栈。这种方法的优势在于能够更好地控制整个应用程序的架构，从而提高开发效率和应用程序的质量。

在本文中，我们将介绍如何使用 React 和 Express 实现全栈开发。React 是一个非常流行的 JavaScript 库，用于构建用户界面。而 Express 则是一个基于 Node.js 的 Web 应用程序框架，用于构建后端服务。我们将使用这两个工具来创建一个全栈应用程序。

准备工作

在开始之前，我们需要确保已经安装了 Node.js 和 npm。如果没有，请先安装它们。我们还需要安装一些必要的依赖项。在命令行中输入以下命令：

npm install --save react express body-parser cors

react：React 库
express：Express 框架
body-parser：用于解析请求正文的中间件
cors：用于处理跨域请求的中间件

创建项目

我们将使用 create-react-app 工具来创建 React 项目。在命令行中输入以下命令：

npx create-react-app my-app

这将创建一个名为 my-app 的新项目。接下来，我们将进入该项目的根目录，并在其中安装 Express 依赖项。在命令行中输入以下命令：

cd my-app
npm install --save express body-parser cors

接下来，我们将创建一个名为 server.js 的新文件。这是我们的后端服务的入口点。在 server.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(cors());

app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.listen(port, () => console.log(`Listening on port ${port}`));

这个文件将创建一个 Express 应用程序，并将其绑定到 5000 端口。我们还使用 body-parser 中间件来解析请求正文，并使用 cors 中间件来处理跨域请求。最后，我们定义了一个简单的路由，用于处理 GET 请求并返回一个 JSON 对象。

现在，我们已经设置好了后端服务。接下来，我们将修改 React 应用程序以使用该服务。

修改 React 应用程序

我们将在 React 应用程序中添加一个简单的表单，用于向后端服务发送 POST 请求。在 src 目录中创建一个名为 Form.js 的新文件。在该文件中添加以下代码：

// javascriptcn.com 代码示例
import React, { Component } from 'react';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '' };
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    fetch('/api/form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(this.state),
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error(error));
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
        </label>
        <label>
          Email:
          <input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default Form;

这个文件定义了一个名为 Form 的 React 组件。该组件包含两个输入框和一个提交按钮。当用户点击提交按钮时，将向后端服务发送 POST 请求，其中包含表单数据。我们使用 fetch 函数来发送请求，并将请求正文设置为 JSON 字符串。我们还使用 Promise 来处理响应，并将数据打印到控制台中。

接下来，我们将在 App.js 文件中使用该组件。在该文件中添加以下代码：

// javascriptcn.com 代码示例
import React, { Component } from 'react';
import Form from './Form';

class App extends Component {
  render() {
    return (
      <div>
        <h1>React + Express</h1>
        <Form />
      </div>
    );
  }
}

export default App;

这个文件定义了一个名为 App 的 React 组件。该组件包含一个标题和一个 Form 组件。现在，我们已经完成了 React 应用程序的修改。

运行应用程序

现在，我们已经完成了应用程序的开发。接下来，我们将运行它并查看结果。在命令行中输入以下命令：

npm start

这将启动 React 应用程序。现在，在浏览器中打开 http://localhost:3000，您将看到一个包含表单的页面。当您填写表单并点击提交按钮时，将向后端服务发送 POST 请求。在控制台中，您将看到从 Express 服务器返回的响应。

总结

在本文中，我们介绍了如何使用 React 和 Express 实现全栈开发。我们创建了一个名为 my-app 的新 React 项目，并在其中添加了一个名为 server.js 的后端服务。我们还创建了一个名为 Form 的 React 组件，用于向后端服务发送 POST 请求。最后，我们运行了应用程序并查看了结果。

全栈开发是一个非常有用的技能。它能够帮助开发人员更好地控制整个应用程序的架构，并提高开发效率和应用程序的质量。使用 React 和 Express，您可以轻松地实现全栈开发，并创建出令人印象深刻的应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656c9128d2f5e1655d4ec88a