React v0.12 • Hacker News Board

Re: React v0.12

#41

Post by spion » Wed, Oct 29, 2014, 12:17 AM UTC

jaredgrippe wrote: post #38

chenglou wrote: post #37

Earlier quoted context omitted.

Rest assured, see sebmarkbage's and my reply here: https://news.ycombinator.com/item?id=8523732 https://news.ycombinator.com/item?id=8524465

The object literal syntax also sucks :( https://gist.github.com/deadlyicon/79c09610cac5a67f4a5d

Agreed.

* JSX more tightly coupled,

* less straightforward JSX->JS mapping - I used to be so excited to tell people how JSX simply maps to function calls in JS... well, now it generates boilerplate instead.

* worse non-JSX syntax

I don't buy the ES6/CS/TS argument - wrapping classes with createFactory before exporting seems fine to me, and I use typescript. Also, from what I can see the object literal syntax is always worse.

So its basically all about Jest. The only reason I see is that a mocking tool can't handle factories. Makes me a bit sad. Seems like a good example of "test induced design damage" to me. How about adding plugins to that mocking tool instead?

Re: React v0.12

#42

Post by peterhunt » Wed, Oct 29, 2014, 12:29 AM UTC

spion wrote: post #41

jaredgrippe wrote: post #38

Earlier quoted context omitted.

The object literal syntax also sucks :( https://gist.github.com/deadlyicon/79c09610cac5a67f4a5d

Agreed. * JSX more tightly coupled, * less straightforward JSX->JS mapping - I used to be so excited to tell people how JSX simply maps to function calls in JS... well, now it generates boilerplate instead. * worse non-JSX syntax I don't buy the ES6/CS/TS argument - wrapping classes with createFactory before exporting seems fine to me, and I use typescript. Also, from what I can see the object literal syntax is alway…

If you wrap the class in createFactory() then you break instanceof; how is this fine?

Re: React v0.12

#43

Post by chenglou » Wed, Oct 29, 2014, 12:29 AM UTC

spion wrote: post #41

jaredgrippe wrote: post #38

Earlier quoted context omitted.

The object literal syntax also sucks :( https://gist.github.com/deadlyicon/79c09610cac5a67f4a5d

Agreed. * JSX more tightly coupled, * less straightforward JSX->JS mapping - I used to be so excited to tell people how JSX simply maps to function calls in JS... well, now it generates boilerplate instead. * worse non-JSX syntax I don't buy the ES6/CS/TS argument - wrapping classes with createFactory before exporting seems fine to me, and I use typescript. Also, from what I can see the object literal syntax is alway…

See my link on sebmarkbage's reply. It's not just for Jest.

Re: React v0.12

#44

Post by spion » Wed, Oct 29, 2014, 12:36 AM UTC

peterhunt wrote: post #42

spion wrote: post #41

Earlier quoted context omitted.

Agreed. * JSX more tightly coupled, * less straightforward JSX->JS mapping - I used to be so excited to tell people how JSX simply maps to function calls in JS... well, now it generates boilerplate instead. * worse non-JSX syntax I don't buy the ES6/CS/TS argument - wrapping classes with createFactory before exporting seems fine to me, and I use typescript. Also, from what I can see the object literal syntax is alway…

If you wrap the class in createFactory() then you break instanceof; how is this fine?

True. But I can't come up with an example where I'd use instanceof on react components, can you give me one?

Re: React v0.12

#45

Post by fiatjaf » Wed, Oct 29, 2014, 12:40 AM UTC

spicyj wrote: post #40

fiatjaf wrote: post #29

I really don't see the point of making so much breaking changes just to simplify the public API. The thing was working, it was good. It didn't need any changes. God would have rested. But well, the developers were there and, you know, they cannot see a repository without commits for much time, right?

We made these changes to try to make React better for everyone, but if you would like to continue using React 0.11, please do.

Please, don't take this as an offense. I didn't mean to. This was an attempt of a joke, but it clearly didn't come out the way I wanted.

I love React, I love you guys for making React and I'm sorry for this comment.

Re: React v0.12

#46

Post by spion » Wed, Oct 29, 2014, 12:41 AM UTC

chenglou wrote: post #43

spion wrote: post #41

Earlier quoted context omitted.

Agreed. * JSX more tightly coupled, * less straightforward JSX->JS mapping - I used to be so excited to tell people how JSX simply maps to function calls in JS... well, now it generates boilerplate instead. * worse non-JSX syntax I don't buy the ES6/CS/TS argument - wrapping classes with createFactory before exporting seems fine to me, and I use typescript. Also, from what I can see the object literal syntax is alway…

See my link on sebmarkbage's reply. It's not just for Jest.

Okay, except for JSX I agree that the change towards native classes is for the better.

But the change in JSX seems to be just for Jest. JSX could still compile to function calls and stay completely decoupled from React. A new function `createFactory` would be introduced that takes a class argument and produces a factory, making ES6, CS and TS users pleased. No backward-compatibility breakage would be introduced.

edit: removed a non-constructive paragraph. Will play around with the new version more before commenting further. Hopefully I'll understand why JSX is a lot more complicated than it used to be :/

Re: React v0.12

#47

Post by jxm262 » Wed, Oct 29, 2014, 1:02 AM UTC

limsup wrote: post #6

Can someone explain what the "spread operator" is and how to use it?

heydenberk explained it well, but just to add some clarity on why you'd want to use prototype.apply for array as an argument -

http://stackoverflow.com/questions/2856059/passing-an-array-...

http://stackoverflow.com/questions/1316371/converting-a-java...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

I'm still learning more about JS and so I'm no expert, but it seems to be similar in concept to use the ... in other languages. I think Groovy has something similar and Java has the varargs. They have obvious differences, but conceptually I think of it as passing in a variable number of args.

Re: React v0.12

#48

Post by jaredgrippe » Wed, Oct 29, 2014, 1:17 AM UTC

One of my favorite patterns in React is using functions to wrap a React component.

It goes something like this:

  App.Button = React.createClass({
    render: function(){
      var className = 'btn '+this.props.className
      {this.props.children}
    }
  });

  App.BigButton = function(props){
    props = props || {};
    props.className = 'btn-large '+props.className
    return App.Button.apply(null, arguments)
  };

How would you do something like this?

Re: React v0.12

#49

Post by spicyj » Wed, Oct 29, 2014, 1:21 AM UTC

jaredgrippe wrote: post #48

One of my favorite patterns in React is using functions to wrap a React component. It goes something like this: App.Button = React.createClass({ render: function(){ var className = 'btn '+this.props.className {this.props.children} } }); App.BigButton = function(props){ props = props || {}; props.className = 'btn-large '+props.className return App.Button.apply(null, arguments) }; How would you do something like this?

The suggested way of doing this is define a new component like so:

  var BigButton = React.createClass({
    render: function() {
      return (
        
      );
    }
  });

(Before React 0.12 introduced the JSX spread syntax, this was handled by transferPropsTo.)

Re: React v0.12

#50

Post by simplify » Wed, Oct 29, 2014, 1:25 AM UTC

I'm disappointed that JSX is now so coupled to React. I was looking forward to JSX being used by many different JavaScript frameworks[1], but this change reveals the devs are not interested in moving that direction.

[1] Example: https://github.com/mrsweaters/mithril-rails