Hacker News Reader

Comment by jbhatab | Hacker News Reader

I don't know if I'm reading the changes wrong, but I'm not liking how I have to do an extra step if I don't use jsx. I want to use coffescript and not have to do extra stuff.

I definitely feel this forced vibe around making everyone use jsx, but have yet to hear any compelling reasons why it's better.

View on HN

Hi, this was a tough call for us to make. We wanted to everything we could to avoid extra bloat for everyone. In the end, most people tend to use some kind of extra helper, even if it's not JSX. E.g. a custom library or another third party language.

One reason for this change is to make it possible to use object literals or record syntax where that is more appropriate than function calls. We don't currently recommend it because there's no validation in that case, so you probably want static analysis to catch errors. I would encourage you to play with the idea of using object literals instead of function calls though.

One compelling reason for this change is that in 0.13 you will be able to build components using plain CoffeeScript classes instead of relying on React.createClass. So, in the end, you will be getting some of that bloat/overhead back.

We're definitely not making React depend on JSX. We will continue to support non-JSX and fully support compile-to-JS languages. Unfortunately, that sometimes means a trade-off. In this case trading React.createClass for React.createFactory. Some would've preferred it be the opposite tradeoff but React.createFactory gives us more benefits than the opposite.

Thanks for the response.

Could you give me a quick example of calling a component with object literals instead of functions? I'm not understanding how that will play out in the final code.

Also, isn't it just adding React.createFactory, not replacing React.createClass?

In CoffeeScript it might look something like this:

element = type: 'div' props: className: 'container', children: [ type: 'span', props: className: 'foo' type: CustomClass, props: className: 'bar' ]

(This doesn't fully work in 0.12 because we also have some extra properties on there but that's the direction we're going.)

0.12 is just adding React.createFactory. 0.13 will optionally replace React.createClass.

We do this so that there's a seamless upgrade path. We have to remove the warnings to fix the classes.

I guessed that indentation:

    element =
      type: 'div'
      props: className: 'container'
      children: [
          type: 'span'
          props: className: 'foo'
      ,
          type: CustomClass
          props: className: 'bar' 
      ]

Thanks for the answers.

I will say that I do really like the syntax of coffeescript as is though,

  div className: 'container',
    span className: 'foo'
    CustomClass classname: 'bar'

It reminds me a lot of slim and reads nicely.

More information in breaking changes would definitely be appreciated.

I can't decode what "Composite Component functions can no longer be called directly" means exactly in terms of code that will no longer work.

I definitely use React without JSX in plain JavaScript and I really love it. I'm kind of dreading what this little snippet means when I try to update to 0.13.

> One reason for this change is to make it possible to use object literals or record syntax where that is more appropriate than function calls

I think this will be the most revolutionary aspect in the next months, both for development and tests. I wrote an article explaining why I have this opinion:

https://gcanti.github.io/2014/10/29/understanding-react-and-...

Big-R (the react framework I've been working on) eases this transition a bit. You can see[1] that components aren't accessed directly (unless of course you want to)

It still doesn't solve the stuff JSX has for splats though ...

[1]: https://gist.github.com/mikew/e737273e42ed704c6c54#file-zz-r...

Where did you see the increased difficulty if you weren't using JSX?

I haven't used React, but maybe he's referring to this: "Composite Component functions can no longer be called directly - they must be wrapped with React.createFactory first. This is handled for you when using JSX."

As the others have stated, react requires me to add this line: var MyComponent = React.createFactory(require('MyComponent'));

It's not a huge deal, but I keep getting this sense that jsx is strongly tied to react and this reaffirms that they are going to keep it that way. I do trust the react team still, but it makes me weary of future releases.

(I'll re-link to sebmarkbage's answer here in case people see this post and get confused: https://news.ycombinator.com/item?id=8523876)

In short, this is somewhat of a transition step for the (imo) even better way of specifying your render with pure vanilla js collections. This goes in the opposite direction of what you're worried about. You can view `createElement/Factory` as the stepping stone, with the _additional_ benefit of allowing you to use es6 classes very soon. Smaller API surface and + using more js features rather than library-specific ones; what's not to like? =)

As for your worries about JSX: yes, it does come from React since the beginning. But we've taken an extra step of making it clear that this doesn't have to be React-specific: http://facebook.github.io/jsx/. You can plug this in CoffeeScript. If not, see my previous point.

His concerns about JSX are the opposite of those you site, I believe; him (and I) want to use React without JSX whatsoever.

As long as we can always do something like

    div className: 'foo', 
      span className: 'bar'
      Custom className: 'baz'

I think we'll be reasonably happy. But nobody likes feeling like a second-class citizen =)

Why not just use jsx though? It's almost always easier.

How so?

It's similar to standard HTML and less clunky than the equivalent JS expressions

You don't need to do a separate step to use JSX. JSX is a still a superset of JS and you can still opt to not use it with no additional steps.

"...but I'm not liking how I have to do an extra step if I don't use jsx."

http://facebook.github.io/react/blog/2014/10/14/introducing-...

He's referring to the createFactory stuff. The new JSX transformer automatically generates that boilerplate for you, but if you don't use JSX you'll need to add it everywhere yourself before you upgrade.

"Composite Component functions can no longer be called directly - they must be wrapped with React.createFactory first. This is handled for you when using JSX."

Reply on news.ycombinator.com