An HTML node in the tree of elements.

Fragments in React allow you to bundle multiple elements together without the need to add a parent element for each one. By wrapping elements within a fragment, they can be grouped as siblings under the same parent, eliminating the need for additional 'div', 'section', or similar elements that could impact the component's hierarchy and layout. For instance, a navigation bar utilizing fragments could return a list of pages based on the user's location within the app. These pages, although not present in the DOM, would still be visible on the stage.

Another component from your project. Components can be built with any number of elements and other components in them. Codux exposes the properties of components that accept JSX through the Properties panel.

Repeaters are a type of expression that operate on lists of entities. Essentially, you define an element once in your code, and the repeater functionality replicates it as many times as required. This is particularly useful for creating lists, slide shows, grid views, and more. Repeaters can operate on elements, components, and even other expressions. In the context of rendering components multiple times based on an array, a function like `map` is used. This function iterates over each item in an array and returns a component for each item. This is a common pattern in frameworks like React for rendering lists of components. So, in a way, the `map` function acts as a repeater, creating multiple instances of a component based on the data in an array.

Functions are fundamental building blocks in any programming language. They allow you to define a reusable piece of code that can be executed whenever needed. A function can take in parameters, which are inputs that influence the function's behavior, and return a result. Functions can be used for a wide variety of tasks, such as performing calculations, manipulating data, or controlling the flow of a program. In the context of rendering components in a framework like React, functions can be used to generate components based on data. For example, a function can take an array of data and return an array of components, with each component being customized based on a corresponding data item. This is a common pattern for rendering lists of components in React. So, in a way, such a function acts as a repeater, creating multiple instances of a component based on the data in an array.

Expressions are entities in code that get evaluated at runtime (when the component renders) to get a single value. For example, an expression might evaluate to a four-star product rating. Expressions can be numbers, text strings, other elements and components, and even null! If an expression doesn't get rendered because of its coded logic, Codux can't know what its value is (because it doesn't have one).

Conditional elements in JavaScript can dictate what elements appear in your interfaces and applications. They are a type of expression that is evaluated based on their boolean state (true or false) at runtime. A common example of a conditional element is an 'add to cart' button that only appears in your app when the item is available. Conditional elements often have different sets of elements to display depending on the state of the condition, such as navigation breadcrumbs that change based on the user's current page. Regardless of whether they are displayed on the interface, all elements are present in the Elements panel. The Elements panel will show you if your condition is True or False, and if logic dictates that the element should not appear on the board or in your app, it appears grayed out in the panel.

Properties are characteristics or values that specify the traits of an element or component. They can range from simple attributes like the color of a button, the text within a label, or the state of a checkbox, to more complex data such as a complete list of items. While properties can be static, they can also be dynamic, altering over time or in response to specific conditions. In the context of development environments like Codux, you can inspect and modify these properties via the Properties panel. Properties can also include functions that define the behavior of the component, such as event handlers for user interactions.

Restricted JSX refers to certain elements or components that do not accept JSX elements directly as props. However, these elements can still utilize JSX in their children. This is a common pattern in React where certain components are designed to only accept specific types of props for better predictability and type safety. Despite this restriction, JSX elements can still be used within the children of these components, allowing for complex nested structures and component compositions.

Linked Reference elements are elements that are defined externally, outside of the current component or module. These elements can be other components, functions, or variables that are imported from different files or modules. In the context of a development environment like Codux, these elements appear in the Elements panel but are linked to their original definition. This allows developers to understand the dependencies of their components and provides a way to navigate to the original definition of these elements.

A type of property, the child prop is a special prop in React that allows components to be passed as data to other components. This is a powerful feature that makes it easier to create complex user interfaces. It can be used to pass a wide variety of data types, including strings, numbers, JSX elements, and even other React components. This allows for greater flexibility and reusability in your component architecture. In addition to nesting components, the children prop can also be used to create higher-order components (HOCs), which are functions that take a component and return a new component with additional props or behavior. This can be useful for adding common behavior or styling to multiple components.