Implemented StrictMode into Haxe-React, and possibly more

[Just-Feeshy]

Added StrictMode as a static variable to our React extern class in Haxe. It's now possible to use React.StrictMode in the same way as any other React component in our Haxe-React codebase.

Here's an example:

import js.Browser.document;

import react.ReactDOM;
import react.ReactComponent;
import react.ReactMacro.jsx;
import react.React;

@:jsRequire("./App.jsx", "default")
extern class App {}

function main() {
    js.Lib.require("./index.css");

    ReactDOM.render(
        jsx("<React.StrictMode><App /></React.StrictMode>"),
        document.getElementById("root")
    );
}

[Just-Feeshy]

In this example, the ReactDOMClient.createRoot() function is used to create a root node on an HTML element (with the id "root"). This method is part of the new React 18 root API and provides built-in support for concurrent rendering.

After creating a root, the render method is called on with the JSX to be rendered wrapped in <React.StrictMode> component.

NOTE: I recommend using ViteJS if you're going to do this setup for your project. This is to demonstrate the new ReactDOMClient for React 18 for Haxe.

package;

import js.Browser.document;

import js.html.Element;
import react.ReactDOMClient;
import react.React;

function main() {
    var rootElement = document.getElementById("root");
    var root = ReactDOMClient.createRoot(rootElement);

    root.render(
        jsx('
            <React.StrictMode>
                <h1>Hello World!</h1>
            </React.StrictMode>
        ')
    );
}