A component in Resquare is a piece of UI that you can reuse in other components or render to the user, it can receive props (i.e., input), store state, and return corresponding elements.
You can declare a component without props, with props, or with optional props.
We strongly recommend you use data class as props class.
The way to create a component with optional props input is to provide a default props factory. When the component is called without props input, the default props will be used.
You can return a node as a result of the component, and there have few types of node:
- Element (div)
- List of node
- Children list of node
You can return a list of nodes as a single node. If you are nesting a list inside another list, all of them will be flattened as 1 list at the final stage.
If you are returning a component as a list element, you must provide a
key for Resquare to recognize the element, or you will receive a warning from Resquare.
Key can be any unique string or number identifier, such as id. If there have no way to provide a unique identifier for it, you can also use an index as an identifier, but it may cause problems when the item order is changed.
key is important!
If you are really interested in why we need a
key, you can check React document.
The children list is basically the same as the list, but the size of it should be fixed and no key is needed.
tl;dr, Which list I should use?
childrenOfwhen you are going to make a fixed nodes list.
+listwhen you are going to render a data list as nodes.
The null node is useful when you want to hide an element in the list by condition,
it is basically equal to
childrenOf(), which means it will render nothing.
Remember that null itself is not a node, so you must use
+ to wrap the nullable node.