There is a lot of existing simple rules to follow while creating a Component Tree for a frontend application, such as: avoid "prop drilling" ; or what we said earlier "the deeper, the dumber". This cookbook presents some design patterns reusable for PureScript Reactix components.

---

• add PureScript examples

Base components

• deepest node of the component tree
• only contain HTML element without any logic
• variadic arity regarding props specs

      ^{_{Reactix.DOM.HTML examples}}

---

Container components

• wrapping an existing component
• communicate with the store or other data-relation library (eg. Relay)
• dispatch behaviours and data
• better suffixed as <component-container>

• smart and dumb components article to illustrate some examples

---

Deep dependency injection

• sharing data that can be considered as global, or reusable semi-local logic, for the component tree
• use the context API in ReactJS

Heads up: predictable state containers are often relying on this pattern. This is the choice we have chosen for the project too

      ^{_{context example}}

---

Dual binding

• offer a two-way binding on a form input element or a component
• non native in ReactJS (contrary to VueJS v-model for example)

• add dualbinding with "FormValidation" hook for inputs
• idem, via Toestand (maybe check how Formula library is written)

---

Instance reference

• use ref in ReactJS
• allow parent component to perform DOM manipulation

---

Layout component

• a type of component used once per page
• naming format adopting the <the-component> prefix
• it is ok if they contain some "container component" logic (eg. communicating with the stores)

Heads up: the project contains some "/layouts/**.purs" files. To be clear here, these components (in addition to the "/pages/**.purs" ones) tick all the boxes concerning layout component patterns. Two differences:

• prefix has been altered for a more contextualised value
• they are subject to framework automations

  ^_example

---

Composition component

• surcharge a component with another given one
• previous major React API also provide "mixins", today deprecated for obvious reasons, now "hooks API" is the main word

      ^{_{hook example}}

---

Placeholder component

• clone of an existing component displayed while on pending process for example
• template created from a generator

      ^{_{blank placeholder with cloak example}}

---

Transcluded component

• via transmission of reactjs rendered elements as props
• or in a more fashion way (following the likes of VueJS slots) via transmission of array of elements

  ^{_{slots example}}