{"action":"created","issue":{"url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/issues/57","labels_url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/issues/57/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/issues/57/comments","events_url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/issues/57/events","html_url":"https://github.com/gaearon/babel-plugin-react-transform/issues/57","id":121175806,"number":57,"title":"Support Functional Components","user":{"login":"thejameskyle","id":952783,"avatar_url":"https://avatars.githubusercontent.com/u/952783?v=3","gravatar_id":"","url":"https://api.github.com/users/thejameskyle","html_url":"https://github.com/thejameskyle","followers_url":"https://api.github.com/users/thejameskyle/followers","following_url":"https://api.github.com/users/thejameskyle/following{/other_user}","gists_url":"https://api.github.com/users/thejameskyle/gists{/gist_id}","starred_url":"https://api.github.com/users/thejameskyle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thejameskyle/subscriptions","organizations_url":"https://api.github.com/users/thejameskyle/orgs","repos_url":"https://api.github.com/users/thejameskyle/repos","events_url":"https://api.github.com/users/thejameskyle/events{/privacy}","received_events_url":"https://api.github.com/users/thejameskyle/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-12-09T06:56:08Z","updated_at":"2015-12-10T20:03:23Z","closed_at":null,"body":"Moving from #34.\r\n\r\nAs of `react@0.14`, plain functions can be used as components. In the future this will bring performance optimizations in React.\r\n\r\n```js\r\nfunction Component(props) {\r\n  return <div/>;\r\n}\r\n```\r\n\r\nMany people are already using these, there's even a [Babel plugin](https://github.com/thejameskyle/babel-plugin-react-pure-components) (that I wrote) to transform pure component classes to pure component functions.\r\n\r\nIt would be great if `babel-plugin-react-transform` supported these. However, there is a pretty big concern.\r\n\r\nSince these are just plain functions, with JSX in them there is nothing that designates that it is a react component. i.e. in order to tell that a class is a react component, we can test that it extends `React.Component`, or that it has a matching interface.\r\n\r\nWe can attempt to match them by treating \"any function that has JSX in it will be treated as a component\" i.e.:\r\n\r\n```js\r\nfunction Component() {\r\n  return <div/>;\r\n}\r\n```\r\n\r\nHowever, this would also match the inner function in here:\r\n\r\n```js\r\nclass Component extends React.Component {\r\n  render() {\r\n    const children = this.props.items.map(function(props) {\r\n      return <li>{props.name}</li>;\r\n    });\r\n    return <ul>{children}</ul>;\r\n  }\r\n}\r\n```\r\n\r\nSo we can tighten things and say \"only top level components\", but then we run into wanting to support factories:\r\n\r\n```js\r\nfunction componentFactory() {\r\n  return function Component(props) {\r\n    return <div/>;\r\n  };\r\n}\r\n```\r\n\r\nI could keep going for a while, you can put functions all over the place in JavaScript and no matter what we define as the rule here there will be exceptions. It's a matter of deciding what the heuristics should be that balances:\r\n\r\n1. Rarity - How often people will actually run into exceptions in real world code\r\n2. Obviousness - How easy it is to understand the reasoning behind an exception\r\n\r\nIt might be possible to get around the obviousness problem by throwing compile errors when running into ambiguous scenarios."},"comment":{"url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/issues/comments/163734866","html_url":"https://github.com/gaearon/babel-plugin-react-transform/issues/57#issuecomment-163734866","issue_url":"https://api.github.com/repos/gaearon/babel-plugin-react-transform/issues/57","id":163734866,"user":{"login":"shinzui","id":519,"avatar_url":"https://avatars.githubusercontent.com/u/519?v=3","gravatar_id":"","url":"https://api.github.com/users/shinzui","html_url":"https://github.com/shinzui","followers_url":"https://api.github.com/users/shinzui/followers","following_url":"https://api.github.com/users/shinzui/following{/other_user}","gists_url":"https://api.github.com/users/shinzui/gists{/gist_id}","starred_url":"https://api.github.com/users/shinzui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shinzui/subscriptions","organizations_url":"https://api.github.com/users/shinzui/orgs","repos_url":"https://api.github.com/users/shinzui/repos","events_url":"https://api.github.com/users/shinzui/events{/privacy}","received_events_url":"https://api.github.com/users/shinzui/received_events","type":"User","site_admin":false},"created_at":"2015-12-10T20:03:23Z","updated_at":"2015-12-10T20:03:23Z","body":"@SpainTrain good point. I am even using destructuring in some of my stateless components. :smile: "}}