You certainly don't need JSX for React, nor a build chain. My ship investor Kelly trainer game[1] is a simple React application in a single HTML file. The initial page load is slow because I experimented with using built-in browser module support to pull in React, but if you change it to serve a pre-built library from a CDN instead then also the initial page load is fast.
You can view the source on that page to see how simple it can be, but here is the essence:
1. Import React. This is the step you can do from a CDN instead of you want a faster initial page load. (Okay apparently I'm using Preact here, but it's effectively the same thing.)
import { h, render, createContext } from 'https://unpkg.com/preact@latest?module';
import { useState, useMemo } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module';
2. Render React components in HTML elements. This is where the progressiveness comes in. You don't have to render the entire web page as one React component; you can choose to only render some components in some locations of the page.
const appDiv = document.getElementById('app');
render(h(App, null), appDiv);
3. The React components are plain ES functions that can use hooks etc. from React, as usual.
function App() {
let [state, setState] = useState(initial_state);
// --------------->8------
return h('main', null, [
h(Description, {
turn: state.turn,
strait: state.straits[state.shipment.strait]
}),
h(Bankroll, { wealth: state.wealth.first() }),
h(Investment, { invest, state }),
h(WealthHistory, { wealth: state.wealth }),
]);
}
Instead of JSX we use the h function, which takes either tag name in a string, or another React component, takes an attribute dictionary as the second argument, and a list of children as the third. That's it. Super easy.
[1]: https://xkqr.org/ship-investor/ship-investor.html
(There is at least one bug in the game logic that prevents this game from being any fun at the moment. I have not taken the time to investigate why that happens, because I have not offered the training that used this tool to anyone in a few years.)
((If you enjoyed the game anyway and want more of a challenge, you might want to try the continuous version: https://xkqr.org/ship-investor/ship-investor-2.html. There is also a secret third version simulating futures which I have never shared with anyone before. It is playable, but not finished: https://xkqr.org/ship-investor/ship-investor-3.html))