Halogen-01-指南

Halogen指南

Halogen是一个声明式的、基于组件的用于PureScript的UI库，它强调类型安全。在本指南中，您将学习在Halogen中编写实际应用程序所需的核心思想和模式。

这是一个微型Halogen应用程序，可让您递增和递减计数器:

module Main where

import Prelude

import Effect (Effect)
import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.VDom.Driver (runUI)

main :: Effect Unit
main = HA.runHalogenAff do
  body <- HA.awaitBody
  runUI component unit body

data Action = Increment | Decrement

component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }
  where
  initialState _ = 0

  render state =
    HH.div_
      [ HH.button [ HE.onClick \_ -> Decrement ] [ HH.text "-" ]
      , HH.div_ [ HH.text $ show state ]
      , HH.button [ HE.onClick \_ -> Increment ] [ HH.text "+" ]
      ]

  handleAction = case _ of
    Increment -> H.modify_ \state -> state + 1
    Decrement -> H.modify_ \state -> state - 1

你可以粘贴这个例子(以及本指南中的任何其他完整示例)到Try PureScript。我们强烈建议您这样做以交互方式探索示例！例如，尝试更改按钮，使它们使用Increment和Decrement而不是符号+和-。

默认情况下，每次进行更改时,Try PureScript都会编译。您还可以禁用自动编译功能，这将导致 Try PureScript 等待您单击Compile按钮来编译您的Halogen应用程序.

您还可以使用官方Halogen模板创建自己的入门项目。此模板包含额外的工具和脚本，可帮助您启动并运行完整的Halogen应用程序.

不要担心这些代码一开始是否会让人不知所措——当您阅读本指南的接下来几章时，您将对这个组件的工作原理以及如何编写自己的组件有一个深入的了解。

如何阅读本指南

在本指南中，我们将探索Halogen应用程序的构建块：elements(元素)和components(组件)。当您了解这些后，您就可以从可重用的小片段创建复杂的应用程序。

这是对Halogen主要概念的逐步介绍。每章都建立在前几章介绍的知识的基础上，因此我们建议您按顺序通读指南。

Halogen是一个PureScript库，它假定您了解PureScript概念的基本知识，例如函数、记录、数组、do符号、Effect和Aff。如果您了解HTML和DOM的基础知识，它也会有所帮助。如果您需要复习，我们建议：

• 对于PureScript：PureScript Book和Jordan Martinez的 PureScript Reference。
• 对于HTML：MDN对HTML和DOM events的介绍。

目录

• 渲染Halogen HTML
• 组件介绍
• 执行Effects
• 生命周期和订阅
• 父/子组件
• 运行应用程序
• 下一步