什么是 create-reason？
create-reason 是一个开源的 npm 包，它是一个用于创建 ReasonML 项目的脚手架工具。ReasonML 是一种面向函数、高稳定性和可靠性的类型安全的 JavaScript 替代品，它具有与 JavaScript 互操作性的优点。
使用 create-reason 可以简单快速地创建 ReasonML 项目，并且自动集成了一些流行的工具和库，例如 React、Webpack、HMR 等。在此之上，开发者可以方便地搭建出一套高效稳定的前端项目。
如何使用 create-reason？
安装 create-reason
在开始使用之前，您需要安装 Node.js、Yarn 和 ReasonML 并且保证已经正确配置。命令行输入以下命令来安装 create-reason：
yarn global add create-reason
创建项目
在安装完成 create-reason 之后，我们可以使用它来创建一个新的 ReasonML 项目。在命令行输入以下命令：
create-reason my-app
其中，my-app 为您新建的项目名称。该命令将新建一个名为 my-app 的项目，并进行依赖安装。在依赖安装完成后，输入以下命令来启动开发服务器：
cd my-app && yarn start
此时，您可以在浏览器中访问 http://localhost:8080 来查看项目。如出现 "Hello, Reason!" 的欢迎界面，说明您已经成功启动了项目。
create-reason 的目录结构
在您创建好项目之后，my-app 项目的目录结构如下：
-- -------------------- ---- ------- ------- --- ------- - --- ----------- - --- ---------- - --- ------------- --- ---- - --- ------ - --- -------- - --- ---------- --- ------------ --- --------- --- ------------- --- ----------------- --- ---------
其中，各文件及目录的作用如下：
public/：存放静态资源文件，例如图片、图标等。src/：存放应用程序源代码。App.re：应用程序组件。Index.re：应用程序入口文件。index.html：应用程序主页面。
package.json：项目依赖配置文件。README.md：项目说明文档。bsconfig.json：ReasonML 项目配置文件。webpack.config.js：Webpack 配置文件。yarn.lock：锁定项目依赖版本的文件。
如何添加依赖
通过使用 create-reason 创建的项目已经自动安装了 React、ReactDOM、ReasonReact 等依赖，但在实际情况中，您可能还需要添加其他的依赖。
在 ReasonML 中，大多数 NPM 包都可以直接使用。在命令行输入以下命令来添加依赖：
yarn add <package-name>
其中，<package-name> 指您需要安装的包名，例如安装 axios 库：
yarn add axios
当然，ReasonML 还可以使用 JavaScript 的库，如 moment.js 等。将 JavaScript 库转化为 ReasonML 库的方式可以参考官方文档。
如何开发 ReasonML 应用程序
在本文前文中，我们已经创建了一个名为 my-app 的 ReasonML 项目，接下来，我们将开始开发该项目。
修改应用程序组件
在 src/App.re 文件中，我们可以看到以下代码：
let component = ReasonReact.statelessComponent("App");
let make = _children => {
...component,
render: _self => <h2>Hello, Reason!</h2>,
};其中，component 定义了应用程序组件，make 函数则用于渲染组件。
我们将应用程序组件修改为：
-- -------------------- ---- -------
--- --------- - --------------------------------------
--- ---- - --------- -- -
-------------
------- ----- --
-----
---------- ------------
------ ------- ---- -- --------------------------------------------------------------
-------
--修改后，会在页面上展示当前日期。
添加新页面
除了修改应用程序组件，我们还可以添加新的页面。在 src/ 目录下新建一个名为 HomePage.re 的文件，添加以下代码：
-- -------------------- ---- -------
--- --------- - -------------------------------------------
--- ---- - --------- -- -
-------------
------- ----- --
-----
----------- -- -------------
-------
--在该文件中，我们定义了一个名为 HomePage 的组件，用于展示我们要添加的新页面。
添加页面路由
在 ReasonReact 中，我们使用 React Router 来实现页面路由。在 src/App.re 文件中，我们可以看到以下代码：
-- -------------------- ---- -------
--- --------- - --------------------------------------
--- ---- - --------- -- -
-------------
------- ----- --
--------
------------------
------ ----- -------- --------------- --
-------------------
----------
--
--- ---------------- - ---------------------------------------------------
--- -------------------- - -------- -- -
--------------------
------- ---- --
-----
-----------------------------
-------
--其中，我们使用了 Router、ComponentWrapper 和 Route 组件来实现路由。
我们将这些代码修改为：
-- -------------------- ---- -------
--- --------- - --------------------------------------
--- ---- - --------- -- -
-------------
------- ----- --
--------
------------------
------ ----- -------- --------------- --
------ ---------------- ------------------ --
-------------------
----------
--
--- ---------------- - ---------------------------------------------------
--- -------------------- - -------- -- -
--------------------
------- ---- --
-----
----
--------- -----------------------
--------- -----------------------------------
-----
-----------------------------
-------
--在修改后的代码中，我们添加了一个名为 HomePage 的路由，并且在渲染组件 ComponentWrapper 中，添加了顶部导航栏，用于跳转到新的页面。
总结
本文介绍了如何使用 create-reason 创建 ReasonML 项目，并且详细讲解了在该项目中添加依赖、修改组件、添加新页面和路由等操作。通过本文的学习，您可以快速上手 ReasonML，并且熟悉使用 create-reason。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1281e8991b448e6d1c