{"action":"created","issue":{"url":"https://api.github.com/repos/asbjornenge/thinking-in-react/issues/14","labels_url":"https://api.github.com/repos/asbjornenge/thinking-in-react/issues/14/labels{/name}","comments_url":"https://api.github.com/repos/asbjornenge/thinking-in-react/issues/14/comments","events_url":"https://api.github.com/repos/asbjornenge/thinking-in-react/issues/14/events","html_url":"https://github.com/asbjornenge/thinking-in-react/pull/14","id":106559773,"number":14,"title":"Add JSX and ES6 support with Babel","user":{"login":"ThibWeb","id":877585,"avatar_url":"https://avatars.githubusercontent.com/u/877585?v=3","gravatar_id":"","url":"https://api.github.com/users/ThibWeb","html_url":"https://github.com/ThibWeb","followers_url":"https://api.github.com/users/ThibWeb/followers","following_url":"https://api.github.com/users/ThibWeb/following{/other_user}","gists_url":"https://api.github.com/users/ThibWeb/gists{/gist_id}","starred_url":"https://api.github.com/users/ThibWeb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThibWeb/subscriptions","organizations_url":"https://api.github.com/users/ThibWeb/orgs","repos_url":"https://api.github.com/users/ThibWeb/repos","events_url":"https://api.github.com/users/ThibWeb/events{/privacy}","received_events_url":"https://api.github.com/users/ThibWeb/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-09-15T13:44:59Z","updated_at":"2015-09-22T01:54:55Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/asbjornenge/thinking-in-react/pulls/14","html_url":"https://github.com/asbjornenge/thinking-in-react/pull/14","diff_url":"https://github.com/asbjornenge/thinking-in-react/pull/14.diff","patch_url":"https://github.com/asbjornenge/thinking-in-react/pull/14.patch"},"body":"That's a bigger change, to say the least.\r\n\r\nI added Babel to the project to support JSX and ES6 in the solution. There are a few caveats to that:\r\n\r\n- Right now Babel is used on the whole project and not just the solutions. It means that I had to change some of the project's code, because Babel uses strict mode by default, which caused some global variables to break.\r\n- I updated React to the latest version, which is split into two packages and introduces some API changes. This version is only a release candidate at the moment.\r\n- React's API has changed quite a lot, and we cannot switch transparently between non-JSX and JSX components anymore. Details are here https://gist.github.com/sebmarkbage/ae327f2eda03bf165261. This PR doesn't support non-JSX components at the moment, but I think that it could be added back with a bit more work.\r\n- `workshopper`'s syntax highlighter doesn't support ES6 / JSX at the moment. I think this is coming, but not sure when (see https://github.com/workshopper/workshopper/issues/95).\r\n\r\n\r\nLast but not least: I haven't updated some of the content in the problem descriptions (like \"Here is what a really basic React component looks like (JSX syntax is optional, I prefer not to use it).\") :p I guess it'll have to be changed depending on what you want to do with this PR :)\r\n\r\nPS: if you want to give it a try, you can `npm install -g ThibWeb/thinking-in-react`. It will grab the latest version on GitHub, which _should_ work and may also contain more things than this PR.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/asbjornenge/thinking-in-react/issues/comments/142157833","html_url":"https://github.com/asbjornenge/thinking-in-react/pull/14#issuecomment-142157833","issue_url":"https://api.github.com/repos/asbjornenge/thinking-in-react/issues/14","id":142157833,"user":{"login":"ThibWeb","id":877585,"avatar_url":"https://avatars.githubusercontent.com/u/877585?v=3","gravatar_id":"","url":"https://api.github.com/users/ThibWeb","html_url":"https://github.com/ThibWeb","followers_url":"https://api.github.com/users/ThibWeb/followers","following_url":"https://api.github.com/users/ThibWeb/following{/other_user}","gists_url":"https://api.github.com/users/ThibWeb/gists{/gist_id}","starred_url":"https://api.github.com/users/ThibWeb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThibWeb/subscriptions","organizations_url":"https://api.github.com/users/ThibWeb/orgs","repos_url":"https://api.github.com/users/ThibWeb/repos","events_url":"https://api.github.com/users/ThibWeb/events{/privacy}","received_events_url":"https://api.github.com/users/ThibWeb/received_events","type":"User","site_admin":false},"created_at":"2015-09-22T01:54:55Z","updated_at":"2015-09-22T01:54:55Z","body":"Good question! I've tried both syntaxes on my project and while I think that the `class` syntax looks cooler / is going to prevail in the future, I don't think it is the best right now.\r\n\r\n[The 0.13 release post](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) details the differences between the two syntaxes. I'm not that keen on using ES7 feature proposals that are still at [stage 0/1](https://babeljs.io/docs/usage/experimental/), so without autobinding and property initializers the `class` syntax isn't nearly as convenient at the moment."}}