React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition. A component is a function, conditionals are `if (...) { ... } else { ... }`, loops are `map()`. JSX is just sugar for function calls.

In Svelte you are writing XML with little JavaScript islands inside it. Instead of if you get `{#if}{:else}{/if}`. Thats not "ergonomic" – thats a mini-language stapled on top of JS. No one wakes up saying "please let me write control flow in XML today"

The compiler tricks are neat, but React feels natural because it never asks you to stop writing JavaScript.

So JSX is pure Javascript and not, say, a dialect of XML embedded in JS? Because it sure looks like the former even though it compiles to the latter.

React isn't Javascript. It's a franken-language that looks superficially like a mix of JavaScript and XML whilst following the rules of neither. That's why there is such a thing as a React compiler - a good sign that you're not writing JS, which doesn't have compilers.

The other hint should be all the new rules you have to follow. React is full of magic syntax that looks like functions, but e.g. you can't call them inside an if statement, or you have to redundantly declare the 'dependencies' (variables you read) and so on. The semantics of React code are very different to imperative straight line code.

> React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition. A component is a function, conditionals are `if (...) { ... } else { ... }`, loops are `map()`. JSX is just sugar for function calls.

I agree with JSX, and function components are nice, but React is most definitely not just function composition. Hooks add state and introduce life cycle events that take components way beyond stateless territory, to the point that it would be far easier to reason about them if they were class components with properties and decorators and handlers invocable through inversion of control.

> React isn’t just "winning by default" It's winning because at the core it's just JavaScript function composition.

This might be just a rationalization. React might be "winning" (whatever that means), because it was the first proper component-based library, when its competitors (Backbone, Angular, Ember) were large, slow, and clumsy, and still struggling with the concept. Plus, developers back then were easily impressed by the word "Facebook", which meant a large tech company that probably knew what it was doing, and served as a guarantee of good quality. So it had a tremendous head start and good marketing. If Vue, Svelte, Solid, or Lit were there first, who knows if React would be "winning" now.

HTMX is the antidote to React and is allowing many green shoots to show through - my favourite is https://harcstack.org … but there are many alternates in many server side languages (disclosure: i am the author)

Thats why it won over the more popular Angular 1 at the time. Angular was introducing directives as a new way to handle dependencies, React chose to stay close to the new ES6 syntax with imports, of course I was going to chose the language that was closer to ES6. I have a feeling React will be closer to the EcmaScript/Javascript standard than Svelte in the future as well ES7/ES8/ES9. Also React Native and React is very easy with LLMs. I am able to build cross platform apps with feature parity which is important because some of us need to make programs for the most popular form factor, mobile, instead of a desktop website.

Hooks are very much not normal functions though. They are a new "colour" of function much like async functions - they can only be called in components or other hooks, they cannot be called conditionally, cannot be called in loops etc. The so-called "rules of hooks"

(To get ahead of the common objection: of course it's still JavaScript by virtue of being implemented in JavaScript. But so are Svelte, Vue et all)

Man, I am glad I don't have to work with any developers for whom having to write "className" (which has been in the DOM standard since 2000) over "class" is a deal-breaker.

> React feels natural because it never asks you to stop writing JavaScript

I want to increment some counter on the webpage. Which approach feels natural?

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  const increment = () => setCount((count) => count + 1);

  function increment() {
    count += 1;
  }

On the other hand, how do you write a function in a react component that retains its identity between renders (to pass as a prop to a child and not have the child re-render when it changes)? You can't — you need useCallback. Meanwhile in svelte you just... write a function.

They each have their own quirks. Personally I'd rather write language specific if/else (obvious, can't get it wrong) than have to remember to reactify my functions if I want to avoid subtle performance issues.

Hard agree. I've used xml directives before, all the way back to Macromedia Flex (which I believe borrowed form something in the Java space, which probably borrowed from something else).

I'll likely NEVER use anything that doesn't let me run JSX.

My personal preference is for complexity at the start of the render pipeline (e.g. in state) or at the end (e.g, in JSX).

So I personally dislike complex hooks composition, but I can live with it. (My) teams seem to like it. I'd rather have boilerplate of redux, or redux sagas - or a S.O.L.I.D framework + scaffolding tools, and turn the composition of logic part of my brain off.

But the context switch to maintaining scaffolding tools is perhaps a bit of a jump.

As an aside: I'm shocked to see Yeoman largely diminished in activity, and Hygen (https://github.com/jondot/hygen) not getting anywhere near enough love as it deserves etc.

Perhaps there is some, first-class macro or meta programming or combination of the two that is missing. Or maybe its hard to invest in tools you can't necessarily take from job to job - as scaffolding tools are capturing opinion.

I don't understand how this comment is the top, because it makes no sense.

No one writing markup says "Damn, I wish I could write this inline with my javascript." Have you even seen a react component before? People writing javascript containing the markup which, in turn, contains more inline javascript statements for conditional rendering. No logical person would argue "this is better than {#if}{:else}{/if}".

It looks like simple JavaScript. However hooks are magic, so it's no longer simple JavaScript with simple mental model. It's completely different language.

Clear difference between a library approach and a framework approach. react looks like a library but svelte and tbh angular also look like a framework. As devs we are more comfortable with libraries unless framework offers enough value.

Sure this is js

<> // React code here <>

Sorry, but I'll take Vue's or Svelte's (I prefer Vue's) DSLs over shit like `className` or sticking complex rendering logic in the HTML/template with unreadable `.map`s or God forbid nested ternaries, which is not a rare sight in React codebases. For my brain, seeing a bunch of `v-for`s is a lot clearer as to what's going to ultimately render than seeing a bunch of `map`s is going to render.

Also calling it "just JavaScript" might've been true in the Class component days, but in this frankenstein "functional" component paradigm we're at today it's far from the truth. I mean, it's not even a JS file, it's a JSX file for starters.

At the end of the day the whole JSX vs HTML-DSL thing comes down to a personal preference, and I doubt it's had much to contribute in terms of the success of the various frameworks. I know plenty of people working with React that despise JSX, and I know plenty of people working happily with Vue or Svelte that hate the DSL for templates.

Both SolidJs and Qwik keeps the JSX syntax!

Please. Let’s get real about the biggest issue with Svelte/Vue/Solid: it wasn’t written by Meta, and had no chance at the clout game that is essential for mindshare.

(Not saying React is bad, just that DSLs impeding adoption rings hollow in light of Tailwind/JSX.)

off topic but react code is hard for LLM to edit for some reason compared to other like VueJS

> It's winning because at the core it's just JavaScript function composition.

Except it's not. It has a bunch of footguns and implicit behaviours that make no sense unless you're well-versed in the internals of React.

See: https://macwright.com/2024/09/19/the-extra-rules-of-hooks

https://www.schiener.io/2024-03-03/react-closures

And JSX by itself is already a DSL, which drastically changes how it works based on the pragma used. JSX for SolidJS, Preact, Inferno or any other framework has completely different internals.

> winning because at the core it's just JavaScript function composition

and now it's failing for the same exact reason, a pseudo "just js function" dsl (hooks) and all the magics enabled by special "compilers" and toolchain.

I feel like you must have learned JavaScript and React concurrently to have a belief like this.

...At a logical level,