介绍
在前端开发中，使用 React 和 MobX 可以让代码更易于维护和开发。但是，在配置工具链时会是一项挑战，特别是当你想要集成多个工具时。为了解决这个问题，@gigafied/neutrino-preset-react-mobx npm 包为我们提供了一整套 React 和 MobX 的配置和插件，使我们可以轻松地创建和配置整个 React 和 MobX 工具的项目。
安装和使用
首先，我们需要一个准备好的 Node.js 环境和 npm 包管理器。然后，在你的控制台中运行以下命令，安装 @gigafied/neutrino-preset-react-mobx：
npm install --save-dev @neutrinojs/webpack @gigafied/neutrino-preset-react-mobx
接下来，我们将创建一个新的 React 和 MobX 项目。在你的项目目录中创建一个 src 文件夹，在其中创建一个 index.js 文件和一个 stores 文件夹。在 index.js 文件中编写 React 组件，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- -------------
------ --- ---- --------
------ ------------ ---- ------------------------ -- ----------
----------------
--------- ----------------------------
---- --
------------
-------------------------------
--在 stores 文件夹中创建一个 counterStore.js 文件来存储你的 MobX 状态。在其中创建一个类并导出，例如：
-- -------------------- ---- -------
------ - --------------- ----------- ------ - ---- -------
----- ------------ -
----- - --
------------- -
-------------------- -
------ -----------
---------- -------
---------- -------
---
-
----------- -
-------------
-
----------- -
-------------
-
-
------ ------- --- ---------------接下来，在你的项目根目录中创建一个 .neutrinorc.js 文件，并将以下内容复制到文件中：
const reactMixin = require('@neutrinojs/react');
const reactMobxMixin = require('@gigafied/neutrino-preset-react-mobx');
module.exports = {
use: [reactMixin(), reactMobxMixin()],
};现在，我们已经在我们的项目中成功集成了 @gigafied/neutrino-preset-react-mobx。
运行示例
为了演示示例，我们可以在 App.js 文件中对前面创建的计数器进行操作，例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ------ - ---- -------------
----- --- - -----------------------
----------- ------------ -- -- -
-----
---------- -------------------------
------- ----------- -- ------------------------------------
------- ----------- -- ------------------------------------
------
--
--
------ ------- ----现在，我们可以运行 npm start 命令，查看我们的示例项目，打开 http://localhost:5000。
结论
@gigafied/neutrino-preset-react-mobx 的安装和配置非常简单。使用该工具，我们可以快速创建和配置一个全栈 React 和 MobX 项目，并从配置的繁琐和困难中解放出来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bdd81e8991b448d9847