前后端分离下 React 的开发和部署-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 web 开发中，前后端分离的模式越来越流行。这种模式可以让前端和后端开发更加独立、灵活、高效，并且可以提高项目的可维护性和可扩展性。而 React 是当前最热门的前端开发框架之一，也是前后端分离开发中最佳的候选之一。本文将介绍前后端分离下 React 的开发和部署，包括如何创建、构建和部署一个 React 应用，并且会涉及一些实际应用中的常见问题和解决方案。

基础知识

在开始之前，我们需要先了解一些基础知识和工具：

Git：Git 是一个版本控制工具，它可以帮助我们管理项目的代码、历史记录和分支。可以在这里下载和学习 Git。
Node.js：Node.js 是一个基于 V8 引擎运行 JavaScript 代码的平台。它在开发前端应用和工具时非常有用。可以在这里下载和学习 Node.js。
npm：npm 是 Node.js 的包管理器，它包含了大量的开源库和工具。在本文中，我们将使用 npm 来管理 React 应用的依赖和构建过程。
React：React 是一个声明式、高效、可组合的前端开发框架，它可以帮助我们快速构建复杂的用户界面和交互效果。可以在官网学习和使用 React。

创建 React 应用

在开始开发之前，我们需要创建一个新的 React 应用。以下是创建一个基础 React 应用的步骤：

mkdir my-react-app
cd my-react-app

使用 npm 初始化一个新的项目：

npm init -y

安装 React、React DOM 和一些构建工具：

npm install --save react react-dom
npm install --save-dev webpack webpack-cli babel-loader babel-core babel-preset-env babel-preset-react

这些工具简单介绍：

webpack：构建工具，它可以将多个 JavaScript 文件打包成一个或多个 bundle 文件。
webpack-cli：webpack 的命令行接口工具。
babel-loader：用于在 webpack 中使用 Babel。
babel-core：Babel 的核心库，它可以分析和转换 ES6/ES7 代码。
babel-preset-env：Babel 的预设，用于将 ES6/ES7 转换成当前浏览器可以支持的 JavaScript 代码。
babel-preset-react：Babel 的预设，用于将 React 的 JSX 语法转换成普通的 JavaScript 代码。

创建一个 src 目录，然后在该目录下创建一个 index.js 文件：

mkdir src
touch src/index.js

在 index.js 文件中添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);

创建一个 public 目录，然后在该目录下创建一个 index.html 文件：

mkdir public
touch public/index.html

在 index.html 文件中添加以下内容：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

上面的代码中，我们将 bundle.js 文件导入到了 index.html 中，而这个文件将会由 webpack 包含所有的 React 代码打包成一个文件生成。

创建一个 webpack.config.js 文件：

touch webpack.config.js

在 webpack.config.js 文件中添加以下内容：

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      }
    ]
  }
};

上面的配置文件中，我们指定了入口文件为 src/index.js，输出文件为 public/dist/bundle.js，使用 babel-loader 和 babel-preset-env 和 babel-preset-react 将 JSX 和 ES6 代码转换成浏览器可以理解的代码。

添加一个启动命令：

在 package.json 文件中，添加以下脚本：

{
  "scripts": {
    "start": "webpack-dev-server --mode development --open"
  }
}

运行以下命令来启动应用：

npm start

现在，我们就可以在浏览器中访问 http://localhost:8080 来查看我们的 React 应用了。

部署 React 应用

当我们完成了开发，我们就需要将 React 应用部署到生产环境中。以下是一个简单的 React 应用部署的流程：

在本地构建应用：

npm run build

构建命令将生成用于部署的优化过的代码。这些文件将被输出到 public 目录下的 build 子目录中。

将应用部署到服务器：

可以使用 FTP 或 SCP 等工具将 build 目录中的文件上传到服务器上。

配置 web 服务器：

在服务器上，我们需要配置 web 服务器来提供 React 应用的服务。

如果使用的是 Apache，可以在 /var/www/html 目录下创建一个新的目录，然后将 build 目录下的文件移动到该目录中。然后可以在配置文件中添加以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

如果使用的是 Nginx，可以在 /etc/nginx/sites-available/ 目录下创建一个新的配置文件，然后将以下内容添加到该文件中：

// javascriptcn.com 代码示例
server {
  listen 80;
  server_name example.com;

  root /var/www/html/my-react-app/build;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

保存并退出配置文件，然后使用 systemctl 命令将 Nginx 重启：

sudo systemctl restart nginx

现在，我们已经将 React 应用成功地部署到了生产环境中。

总结

在本文中，我们介绍了前后端分离下 React 的开发和部署，包括如何创建、构建和部署一个 React 应用。我们学习了一些基础知识和工具，以及如何在本地构建和部署应用。希望本文对 React 开发者和前后端分离开发者有所帮助。

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