65.9K
CodeProject 正在变化。 阅读更多。
Home

从头开始设置 React 和 Redux 开发环境

NitinShrivastava
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2020 年 10 月 28 日

CPOL

6分钟阅读

viewsIcon

8876

downloadIcon

167

一个书店应用程序的 React 和 Redux 开发环境的基本骨架。

引言

本文档旨在帮助初学者理解 React 和 Redux 应用程序的环境设置，并了解使用模板创建的应用程序的构建块的细节。例如，要创建 React 应用程序，我们可以在 Node 的帮助下在终端中直接执行 create-react-app，但我们可能无法完全理解基本应用程序，因为我们不知道添加到 package.json 文件中的所有这些包。让我们通过一个简单的书店应用程序来揭示这些概念。

背景

大约一年前，我们采用了基于 React 和 Redux 库的新框架，不幸的是，我们团队中没有人对此非常了解。因此，为了学习，人们开始创建带有现成模板的简单应用程序，但没有人知道简单应用程序中包含哪些包，应用程序如何通过不同的脚本进行修改，或者 Webpack 能为我们的应用程序做什么。要了解更多 React 基础知识，请访问 此页面。

必备组件

在您的开发机器上安装 NodeJS 和 Visual Studio Code。

设置基础环境

为了创建 ReactJS 入门应用程序，Facebook 提供了一个入门模板来设置基本的 React 开发环境。所以，让我们通过执行以下命令来创建我们的书店应用程序：

npx create-react-app book-store

完成后，我们将看到如下所示的文件夹结构。我们可以看到 package.json 中的文件和依赖项，其中一些文件对我们是隐藏的。如果您想查看它，可以尝试 npm eject。但是，我们不需要查看它，因为无论如何，我们将自己设置所有内容。

现在，在终端中，我们可以进入 package.json 所在的应用程序目录并运行应用程序：

cd book-store

npm start

然后我们就可以看到应用程序在端口 3000 上运行。这就是我们如何使用现成的入门模板设置 ReactJS 开发环境。

或者，要使用 Redux 设置 ReactJS，我们可以直接执行 npx create-react-app book-store --template redux，它将添加 Redux 依赖项和正确的文件结构。

揭秘生成的应用程序

现在让我们从头开始设置我们的环境。第一步是删除 src 文件夹中生成的所有内容。或者，我们可以创建一个全新的 src 文件夹和一个 package.json 文件。

以下是我将添加到我的书店应用程序中的依赖项：

"dependencies": {
"@reduxjs/toolkit": "^1.4.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"bootstrap": "^4.3.1",
"immer": "~2.1.3",
"prop-types": "^15.7.2",
"react-router-dom": "^5.0.0",
"react-toastify": "^4.5.2",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
}

现在让我们深入了解并添加所需的依赖项。

什么是 Redux？

这是来自 Redux 站点的 Redux 定义：Redux 是一个用于管理和更新应用程序状态的模式和库，使用称为“actions”的事件。您可以在 Redux 网站 此处找到何时何地使用它的信息。

我将不介绍定义，因为本文档的范围和意图主要是揭示已在生成的应用程序中使用过的内容，以及我们如何自行添加以获得更好的清晰度。

添加 Redux

要将 Redux 添加到我们的应用程序中，我们可以执行以下命令：

npm install redux

npm install react-redux

了解哪些依赖项用于运行应用程序，哪些用于开发，这一点也很重要。要添加依赖项，我们可以执行以下命令：

npm install <package-name> [--save-prod]

npm install <package-name> --save-dev

--save-prod 标志会将您安装的包添加到“dependencies”部分，而 --save-dev 将创建一个名为“devDependencies”的新部分。

首先，让我们添加 index.html 和 index.js 文件。

让我们添加一些基本的 HTML 样板代码。

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Book Store</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

import React from "react";
import { render } from "react-dom";

function HelloWorld() {
  return <p>Hello World!!!</p>;
}

render(<HelloWorld />, document.getElementById("app"));

配置和理解 Webpack

Webpack 是一个打包器，用于最小化 JS 并方便添加各种插件，允许我们根据文件扩展名添加规则。

现在让我们将 webpack 添加到我们的应用程序中并进行配置。

创建一个名为 webpack.config.dev.js 的文件用于开发环境，并开始添加以下代码。这只是一个命名约定，用于区分开发、生产或其他任何我们需要的环境的 webpack。

首先，我们将使用 commonJS 语法导入 webpack、path 和 “html-webpack-plugin”。

const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
process.env.NODE_ENV = "development";

添加输出

 output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/",
    filename: "bundle.js",
  },

添加开发服务器配置

 devServer: {
    stats: "minimal",
    overlay: true,
    historyApiFallback: true,
    disableHostCheck: true,
    headers: { "Access-Control-Allow-Origin": "*" },
    https: false,
  },

现在我们将添加我们导入的 HtmlWebpackPlugin。

plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      favicon: "src/favicon.ico",
    }),
  ],

Module 指定了我们需要为各种文件扩展名添加哪些规则。所以，让我们现在添加模块，如下所示：

  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"] },
      { test: /(\.css)$/, use: ["style-loader", "css-loader"] },
    ],
  },

在上面的规则配置中，我为 .js 和 .jsx 添加了规则，其中 node_modules 文件夹内的所有具有这些扩展名的文件都将被排除，并且 babel-loader 将允许使用 babel 转译我们的 JS 和 JSX 文件。同样，我们可以添加 style-loader 和 css-loader 来将 CSS 注入 DOM 并随后将 CSS 导入我们的组件。还有其他加载器，如 sass-loader、less-loader、json-loader 等，我们可以根据我们的需求使用它们。但现在，为了保持简单，我将不使用其他加载器。

最后，我们的 webpack.config.dev.js 应该如下所示：

配置 Babel

Babel 是一个 JavaScript 编译器，它支持以下功能以兼容所有新浏览器：

  1. 转译现代 JS（ES5、ES6 等）
  2. 将 JSX 编译为 JS

如果您想玩转 Babel 并了解 JSX 如何被转译，您可以访问 https://babel.node.org.cn/ 并尝试一下。😊

所以，让我们开始在 package.json 中添加 Babel 配置并添加一个预设。那么现在的问题是，什么是预设？？

答案如下：

Babel 中的预设可以被描述为一组用于支持特定语言功能的插件。Babel 默认使用一些预设，例如 ES6、javascript、jsx……

 "babel":{
    "presets":["babel-preset-react-app"]
  }

供您参考，我们也可以在 .babelrc 文件中配置 Babel。

添加脚本

现在让我们设置脚本来启动我们的书店应用程序。

"scripts": {
    "start": "webpack-dev-server --config webpack.config.dev.js --port 3000"
  },

就像我们添加了 start 来运行应用程序一样，我们可以添加多个脚本来包括运行测试用例、调试或者可能只是编译。

现在，如果我们尝试通过 npm start 启动应用程序，我们会看到一个关于 linting 的错误。

配置 ESLint

配置 linting 非常重要，因为这样可以使错误易于理解且易于修复。所以，让我们将 eslint 配置到我们的应用程序中。同样，我们可以通过两种方式进行设置。要么在 .eslintrc 文件中，要么为了更好地掌握，在 package.json 文件中。

"eslintConfig": {

    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:import/errors",
      "plugin:import/warnings"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "node": true,
      "es6": true,
      "jest": true
    },

    "rules": {
      "no-debugger": "off",
      "no-console": "off",
      "no-unused-vars": "warn",
      "react/prop-types": "warn"
    },

    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "root": true
  }
}

添加正确后，您应该能看到类似如下的内容：

让我们再次尝试运行，在成功编译后，我们可以导航到 https://:3000。

最终是“Hello World”。

摘要

所以，在这篇文章中，我们了解了如何通过了解 package.json 的组成来创建一个 React 应用程序开发环境。以及为了使应用程序结构更好而添加了哪些依赖项。接下来，我们将创建一个简单的书店应用程序，并配置 Redux 与 React。

历史

  • 2020 年 10 月 28 日：初始版本。
© . All rights reserved.