fix(examples): update react app code

[epreston]

Update react code as outlined here to remove compatibility mode warnings.
https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

Update react types for stricter checking and fixes.

Fixes react running in compatibility mode.

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[epreston]

This is said to have a perf benefit as well but I can't tell. Its always been very performant.

[epreston]

Completed a code scan with the react 18 and react 19 presets using the official upgrade tool.
See: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-typescript-definitions

Tool: https://github.com/eps1lon/types-react-codemod

It suggested no modifications.

[willeastcott]

Nice, thanks!!

[kungfooman]

Did you test the examples?

I changed this myself too (with many other changes) and I observed some examples don't work properly afterwards:

function main() {
    const oldWay = !true;
    console.log("oldWay", oldWay);
    if (oldWay) {    
        // render out the app
        ReactDOM.render(
            jsx(MainLayout, null),
            document.getElementById('app')
        );
    } else {
        // render out the app
        const container = document.getElementById('app');
        const root = createRoot(container);
        root.render(jsx(MainLayout, null));
    }
}
window.onload = () => {
    // Just a little timeout to give browser some time to "breathe"
    setTimeout(main, 50);
};

For example a slider doesn't fire any longer or this canvas is just half-visible:

Based on this minified source, it doesn't seem to be updated yet: https://playcanvas.github.io/index.js (I only find createRoot once)

[epreston]

Yes. All directional controls work.

I would not rely on what is published to github pages in the link provided. That is not the branch these commits have been made to. I do not know which version is being pushed to the "github pages".

Your code does not match what was replaced. What is your 'jsx' referring to ? I don't know what else you say you changed.

On the main branch, in the examples directory, ensure you have run npm install then npm build.

Might be a good idea to do the same in the root first.