npm 包 rndmem-npm-skeleton 使用教程-JavaScript中文网-JavaScript教程资源分享门户

rndmem-npm-skeleton 是一个基于 React 的 npm 包，它为我们提供了一个完整的、基础的 React 应用框架，旨在让初学者快速掌握 React 应用的结构和开发流程，并为开发者提供一个可扩展和可重用的架构。

本篇文章为大家介绍 rndmem-npm-skeleton 的使用教程，包含安装、开发环境搭建、关键功能介绍等方面，希望能为您的 React 开发之路带来帮助。

安装 rndmem-npm-skeleton

首先，我们需要全局安装 create-react-app，这个命令行工具可以快速生成 React 应用的基础框架。

npm install -g create-react-app

然后，我们可以在任意目录下使用 create-react-app 命令来新建一个 React 应用：

create-react-app my-app

接下来，我们需要安装 rndmem-npm-skeleton，在 my-app 目录下，运行以下命令即可：

npm install rndmem-npm-skeleton

开发环境搭建

安装好 rndmem-npm-skeleton 之后，我们需要启用一些必要的配置以支持它的运行。

首先，我们需要在 my-app/src 目录下创建一个名为 App.js 的文件，并在其中引入 rndmem-npm-skeleton 的模块：

-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ----------------------

-------- ----- -
  ------ -
    --
      --------- --
    ---
  --
-

------ ------- ----

然后，在 my-app/public/index.html 文件中引入 Font Awesome 的样式文件，这是 rndmem-npm-skeleton 用到的一个字体库：

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
  integrity="sha512-KukgPecv/af0KZ8OHpTtTjLEaTnmZWa77VPwb+sGhACMIi/qzKQsDZlzs796sEtb+aFChX97iRvbc4M4+LFQKw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

最后，在 my-app/src/index.js 中引入 App.js 并将其渲染：

-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------

----------------
  --
    ---- --
  ----
  -------------------------------
--

现在，我们已经完成了 rndmem-npm-skeleton 的开发环境搭建了。运行以下命令，你就可以看到 HomePage 的效果了。

npm start

关键功能介绍

基础结构

rndmem-npm-skeleton 的基础结构如下：

-- -------------------- ---- -------
- ----
  - -----------
    - -------
      - ---------
      - ----------
    - -------
      - ---------
      - ----------
    - ---------
      - -----------
      - ------------
  - ------
  - -------
- --------

在 components/ 目录下，我们可以发现 Footer/、Header/ 和 HomePage/ 三个文件夹，分别对应了应用的底部、顶部和主页。

在 src/App.js 中，我们可以看到它使用了 BrowserRouter 来确保每个页面都有自己的地址，支持浏览器前进和后退按钮。同时，它还包含了三个组件：Header、Footer 和 Switch。

在 src/components/Header/Header.js 中，我们可以看到它包含一个标题和一个导航栏，可以让应用提供更多的导航选项。

在 src/components/HomePage/HomePage.js 中，我们可以看到它是一个例子页面，只包含了一些样式和一些演示性的信息。

布局系统

rndmem-npm-skeleton 还提供了一个基于 Flexbox 的布局系统，它可以使我们快速构建灵活的 UI 界面，并支持响应式布局。

Flexbox

Flexbox 布局是一种灵活的布局方式，它可以让我们更好地控制元素之间的距离、方向和对齐方式，从而实现更好的界面效果。

在 rndmem-npm-skeleton 中，我们可以使用 flex-row、flex-column、flex-wrap 等类名来控制布局方式。

-- -------------------- ---- -------
---- ---------------------
  ---- -----------------------------
  ---- -----------------------------
  ---- -----------------------------
------

---- ------------------------
  ---- -----------------------------
  ---- -----------------------------
  ---- -----------------------------
------

响应式布局

rndmem-npm-skeleton 还提供了一些响应式布局工具类，可以根据屏幕宽度来调整元素的布局。

<div className="col-md-6 col-lg-4">Column</div>

在上面这个例子中，元素在小于 768px 的屏幕中的宽度为 100%，在 768px 到 991px 的屏幕中的宽度为 50%，在大于 991px 的屏幕中的宽度为 33.3%。

表单和验证

rndmem-npm-skeleton 使用 formik 和 yup 库提供表单和验证功能。formik 提供了一个非常好的表单控制包装机制，并且自动激活异步验证器。与此同时，yup 提供了一个丰富、清晰的验证规则。

以下是 randmem-npm-skeleton 中一个简单的登录表单的示例：

-- -------------------- ---- -------
------ - ------- ------------- ----- - ---- ---------
------ - ------- ------ - ---- ------

----- ---------------- - ----------------
  ------ ----------------------- -----------------------------
  --------- -----------------------------
---

----- --------- - -- -- -
  ----- -------- - -------- - ------------- -- -- -
    --------------------
    ---------------------
  --

  ------ -
    -------
      ---------------- ------ --- --------- -- --
      -----------------------------------
      -------------------
    -
      --- ------------ -- -- -
        ------
          ------ -----------------------------
          ------ ----------- ------------ --
          ------------- ------------ --

          ------ -----------------------------------
          ------ --------------- --------------- --
          ------------- --------------- --

          ------- ------------- ------------------------
            ------
          ---------
        -------
      --
    ---------
  --
--

在这个例子中，我们使用了 Formik 组件来包装一个表单，并为表单设置了 initialValues 和 onSubmit 回调函数。validationSchema 定义了输入值必须要符合的规则，包括对空值的处理和对 email 格式的验证。在 LoginForm 中，我们定义了两个输入字段，分别是 email 和 password，使用了 Field 组件，来包装表单输入框，并使用了 ErrorMessage 组件，来显示错误信息。

单元测试

在 rndmem-npm-skeleton 中，我们使用 Jest 和 Enzyme 库进行单元测试。在每个组件中，我们提供了一些测试用例，以确保组件在不断发展的代码环境中，仍然能够保持它的功能完整性和稳定性。

以下是一个简单的单元测试用例，测试了 LoginForm 是否正常工作：

-- -------------------- ---- -------
------ - -------- ---------- ------ - ---- -------------------------
------ - ------ - ---- ---------
------ - --- - ---- -----------------------
------ --------- ---- --------------

-------------------

--------------------- -- -- -
  ----------- ----------- -- -- -
    ----- - ---------------- - - -------
      ------- ------------------ ------------ -- ----
        --- -- ---------- ---
      ---------
    --

    -----------------------------------------------
    --------------------------------------------------
  ---

  --------------- -- -- -
    --- ---------

    ----- - --------------- --------- - - -------
      ------- ------------------ ------------------ -- --------- - ---------
        --- -- ---------- ---
      ---------
    --

    -----------------------------

    ----------------------------------------- - ------- - ------ --------- - ---
    -------------------------------------------- - ------- - ------ ----------- - ---
    ------ -- --------------------------------

    -----------------------------

    ----------------------------------------- - ------- - ------ ------------------- - ---
    ------ -- --------------------------------

    ------------------------------

    -----------
  ---
---

在这个例子中，我们使用了 render 函数来渲染对应的测试组件。接着，我们使用了 jest 函数库中的一些函数，如 expect、fireEvent、act 等，来模拟页面组件的交互和各种状态的变化，最终来验证组件是否符合预期。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600557e181e8991b448d4ef9