创建你自己的 React Boilerplate - 适合初学者

嗯，我使用 React 已经有一段时间了，仍在学习中，感觉很棒。我们都明白，在开始使用任何框架或库之前，理解基本概念是多么重要。

通常情况下，即使是初学者，我们也倾向于在不了解其工作原理的情况下就开始学习，不去了解实际用途、花哨的东西等等，嘿You are not alone!

但有时，及时回过头来尝试理解底层代码也是件好事。市面上有大量的样板文件，它们能够为项目奠定坚实的基础，从而真正助力项目启动。更棒的是，这些样板文件大多是由行业专家构建的。

考虑到我过去的经验，我曾经参与过多个 React 项目；所以我们迟早要克服对自己的设置package.json和webpack配置的恐惧。

因此，在这里我们将尝试设置我们自己的样板，或者您可以说我们自己的React项目设置方式，其中包含一些通常会在某些时候使用的有趣包。

现在，为了构建我们的样板，我们首先需要了解的是package.json。

什么是 package.json 以及为什么我们需要它

该package.json文件是 JavaScript（Node）生态系统的重要组成部分。它就像是开发人员在 Node.js 开发中迈出的第一步。此外，它还有助于简化流程，管理项目的软件包。可以说，它本质上是一个清单文件，包含项目的名称、描述、软件包版本等元数据（所有内容都集中在一个地方）。

设置 package.json

通过输入（即创建）来定义元数据package.json始终是一种选择，但如果您正在设置新项目，则无需这样做。相反，有一些现有的方法可以命令化它。我们可以使用标准包管理器（例如NPM 和 YARN），因为它们可以帮助以交互方式创建/更新package.json文件。

你一定听说过NPM 和 YARN，但在本文中，我们将使用Yarn来设置 React 样板。如果你想了解它们之间的区别，可以点击这里查看。

接下来，让我们尝试用最简单的方式解释 Yarn

Yarn是一个包管理器，它允许您使用来自世界各地的社区开发的代码，从而最终使构建解决方案变得更容易。

这种功能的集合就是所谓的包。

为了进行设置package.json，Yarn提供了一个初始化命令，它将为您提供一种有关项目的问卷，而这往往是您项目的元数据。

// Run `yarn init` in terminal.
> yarn init

填写所有必需信息后，它将package.json在项目目录的根目录下创建一个文件。它应该如下所示：

这对我们意味着什么？

我们来一一说一下：

name：包含我们包的名称，不允许使用空格，而是小写字母，并用连字符/下划线分隔。例如：react- boilerplate。😊
version：这是任何类型模块的标准元数据，其格式应为 xxx（通常以 1.0.0 开头）。它遵循语义版本控制 (semver)。点击此处了解更多信息。
描述：这只是对你的项目/模块的人性化描述。它可以帮助开发人员快速了解项目或模块的意图。
main：这可以作为引导文件，即应用程序启动时的入口文件或查找文件。通常情况下index.js是这样，但是否更改则由我们决定。
作者：这通常是关于谁编写项目/模块的信息，可以是姓名、电子邮件地址等。
license：这解释了项目/模块所属的许可证。可能是 MIT、ISC 等。

虽然您可能不会在 package.json 文件中看到其他一些问题，但可以添加如下内容：

存储库 URL：这里我们可以提及托管代码的 URL，以便开发人员可以检查更多详细信息。
private：如果设置为 true，则您将无法向社区公开发布您的项目/模块。防止意外发布。

现在我们了解了package.json文件的基本元数据，让我们继续设置我们的样板（该帖子就是为此目的而设计的😉）。

设置最小的 React 样板

快速提示：要使用YARN添加包，我们可以使用yarn add <package_name>，yarn add --dev <package_name>（作为开发依赖项添加）类似地删除；使用yarn remove <package_name>

安装 React 和 ReactDOM：React（Javascript 库）包仅包含定义 React 组件、状态、props（所有React的内容）所需的代码，其中 React DOM 作为 Web 的 React 渲染器，它作为 React 和 DOM 之间的粘合剂。如果您查看package.json文件，则应该在项目下列出React和ReactDOMdependencies。这表明，现在您的项目依赖于React和ReactDOM。您可能已经注意到在项目的根目录下创建了一个新的目录node_modules。这是您安装的软件包的保存位置。如果您检查，应该在node_modules下有一个React目录，它有助于为应用程序运行 React。要使用 React 功能，您可能需要将其导入到文件中，如下所示：.js(x)
Webpack：简单来说，它是一个打包工具，可以打包你的文件、图片、资源、脚本、样式和模块依赖项。它接收带有依赖项的模块，并输出浏览器可以理解的打包代码。我们可以使用Yarn作为开发依赖项

来安装 Webpack ：
Babel：在使用 React 时，我们通常遵循ES6。由于旧版浏览器无法理解Class关键字、import语句等语法。为了将这些转换为浏览器可以理解的 ES5，我们需要 Transpiler。这就是Babel图中所示的。

您可能在想，那么 Webpack 有什么用？

Webpack 没有将代码从 ES6 转换为 ES5 的能力，但它有加载器的概念，它有助于转换代码并输出与浏览器兼容的代码。

我们将使用的加载器是babel-loader内部使用的Babel，需要一定级别的配置/预设，即babel preset env（用于将代码从 >=ES6 转换为 ES5）和babel preset react（用于将.Jsx代码转换为 ES5）。

让我们安装并配置 babel 和所需的依赖项：要完成设置，我们需要创建一个名为的文件并定义如下配置：要设置并使其作为 web pack 加载器工作，我们需要在项目根目录下的文件中定义如下配置：如果我们想解码配置，那么它只是告诉 Webpack 接受 js、jsx 代码并使用 babel 进行转译并输出与 ES5 浏览器兼容的代码。

.babelrc

babel-loaderwebpack.config.js
HTML Webpack 插件：此插件用于生成 HTML 文件，最终用于 Webpack 生成的打包文件。这意味着，当 Webpack 创建一个新的 JavaScript 打包文件时，它还需要一个 HTML 文件，以便在客户端提供最新的更改。

让我们将插件和加载器安装为开发依赖项：等等，HTML 插件还没完成，我们还需要使用 Webpack 进行配置。之前我们定义了代码的转译，现在我们需要定义生成 HTML 的代码。

babel-loaderhtml-loader

// Load the plugin in your webpack.config.js file.
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      // Add HTML loader to serve HTML files.
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  // Call the Plugin here.
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ]
};

设置几乎完成了，但有一个缺点。每当我们对代码进行任何更改时，我们都需要手动刷新页面才能看到更改。为了解决这个问题，我们可以安装另一个名为webpack-dev-serverdev 依赖项的包。

为了使其工作，可以直接使用 webpack 命令，或者最好修改package.json并添加：

// Open flag is for opening the browser as soon as we run `yarn start`.
// Hot flag is for hot reloading i.e refresh the page as soon as you make any change to the code.
"scripts": {
  "start": "webpack-dev-server --config webpack.config.js --open --hot",
  "build": "webpack --config webpack.config.js"
},

运行 React 应用程序

首先创建一个名为的文件夹src/，其中将包含几个文件，例如index.js（渲染应用程序）和App.js（应用程序内容）。

这只是一个暴露一些静态文本的愚蠢组件：

这是导入我们刚刚创建的哑组件并在页面上渲染，基本上是在元素 ID 上注入react-app-container。

现在，您可以使用以下方式启动您的应用程序：

> yarn start

你的终端应该会出现类似这样的内容：

一切就绪。

您可以在此处查看完整文件夹结构的样板。

谢谢阅读。😃
访问我的博客查看原文。

鏂囩珷鏉ユ簮锛�https://dev.to/lhuria94/creating-your-own-react-boilerplate-for-beginners-4ni7