How Does React Tell a Class from a Function? • Hacker News Board

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

#41

Post by reificator » Mon, Dec 03, 2018, 7:04 AM UTC

pests wrote: post #38

adjkant wrote: post #30

Earlier quoted context omitted.

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…

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…

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

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

#42

Post by code001 » Mon, Dec 03, 2018, 7:04 AM UTC

Great job Dan, please keep posting more articles on your blog!

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

#43

Post by finchisko » Mon, Dec 03, 2018, 7:07 AM UTC

I'm pretty much aware about prototype inheritance in js. But still scratching my head everytime, I try to understand difference between prototype and __proto__. Thankfully with ES6 classes and class inheritance constructs, we don't need to override prototype constructor and such a things anymore. Still wish, that somebody will explain it to me in plain english.

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

#44

Post by sophiebits » Mon, Dec 03, 2018, 7:14 AM UTC

finchisko wrote: post #43

I'm pretty much aware about prototype inheritance in js. But still scratching my head everytime, I try to understand difference between prototype and __proto__. Thankfully with ES6 classes and class inheritance constructs, we don't need to override prototype constructor and such a things anymore. Still wish, that somebody will explain it to me in plain english.

This post does try to explain it in plain English. See the explanation starting at the bolded sentence that starts "Confusingly,".

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

#45

Post by sophiebits » Mon, Dec 03, 2018, 7:18 AM UTC

Waterluvian wrote: post #6

I'm really quite surprised how much time is spent worrying about Babel. I always thought that you could just write valid JavaScript and it's completely Babel's responsibility not to screw that up. Edit: not sure what's wrong with my comment so let me clarify: I wouldn't have thought that library developers had to think about what other tools might do with their library. I always thought that so long as your code is v…

(I work on React.) Most of our users use Babel so it would be irresponsible for us to not consider how React and Babel play together; if we didn't we'd quickly get into a situation where no one can use React because their setups are incompatible.

For what it's worth, if we found while developing React that Babel was compiling something in a problematic way and we had a better suggestion for the compiled output, we'd certainly see if we could get it fixed upstream. In this case the Babel output for classes is pretty reasonable so there's nothing to change.

We did briefly consider if it made sense to require every function component to be written using an arrow functions and asking Babel to delete the .prototype property from every compiled arrow function (compiling a = () => ... into something like a = function() { ... }; a.prototype = undefined;). We eventually decided that the .prototype.isReactComponent compromise described in the post was a better result overall, both for authoring ergonomics and runtime performance.

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

#46

Post by pests » Mon, Dec 03, 2018, 7:21 AM UTC

reificator wrote: post #41

pests wrote: post #38

Earlier quoted context omitted.

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…

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

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`
      
        Hello ${props.name}!
        
        ${props.pets.map(pet => html`
          ${pet.name}`
        }
        
     
    `
  }

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.

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

#47

Post by sophiebits » Mon, Dec 03, 2018, 7:25 AM UTC

pests wrote: post #46

reificator wrote: post #41

Earlier quoted context omitted.

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

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) { retur…

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

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

#48

Post by pests » Mon, Dec 03, 2018, 7:26 AM UTC

finchisko wrote: post #43

I'm pretty much aware about prototype inheritance in js. But still scratching my head everytime, I try to understand difference between prototype and __proto__. Thankfully with ES6 classes and class inheritance constructs, we don't need to override prototype constructor and such a things anymore. Still wish, that somebody will explain it to me in plain english.

.__proto__ is that objects prototype that was used to create it.

.prototype is the template of newly created objects of the object you are inspecting.

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

#49

Post by ricardobeat » Mon, Dec 03, 2018, 7:26 AM UTC

“In the old days, JavaScript did not have classes” gave me a laugh. This was 3-4 years ago.

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

#50

Post by [deleted] » Mon, Dec 03, 2018, 7:27 AM UTC

finchisko wrote: post #43

I'm pretty much aware about prototype inheritance in js. But still scratching my head everytime, I try to understand difference between prototype and __proto__. Thankfully with ES6 classes and class inheritance constructs, we don't need to override prototype constructor and such a things anymore. Still wish, that somebody will explain it to me in plain english.

[deleted]