React+Express 搭建一个全栈 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

React 和 Express 是两个非常流行的前端和后端框架，它们可以被用来搭建一个全栈 Web 应用。在这篇文章中，我们将会介绍如何使用 React 和 Express 创建一个全方位的 Web 应用，同时提供一些实用的示例代码。

什么是全栈 Web 应用？

全栈 Web 应用是指使用同一个技术栈来构建前端和后端的 Web 应用。这种应用可以实现数据的实时更新，并且可以更加高效地进行开发和维护。

React

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它被广泛应用于构建单页应用（SPA）和移动应用程序。React 的主要特点是组件化，即将 UI 拆分成独立的组件，每个组件都有自己的状态和生命周期方法。

以下是一个简单的 React 组件：

// javascriptcn.com 代码示例
import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default App;

这个组件包含一个计数器，每当用户点击按钮时，计数器就会加一。

Express

Express 是一个基于 Node.js 的 Web 应用程序框架。它提供了一些方便的方法来处理 HTTP 请求和响应，以及处理路由和中间件。Express 可以用于构建各种类型的 Web 应用程序，包括 RESTful API、单页应用程序和多页应用程序。

以下是一个简单的 Express 应用程序：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

这个应用程序将会在 http://localhost:3000 上监听请求，并返回一个字符串 Hello World!。

搭建全栈 Web 应用

现在我们已经了解了 React 和 Express，接下来我们将会介绍如何使用这两个框架创建一个全栈 Web 应用。

步骤一：创建 Express 应用程序

首先，我们需要创建一个 Express 应用程序。我们可以使用 express-generator 工具来创建一个基本的 Express 应用程序。在终端中执行以下命令：

$ npm install -g express-generator
$ express myapp
$ cd myapp
$ npm install

这个命令将会创建一个名为 myapp 的应用程序，并且安装所有的依赖项。

步骤二：添加 React 到 Express 应用程序

接下来，我们需要将 React 添加到 Express 应用程序中。为此，我们可以使用 create-react-app 工具来创建一个新的 React 应用程序。在终端中执行以下命令：

$ npx create-react-app client

这个命令将会在应用程序的根目录下创建一个名为 client 的 React 应用程序。

步骤三：配置 Express 服务器

现在我们需要配置 Express 服务器来提供 React 应用程序。我们可以在 app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'client/build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

这个代码将会在 http://localhost:3000 上启动一个 Express 服务器，并且提供了一个静态文件服务，将 React 应用程序的 build 目录映射到 / 路径。

步骤四：编写 React 组件

现在我们需要编写 React 组件来实现应用程序的功能。在 client/src 目录下创建一个名为 App.js 的文件，添加以下代码：

// javascriptcn.com 代码示例
import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
  }

  componentDidMount() {
    fetch('/api/message')
      .then(res => res.json())
      .then(data => this.setState({ message: data.message }));
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
}

export default App;

这个组件将会向 Express 服务器发起 HTTP 请求，并且将返回的消息显示在页面上。

步骤五：编写 Express 路由

现在我们需要编写 Express 路由来处理 HTTP 请求。在 routes 目录下创建一个名为 api.js 的文件，添加以下代码：

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

router.get('/message', (req, res) => {
  res.json({ message: 'Hello World!' });
});

module.exports = router;

这个路由将会监听 /api/message 路径，并且返回一个 JSON 对象 { message: 'Hello World!' }。

步骤六：将路由添加到 Express 应用程序中

最后，我们需要将路由添加到 Express 应用程序中。在 app.js 文件中添加以下代码：

const apiRouter = require('./routes/api');
app.use('/api', apiRouter);

这个代码将会将路由映射到 /api 路径。现在，我们可以启动应用程序：

$ npm start

这个命令将会在 http://localhost:3000 上启动应用程序。现在，我们可以在浏览器中访问应用程序，并且将会看到一个页面，上面显示了消息 Hello World!。

总结

在本文中，我们介绍了如何使用 React 和 Express 创建一个全栈 Web 应用。我们通过创建一个 Express 应用程序、添加 React 应用程序、配置 Express 服务器、编写 React 组件和 Express 路由，最终实现了一个简单的全栈 Web 应用。我们希望这篇文章对于那些想要学习如何构建全栈 Web 应用的人们有所帮助。

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