
React on ES6+ - clessg
http://babeljs.io/blog/2015/06/07/react-on-es6-plus/
======
thomasfoster96
This might be a silly question, but was there ever any thought put towards
using ES6 Template Strings rather than the JSX syntax additions? For example:

    
    
        class OuterComponent extends React.Component {
          render() {
            return (
              <MixinComponent>
                <InnerComponent />
              </MixinComponent>
            );
          }
        }
    

Being replaced by something more like:

    
    
        class OuterComponent extends React.Component {
          render() {
            return JSX`
              <MixinComponent>
                <InnerComponent />
              </MixinComponent>
            `;
          }
        }

~~~
Honzo
Would you be able to use template strings inside the template if this was the
case?

~~~
thomasfoster96
Yes, template strings can be nested (well, they can using Babel).

~~~
empyrical
This works for me in the latest Chrome too:

    
    
        `${`test`}`

------
dugmartin
I understand the interest in new Javascript standards in the browser however
I've been doing a lot of React+CoffeeScript (without JSX) work lately and it
can do all of what is mentioned in the article in a more expressive and (imho)
more beautiful syntax.

I'm genuinely curious about all the ES6/ES7 articles. Is the interest driven
from the eventual native support in future browsers and being able to drop
transpiler dependencies?

~~~
mytranspiler
Whats the state on coffeescript+jsx these days? I had a horrible time getting
it transpile correctly (with gulp) about a year ago.

~~~
dugmartin
I stopped using JSX with React+CoffeeScript. I think the following looks a lot
cleaner and removes the jsx dependency:

    
    
        {div, a} = React.DOM
        ...
        render: ->
          (div {},
            (a {href: 'foo'}, 'bar')
          )
    

The only downside is having to extract the tags from React.DOM.

~~~
seivan
You could omit the parenthesis and it starts to look a lot like HAML :-)

~~~
dugmartin
The parens help to make sure CoffeeScript parses it correctly. Plus it looks
kind of Lispy which is good right?

~~~
seivan
"looks kind of Lispy which is good right?" :D, you sound not sure :)

I haven't had any issues without the parens, but then again I've only just
fooled around.

You probably know better.

------
jozan
What's the status of mixins? How could I do something similar in terms of
functionality in ES6?

~~~
lukasm
You have 3 options if you want mixin behaviour:

\- Use old syntax or explicitly add mixin to prototype \- Use composition. A
bit annoying, because you have to make an extra class

    
    
        class OuterComponent extends React.Component {
          render() {
            return (
              <MixinComponent>
                <InnerComponent />
              </MixinComponent>
            );
          }
        }
    
        class InnerComponent extends React.Component{}
    

\- wait for decorators (?)

~~~
eskimobloood
You can at least try decorators with babel using[1]

    
    
      $ babel --optional es7.decorators
    

or

    
    
      babel.transform("code", { optional: ["es7.decorators"] });
    

Here[2] is an article that describes how to use it for mixins

[1]
[https://babeljs.io/docs/usage/experimental](https://babeljs.io/docs/usage/experimental)

[2] [http://raganwald.com/2015/06/26/decorators-in-
es7.html](http://raganwald.com/2015/06/26/decorators-in-es7.html)

------
netcraft
Does anyone have an example of an open source project that uses babel for
react + es6? Usually for me the hardest part is setting up the project
organization and plumbing to make everything work.

~~~
bryanlarsen
This one looks pretty reasonable: [http://jmfurlott.com/tutorial-setting-up-a-
single-page-react...](http://jmfurlott.com/tutorial-setting-up-a-single-page-
react-web-app-with-react-router-and-webpack/)

I recommend avoiding gulp and grunt and any other build systems. They're
completely unnecessary. npm and webpack are sufficient. npm works well as a
simple task runner, and there are webpack plugins to do pretty much anything
you'd ever do with grunt or gulp.

~~~
netcraft
Cheers! this looks very helpful.

------
kendallpark
I'm using React in ES6 with Rails (the react-rails gem now uses Babel as its
transpiler). What I've found is that I've had to choose between using ES6 and
getting prerendering working correctly. I also couldn't get the ES6 modules
working without RequireJS or CommonJS. If anyone has this figured out, I'd
love to hear it.

~~~
feedjoelpie
I have it figured out. A long-winded explanation:

Honestly I hate the react-rails gem. Whoever was maintaining it kept doing
things at the whims of issue requestors. I remember one instance where they
broke our apps with an upgrade because someone decided it would be a good idea
to shim a definition for `window` into server prerenders. All because an issue
creator who didn't really know what they were doing supposedly "needed" that
to get browserify-rails working.

So we made this: [https://github.com/revelrylabs/execjs-
rails](https://github.com/revelrylabs/execjs-rails). That handles the server-
side rendering for us. We only use react-rails for its assets, never for its
helpers.

And here's our own (always-evolving) layer on top of execjs-rails:
[http://toolkit.revelry.co/pages/core](http://toolkit.revelry.co/pages/core).

Examples are written in dusty JavaScript, but we've successfully used
revelry_core with sprockets-es6 several times now.

EDIT: Still no modules yet. It doesn't help that Josh Peek deleted the old
sprockets-es6 repo and all its issues before passing off maintenance to
someone else.)

~~~
kendallpark
Wow! Thanks for this. I've been wrestling with getting ES6, React, and Rails
to play nicely for some time. How stable is execjs-rails?

~~~
feedjoelpie
Very, actually. It's about time I add more tests, maybe remove its opinion
about what view context to dump to JavaScript (leave that to the end dev), and
version it as 1.0. I think it's had one significant bug in almost a year and
no problem issues in the past 6 months.

------
deanclatworthy
Looks to be a nice improvement. The only thing that really bothers me is if
they deprecate componentDidMount. I think it's a lot more verbose than using
the constructor method, especially given the corresponding componentDidUnmount
method still exists. Is there a destructor syntax for ES6?

~~~
rymohr
The constructor takes the place of componentWillMount. I believe
componentDidMount is still used.

~~~
vingiesel
Looks like getInitialState is absorbed by the constructor as well.

------
seivan
I haven't found any information on how to use libraries that depend on mixins
for ES6.

Say React-router, how would you use that if you're extending a class in ES6
and need to rely on that mixin?

~~~
tranver
Since mixins are not supported in combination with classes[1] there is no way.
I just fall back to React.createClass when I need mixins (afaik this is also
what Facebook does).

A lot of libraries, including react-router, are considering decorators as an
alternative.[2]

[1]
[http://facebook.github.io/react/blog/2015/01/27/react-v0.13....](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#mixins)

[2] [https://github.com/rackt/react-
router/issues/1173](https://github.com/rackt/react-router/issues/1173)

~~~
seivan
Thanks! I suspected so, but I wasn't sure. I've found that you get a lot of
messy variations when doing ES6 compared to sticking with ES5 or CoffeeScript.

Not to mention the issues with all the god damn different build tools, it gets
hard to get something standardised and good.

------
city41
The react-starter-kit is a great way to dive head first into ES6 and React.
Just clone the repo, npm install and go. It's fully up to date with all recent
React and ES2015/2016 goodness.

[https://github.com/kriasoft/react-starter-
kit](https://github.com/kriasoft/react-starter-kit)

------
tel
More Javascript `this` juggling. I really want to write a wrapper around
`createClass` which just passes things as normal arguments.

------
HugoDaniel
These new syntactic sugar additions are great for lazy fat-prone people like
me :)

------
smrtinsert
where is the outrage over jsx syntax? why isnt anyone screaming for json now?
is the bandwagon late?

------
tel
C'mon.

> Right away, you'll notice a subtle difference – a more terse syntax is
> available to you when defining classes:
    
    
        // The ES5 way
        var Photo = React.createClass({
          handleDoubleTap(e) { … },
          render() { … },
        });
    
        // The ES6+ way
        class Photo extends React.Component {
          handleDoubleTap(e) { … }
          render() { … }
        }
    

It may or may not be more terse in longer examples, but ES6 already supports
things to make the class syntax _less_ terse here by about the same margin the
article claims.

~~~
adregan
While it doesn't add up to a terribly large amount of extra characters, you
are missing the function keyword (ie. `handleDoubleTap: function(e)`) in the
ES5 example.

~~~
tel
Ah, now I think I understand what they were trying to argue—full ES5 versus
ES6 where I took it to be ES6 versus ES6-using-class.

