Components in Nordcraft

You can use components in Nordcraft to break down large projects into smaller reusable building blocks for your websites in Nordcraft.

Components in Nordcraft are self-contained, reusable elements that encapsulate structure, styles and behavior. Components can:

• Render elements on a page
• Store data in variables
• Call APIs and process data
• Respond to user interactions
• Communicate with other components
• Encapsulate logic
• Implement functionality in isolation
• Maintain their own internal state

Each component has its own structure, data model, and behavior.

Breaking your websites into components provides several advantages:

• Reusability: Build functionality once and use it many times
• Maintainability: Changes to a component apply everywhere it is used
• Organization: Divide complex projects into manageable pieces
• Consistency: Ensure UI elements look and behave the same way throughout your website
• Collaboration: Different team members can work on different components simultaneously
• Testing: Components can be tested in isolation

A component in Nordcraft can consist of:

• Root element: The top-level container element
• Element tree: The hierarchy of elements that make up the component
• Attributes: The interface for passing data into the component
• Variables: Internal state and temporary data management
• APIs: Connections to external services and data sources
• Events: The interface for communicating out from the component
• Formulas: Calculations and data transformations
• Workflows: Internal logic and behavior
• Contexts: Communication with ancestor and descendant components or elements

Components in Nordcraft encapsulate their data, meaning that variables, APIs, and other internal aspects of one component are not accessible by other components. This ensures that components:

• Have clear boundaries and responsibilities
• Can be modified internally without affecting other parts of the project
• Are easier to understand, as their behavior depends only on their own code and inputs

Components can send data to other components and pages through:

• Attributes: Pass data down to child components
• Events: Send data up to parent components
• Contexts: Create direct communication channels with ancestor and descendant components

This communication pattern enables components to work together while maintaining their independence and encapsulation.

Components are composable, meaning they can be combined together to form more complex components. This allows you to:

• Create a hierarchy of increasingly complex UI elements
• Build large websites with reusable parts
• Share functionality between different areas of your website

When you add a component to a page or another component, you're creating an instance of that component. Each instance:

• Has its own set of attribute values
• Can be styled independently (affecting only the root element, see component style overrides)
• Works independently of other instances of the same component