permalinkComponent Syntax

Here are examples of increasingly complex components

permalinkComponent with neither props nor hooks

This is a component that will always render "Hello World" when you use it.

src/CoolComponent.purs
module CoolComponent where  import Prelude import React.Basic.Hooks (component) import React.Basic.DOM (text)  makeCoolComponent = component "CoolComponent" \props -> do  pure (text "Hello World")  usageCoolComponent = do  coolComponent <- makeCoolComponent  pure $ coolComponent {}

This renders

Cool Component
Hello World

If we wanted this to be a <button>Hello World</button> instead we can do:

src/CoolComponent.purs
module CoolComponent where  import Prelude import React.Basic.Hooks (component) import React.Basic.DOM (text, button)  makeCoolComponent = component "CoolComponent" \props -> do  pure (button { children: [ text "Hello World" ] })  usageCoolComponent = do  coolComponent <- makeCoolComponent  pure $ coolComponent {}
Cool Button Component

permalinkComponent with props but without hooks

This is a component that will display the text you tell it to.

src/SimpleComponentWithProps.purs
module SimpleComponentWithProps where  import Prelude import React.Basic.Hooks (component) import React.Basic.DOM (text, button)  makeCoolComponent = component "CoolComponent" \props -> do  pure (button { children: [ text props.text ] })  usageCoolComponent = do  coolComponent <- makeCoolComponent  pure $ coolComponent { text: "LOVE" }

This renders

Cool Component With Props

permalinkComponent without props but with hooks

This is a component that has some state