npm 包 rehace 使用教程

阅读时长 4 分钟读完

什么是 rehace

rehace 是一个为 React 和 React Native 应用定制的快速开始库。通过 rehace,你可以很容易地初始化一个 React 或 React Native 项目,并且在项目开始之初就可以使用很多经过管理和封装的开源库。

如何使用 rehace

安装

在开始之前,请先确保你已经安装了 Node.js 和 npm。

使用以下命令安装 rehace:

创建项目

使用以下命令创建一个新的 React 项目:

等待一段时间,直到 rehace 自动安装并配置好项目。完成之后,进入项目目录并启动开发服务器:

你将在浏览器访问 http://localhost:3000,并看到一个欢迎页面。

集成 Ant Design

Ant Design 是一个流行的 React UI 库。使用 rehace,你可以轻松地集成 Ant Design 到你的项目中。

使用以下命令安装 Ant Design:

然后在项目的 src/App.js 文件中导入 Ant Design 并使用组件:

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

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

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

使用 Redux

Redux 是一个流行的 JavaScript 状态管理库。使用 rehace,你可以轻松地使用 Redux 并集成到项目中。

使用以下命令安装 Redux:

接着,在项目的 src/index.js 文件中创建 Redux store:

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

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

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

然后,在项目的 src/App.js 文件中,使用 connect 函数连接组件与 Redux store:

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

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

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

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

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

最后,在项目的 src/reducer.js 文件中编写 Redux reducer:

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

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

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

现在你已经成功集成了 Redux 并可以在项目中使用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005726a81e8991b448e89e6

纠错
反馈