On: How Does React Tell a Class from a Function?

[wz1000]

If you're going to be using any language seriously, you better understand how functions and objects and classes in that language work.

[thatswrong0 → wz1000]

I’ve been writing React for 3ish years and not once would knowing any of the weird details in the blog post have been useful for anything I’ve built.

[adjkant → wz1000]

In most cases I'd agree, but essentially JS has gotten to the point that it's only usable if you write an entirely new language on top of it, like React/Vue/Angular have. All of them are basically to avoid the confusion that arises from the weird quirks of JS, like it's classes implementation. These languages then also try to integrate the few positives of JS into their paradigms, and IMO they are decently successful to the point of usability for a frontend.

[pests → adjkant]

I don't understand how "React/Vue/Angular" is considered "an entirely new language." I use React primarily, so I'm going to speak from knowledge of that. It is very obviously a framework and it does one thing - handle your view.

Depending on what you are doing, you may have very little react-specific code in your application.

You have data fetching, caching, persistence, authentication, tons of things, not to mention business logic that needs to be implemented in just plain Javascript.

Then out of that process you may have workers or other async background jobs happening which should not involve React at all.

[reificator → pests]

While I agree with your point, your example of React literally adds a DSL that requires a pre-compilation step. It's not required[0], I get that, but it's still a new language.

[0]: It may not be required, but it was created for a reason....

[dakom → reificator]

JSX is not only not required, it's sugar that breaks referential transparency: https://medium.com/@david.chambers/jsx-violates-referential-...

Personally I still use it, but I think it's fair to say that as much as JSX was created for a reason, it's made optional for a reason too.

[jakelazaroff → dakom]

JSX doesn't violate referential transparency. A component either is referentially transparent, or it isn't; nothing about how it's invoked changes that.

Put another way: React calls your components, not you. You pass the component function itself to React.createElement, not its result.

[dakom → jakelazaroff]

> You pass the component function itself to React.createElement, not its result.

JSX prevents you from being able to do this directly. For example, <() => "hello" /> is illegal.

[pests → reificator]

I don't mind a pre-compilation step as I'm already doing it in my projects and a lot of the community is as well.

There are other templating systems you can use in React if you don't like JSX.

I've seen one codebase use direct calls to ReactDOM.createElement and there is a new hotness (which I can't think of the name of now) that replaces JSX with template literals, something like:

  function NamePetList(props) {
    return html`
      <div>
        Hello <b>${props.name}</b>!
        <ul>
        ${props.pets.map(pet => html`
          <li ${...pet.props}>${pet.name}</li>`
        }
        </ul>
     </div>
    `
  }

which I really like.

The library parses the strings to figure out which elements to create. Flow control and variables are just normal template literal arguments.

[sophiebits → pests]

You're likely thinking of https://github.com/developit/htm.

[pests → sophiebits]

Oh yes! Thank you.

[reificator → pests]

I get the pros and cons of jsx/htm (and hyperhtml/lithtml) just fine. I'm just saying that bringing up React as an example of a framework that should not be treated as a new language is not the best possible example, since it does literally come with a new language.