JSX

Introduction to JSX for Fortis

JSX, or JavaScript XML, is a powerful and expressive syntax extension commonly used in web development to define the structure and layout of user interfaces. It's most popularly associated with React, but it can be adapted for use in other JavaScript projects as well. In this introduction, we'll explore how JSX is utilized in the context of Fortis, emphasizing the configuration needed to integrate JSX into your project and a key distinction from React.

JSX in Fortis

Fortis is a JavaScript project that leverages JSX for building user interfaces. JSX enables developers to describe the visual hierarchy of components in a manner that closely resembles HTML, making the code more intuitive and maintainable. In Fortis, JSX acts as a fundamental building block for defining the structure of your user interfaces.

One distinctive feature of Fortis is its adherence to HTML attributes as they are, with a preference for lowercase attribute names. Unlike React, which encourages the use of camelCase for certain HTML attributes, Fortis retains the original attribute naming conventions. This means that, for example, you would use class instead of className, for instead of htmlFor, and onclick instead of onClick.

Configuring JSX in Fortis

To enable JSX support in Fortis, you need to configure your project's TypeScript settings. This is achieved by modifying the tsconfig.json file. Specifically, you will set f as the pragma for JSX. Pragma is a directive that tells the TypeScript compiler which JSX factory function to use.

To configure JSX for Fortis in your tsconfig.json, add or modify the following section:

{
    "compilerOptions": {
        "jsx": "react", // Keep this line to enable JSX support
        "jsxFactory": "f" // Set 'f' as the pragma for Fortis
    }
}

The jsx field should be set to "react" to let TypeScript know that you're working with JSX syntax. Then, the jsxFactory field is set to "f" to specify that the JSX pragma for Fortis is f.

With this configuration, you're ready to start writing JSX code in your Fortis project, creating dynamic and interactive user interfaces with ease. Remember to pay special attention to the way HTML attributes are used, following Fortis' convention of using lowercase attribute names.

Keep in mind that unlike React, Fortis does not automatically convert HTML attribute names to camelCase. This distinction is important to ensure a smooth development experience and consistent coding practices throughout your project.

CSSAttributes