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))

>I think it's very hard to argue that React is effective or well designed.

This is a foolish take. React is the reason the modern web is as usable as it is. Anyone who contests otherwise is simply ignorant of web development history.

>(and even Netflix is moving away from React

They're not moving away from React, they're doing pure SSR with it. https://react.dev/reference/react-dom/server/renderToPipeabl...

You don't need the compiler client side. What level of confusion leads you to believe that? That's not even a detail about React, that's simply a mistake in how software works.

React has ALWAYS, by default, done SSR first and then hydrates state on the client. It's trivial, and always has been, to simply do SSR only if you so wish.

>But to implement it in React you have to go on a steep learning curve to learn about JSX, hooks, the component lifecycle, building the app for dev, packaging it for prod, and more.

I find it hard to take this characterization in good faith. If you have trouble learning about the component life cycle in React, I don't see how you have any hope of successfully building a production level application without any guard rails.

You will, without a singular doubt, simply get "it" wrong. Even with modern JS.

Netflix didn't move away from react. They render landing pages with static react components through server-side rendering and only add the minimal interactivity on top through client side js to avoid shipping all of react's state management etc. to the client.

You shouldn't use any js framework for simple sites.

You are complaining about the libraries around it rather than react itself.

    function MyForm() {
      const [isHidden, setIsHidden] = useState(false)
      return (
        <>
          <button onClick={()=>setIsHidden(!isHidden)}>{isHidden ? ‘Show’ : ‘Hide’}</button>
          {!isHidden &&<form>your same stuff</form>}
        </>
      )
    }

As you can see, you’ll be writing less code than you’d write if you were using something like jQuery. At the same time, if you’re needs grow due to something like client-side validation, you at least have an easy path forward.

At it’s core, React isn’t very complex and you can build a lot of stuff without much complexity.

The problem I often see is developers overengineering stuff. It’s not react specific and you’ll find this issue everywhere, but the form it takes in react land is adding massive solutions to little problems. I’ve worked on apps with giant routing solutions for a handful of routes or complicated stores with almost nothing in them.

I suspect tech influencers and those of us writing actually large apps have an outsized voice if only because those devs keeping simple react projects simple just don’t have that much to write about.

> only simple sites where the guys before me chose React, so I can't speak to its relative strengths or weaknesses there, but I've found that it doesn't scale down very well to simple sites.

I agree completely, my whole career I've been building webapps, as in like software that really couldn't be server side rendered, such as very interactive charting and table applications or games (that didn't require Canvas and could work in DOM but needed lots of reactivity, such as a SQL query builder game or a terminal emulator game), where react works decently. Vue worked fine and so did backbone/marionette, whatever, a framework is a framework is a framework, React has a lot of libraries I can just chuck in to get a date picker or whatever so I use it.

Anyway, I would never build anything that can be server-rendered in react. Simple forms, e-commerce, blogs, portfolios, anything like that I'm just writing in HTML or Django or Hugo or hell, Wordpress. I tried out Astro for a blog just to pick up the framework and didn't understand why on earth I needed all this insane boilerplate to render Markdown files. Hugo solved that problem. If I need more complex than that, Vite + react, done.

I feel like there's a lot of devs out there that are using react cause they like the devx "nice to haves" that they're used to e.g. hooks or whatever, when they really don't need them for their page.

You can use React without jsx by the way. The syntax isn't great but it is doable.

I think you hit the nail on the head: React is a good fit for certain solutions (like interactivity rich web applications), while not a good fit for others (like adding minor interactivity into a form). There are trade offs to React vs Vue vs Angular vs Vanilla and which is best is contextual to the problem you are solving, rather than a more moralistic "X is THE winner" stance.

Look, just because you're the most popular doesn't mean you're the best, did you fools not learn anything from high school? Look at Microsoft in the 90s-2000s -- terrible fucking software, but it was by far the most widely used.

Innovation is not really measured in terms of how well something "scales down".