Transform JSX in the browser

[koba04]

Now, Babel removed browser.js from babel-core.
babel/babel@c0afdfd

React Getting Started documentation is using browser.js of babel-core 5.8.23.
http://facebook.github.io/react/docs/getting-started.html

Do you have any plan for supporting JSX transformer for the browser?
Will it be deprecated?

Thanks.

[zpao]

I guess we could reinstate JSXTransformer but I don't really want to… @sebmck whyyyyyyyyyyyyyy

[sebmck]

@zpao Why is this something that you want to support?

[jimfb]

@sebmck Am I missing something obvious here? The in-browser transformation is fairly critical to new users getting started. It is used in sample code to give people a first taste of JSX, is used in fiddles for debugging/testing/demoing, is used in a lot of places. It is even used on the reactjs homepage. browser.js seems like a fairly critical feature to me.

[zpao]

@sebmck feel free to point me elsewhere to have this discussion. The main reason I want it is to keep it simple when starting with React. "load this script and use type='text/babel' and it'll work" is a nice story and eases people into the need for server-side transformation. It would also be pretty bad to require a build pipeline for hello world. I want people to focus on React initially, not the tooling.

Could we compile our own to get the same story? Yep. We did it before and we can do it again (though maybe we won't ship it anywhere this time, just on our site, examples, jsfiddle). It was just nice to say that you were owning it :P

[shaoshiva]

I just migrated an app to react 0.14 with babel 6 and I didn't found a way to maintain the in-browser transpilation that I had previously with react 0.13 and JSXTransformer. It make me sad because it was a very convenient way for development.

[zpao]

As noted you can still use babel 5 in the browser. I wouldn't recommend using it for anything except test cases or quick examples though. If you have a whole app and build pipeline, you should rely on that.

[shaoshiva]

Yes it's exactly what I did, but my build pipeline was too slow, I had to wait 6-7 seconds for the ~30 jsx files to be transpiled by Grunt with the grunt-react plugin. Now I rely on Webpack + Babel 6, it's a lot faster, enough fast for development.

For in-browser transpilation I just found this :
https://github.com/Daniel15/babel-standalone

It seems to be the successor of babel-browser, that's a great news, and it resolves the issue ;) I hope it will be maintained.

[otoinsa]

This documentation bit should be corrected:

The link to in-browser tool leads to "deprecated".

Also - is there an alternative to babel-browser that works a lot like it used to?
It's very important for a lot of users to be able to develop on various machines/env; so this used to be a great tool during development period.

I don't understand how can I use the babel-standalone tool for my app.js file that has bunch of es5 react classes with JSX. Is there any alternative?

Right now I'm using the old browser.js...

[jimfb]

@otoinsa unofficial/unsupported, but... http://www.jimsproch.com/react/

That's what I use myself when testing locally, so I thought I'd share. It works pretty well for my needs.

[otoinsa]

Thank you @jimfb, that is very helpful!
I'll test it first chance tommorow :)

I think this is an essential addition to my dev workflow :)

[mxstbr]

Just ran into this today, the link to Babel's old browser.js in the documentation leads to this page, which has a link to Daniel15/babel-standalone. I take that as an endorsement – can I swap out the docs for in-browser transforms to directly link to babel-standalone and update the text accordingly?

[zpao]

babel-standalone doesn't actually do any transforming of script tags on its own, you'd have to write a wrapper (which I have done just need to get it shipping somewhere).

We can update the docs or just stop linking entirely.

[Daniel15]

I've got an issue to handle transforming script tags with babel-standalone: babel/babel-standalone#15. However, I haven't had any time to implement it. @danmartinez101 built https://github.com/danmartinez101/throw-in-the-towel/blob/master/index.js which looks like it should work. I'm happy to accept pull requests to add this to babel-standalone 😄