在本文中，将探讨如何为React和Redux应用程序搭建环境，并深入了解通过模板创建的应用构建块。例如，要创建一个React应用程序，可以直接在终端执行create-react-app命令，借助Node.js的帮助，但可能并不完全理解基本应用程序，因为不知道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。
以下是将添加到书店应用程序中的依赖项。
JavaScript "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是一个用于管理和更新应用程序状态的模式和库，使用称为“操作”的事件。可以在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>
JavaScript：
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: {
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编译器，它支持所有新浏览器的转译现代JS（ES5、ES6等）和编译JSX到JS。
如果想尝试Babel并了解JSX是如何转译的，可以访问并尝试一下。😊
让开始在package.json中添加Babel配置，并添加一个预设。现在的问题是什么是预设？？
答案是：Babel中的预设可以被描述为一组用于支持特定语言功能的插件。Babel默认使用的一些预设，如ES6、javascript、jsx...
"babel": {
"presets": [
"babel-preset-react-app"
]
}
FYI。还可以在.babelrc文件中配置Babel。
添加脚本：现在让设置脚本来启动书店应用程序。
"scripts": {
"start": "webpack-dev-server --config webpack.config.dev.js --port 3000",
},
就像添加了启动来运行应用程序一样，可以添加多个脚本来包括运行测试用例或调试，或者可能只是编译。
现在，如果尝试通过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
}
添加正确后，应该能够看到类似以下内容：
让再次尝试运行，并且在成功编译后，可以导航到。
最后是“Hello World”。