Components
Function Components

Function Components in Fortis

In Fortis, function components are a fundamental element for creating user interfaces. They offer a straightforward way to define UI elements, whether you're working with JSX or an imperative coding style. Function components are, at their core, JavaScript functions that return DOM elements. This simplicity makes them perfect for creating reusable, small pieces of your user interface.

Function Components in JSX

Here's how you can create a function component using JSX in Fortis:

import {f, FunctionComponent} from "fortis";
 
const MyButton: FunctionComponent = () => {
    return (
        <button>Click me</button>
    );
};

In this example, the MyButton function component returns a <button> element when rendered. It encapsulates the logic and structure of the button, making it easy to reuse throughout your project.

Function Components in Imperative Form

Function components can also be constructed imperatively. Here's an example of an imperative function component in Fortis:

import {f, FunctionComponent} from "fortis";
 
const ImperativeButton: FunctionComponent = () => {
    const button = document.createElement("button");
    button.innerText = "Click me";
    return button;
}

In this imperative form, the ImperativeButton function constructs a button element with specific attributes and text. This can be a useful approach when you need more control over the element's creation.

Node Hooks in Function Components

In Fortis, you can enhance your function components with "Node hooks" exported from the fortis package. These hooks allow you to manipulate small pieces of data within your components. There are two primary types of Node hooks:

1. Number Nodes

import {f, FunctionComponent, useNumber} from "fortis";
 
const Counter: FunctionComponent = () => {
    const count = useNumber(0);
 
    return (
        <div>
            <p>Count: {count}</p>
            <button onclick={() => count.value++}>Increment</button>
        </div>
    );
};

In this example, the useNumber hook creates a text node with a default value of 0, and you can use it within JSX. The value of count can be manipulated via the value property. This creates a simple counter component where the count increases each time the button is clicked.

2. String Nodes

import {f, FunctionComponent, useString} from "fortis";
 
const RandomString: FunctionComponent = () => {
    const name = useString("Emily");
 
    return (
        <div>
            <p>Name: {name}</p>
            <button onclick={() => name.value = "New Name"}>Change Name</button>
        </div>
    );
};

In this example, the useString hook creates a text node with the default value "Emily." The value of name can be manipulated via the value property. This component allows you to change the displayed name with the click of a button.

It's important to note that these Node hooks can be used not only in function components but also throughout your Fortis project, as they are native to Fortis and can be incorporated into various parts of your application. These hooks provide a convenient way to manage and manipulate small pieces of data within your components while adhering to Fortis' attribute naming conventions and its functional approach to UI development.

Class ComponentsCSS