Support Functional Components

.eslintrc

@@ -15,6 +15,7 @@
     "semi": 1
   },
   env: {
+    "mocha": true,
     "node": true
   }
 }

README.md

@@ -14,6 +14,7 @@ This plugin wraps React components with arbitrary transforms. In other words, **
 * [Ecosystem](#ecosystem)
 * [Demo Project](#demo-project)
 * [Installation](#installation)
+* [Configuration](#configuration)
 * [Writing Transforms](#writing-transforms)
 
 ## Ecosystem
@@ -54,7 +55,7 @@ npm install --save-dev react-transform-hmr
 npm install --save-dev react-transform-catch-errors
 ```
 
-##### Configuration
+## Configuration
 Add react-transform to the list of plugins in your babel configuration (usually `.babelrc`):
 
 ```js
@@ -84,10 +85,16 @@ Add react-transform to the list of plugins in your babel configuration (usually
           }, {
             // can be an NPM module name or a local path
             "transform": "./src/my-custom-transform"
-          }]
+          }],
+
           // by default we only look for `React.createClass` (and ES6 classes)
           // but you can tell the plugin to look for different component factories:
-          // factoryMethods: ["React.createClass", "createClass"]
+          // "factoryMethods": ["React.createClass", "createClass"]
+
+          // Disabled by default, if you want to enable transforms
+          // (e.g. HMR) on stateless functional components, this will
+          // convert them into React.Component classes for you.
+          "transformReactLikeFunctionsToClasses": false
         }]
       ]
     }
@@ -101,6 +108,46 @@ Note that when using `React.createClass()` and allowing `babel` to extract the `
 
 You may optionally specify an array of strings called `factoryMethods` if you want the plugin to look for components created with a factory method other than `React.createClass`. Note that you don’t have to do anything special to look for ES6 components—`factoryMethods` is only relevant if you use factory methods akin to `React.createClass`.
 
+### Stateless Functional Components
+
+If you enable transforming
+[stateless functional components](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components)
+into `React.Component` classes via:
+
+```json
+"transformReactLikeFunctionsToClasses": true`
+```
+
+The preferred, most reliable format looks like:
+
+```js
+const Greeting = ({ name }) => (
+  <h1>Howdy there, {name}!</h1>
+);
+
+export default Greeting;
+```
+
+Or, if you prefer a single statement, like this:
+
+```js
+export default function Greeting({ name }) {
+  return (
+    <h1>Howdy there, {name}!</h1>
+  );
+}
+```
+
+This satisfies the **React-like _signatures_** to infer this is
+indeed a React component:
+
+- [x] `const` or `export`ed function.
+- [x] Capitalized function/variable name.
+- [x] Function body `return`s JSX.
+
+As long as these conventions are followed, these functional components
+should be successfully converted into classes for further transformation.
+
 ## Writing Transforms
 
 It’s not hard to write a custom transform! First, make sure you call your NPM package `react-transform-*` so we have uniform naming across the transforms. The only thing you should export from your transform module is a function.

package.json

@@ -18,6 +18,7 @@
     "babel-core": "^6.2.1",
     "babel-eslint": "^4.1.6",
     "babel-preset-es2015": "^6.1.18",
+    "babel-preset-react": "^6.5.0",
     "babel-register": "^6.2.0",
     "eslint": "^1.10.3",
     "eslint-plugin-react": "^3.11.2",