diff --git a/README.md b/README.md
index 37da3cd..fb6932a 100644
--- a/README.md
+++ b/README.md
@@ -96,7 +96,7 @@ describe('Foo', function () {
 });
 ```
 
-And `src/styles/Foo.css` (or .sass, .less etc...) : 
+And `src/styles/Foo.css` (or .sass, .less etc...) :
 ```css
 .Foo{
   border: 1px dashed #f00;
@@ -107,14 +107,14 @@ And `src/styles/Foo.css` (or .sass, .less etc...) :
 
 For all you lazy programmers out there, we've added another shortcut - `rich` flag:
 ```bash
-yo react-webpack:c foofoo --rich 
+yo react-webpack:c foofoo --rich
 ```
 This will give you all of react component's most common stuff :
  ```js
  var React = require('react/addons');
- 
+
  require('styles/Foofoo.sass');
- 
+
  var Foofoo = React.createClass({
    mixins: [],
    getInitialState: function() { return({}) },
@@ -124,7 +124,7 @@ This will give you all of react component's most common stuff :
    shouldComponentUpdate: function() {},
    componentDidUpdate: function() {},
    componentWillUnmount: function() {},
- 
+
    render: function () {
      return (
          <div>
@@ -133,11 +133,11 @@ This will give you all of react component's most common stuff :
        );
    }
  });
- 
- module.exports = Foofoo; 
+
+ module.exports = Foofoo;
  ```
 
-Just remove those you don't need, then fill and space out the rest. 
+Just remove those you don't need, then fill and space out the rest.
 
 
 
@@ -239,7 +239,7 @@ var BazStore = Reflux.createStore({
 
 });
 
-module.exports = BazStore; 
+module.exports = BazStore;
 ```
 
 and same test for both architectures:
@@ -273,6 +273,17 @@ css, sass, scss, less or stylus
 
 Sets the style file's template and extension
 
+### component suffix
+
+js or jsx
+
+Sets the file suffix for generated components. Defaults to "js". Please note that you need to require files *including* the file ending when using jsx as suffix. Example:
+
+```js
+var MyJSComponent = require('./MyJSComponent');
+var MyJSX = require('./MyJSX.jsx');
+```
+
 ### architecture
 
 [flux](https://facebook.github.io/flux/) or [reflux](https://github.com/spoike/refluxjs)
@@ -299,16 +310,16 @@ project
       MainApp.js
       Foo.js
       AnotherComponent.js
-      
+
     //for flux/reflux
-    -actions 
+    -actions
       BarActionCreators.js
     -stores
       BazStore.js
     //for flux
     -dispatcher
       FooAppDispatcher
-        
+
     - styles
       main.css
     index.html
@@ -318,13 +329,13 @@ project
          MainApp.js
          Foo.js
          AnotherComponent.js
-      
+
       //for flux/reflux
-      -actions 
+      -actions
         BarActionCreators.js
       -stores
         BazStore.js
-          
+
     - helpers
       - react
         addons.js
diff --git a/app/index.js b/app/index.js
index 888f39d..2fa6982 100644
--- a/app/index.js
+++ b/app/index.js
@@ -108,6 +108,26 @@ ReactWebpackGenerator.prototype.askForStylesLanguage = function () {
   }.bind(this));
 };
 
+// Allow to set the generated files suffix for the project when using components
+// @see https://github.com/newtriks/generator-react-webpack/issues/99
+ReactWebpackGenerator.prototype.askForComponentSuffix = function() {
+  var done = this.async();
+  this.prompt({
+    type: 'list',
+    name: 'componentSuffix',
+    message: 'Which file suffix do you want to use for components?',
+    choices: [
+      { name: '.js (default)', value: 'js' },
+      { name: '.jsx (deprecated)', value: 'jsx' }
+    ],
+    default: 'js'
+  }, function (props) {
+    this.env.options.componentSuffix = props.componentSuffix;
+    this.config.set('component-suffix', props.componentSuffix);
+    done();
+  }.bind(this));
+};
+
 ReactWebpackGenerator.prototype.readIndex = function readIndex() {
   this.indexFile = this.engine(this.read('../../templates/common/index.html'), this);
 };
diff --git a/script-base.js b/script-base.js
index d8746a0..6d16036 100644
--- a/script-base.js
+++ b/script-base.js
@@ -5,40 +5,51 @@ var yeoman = require('yeoman-generator');
 var generalUtils = require('./util.js');
 
 var Generator = module.exports = function Generator() {
-	yeoman.generators.NamedBase.apply(this, arguments);
+  yeoman.generators.NamedBase.apply(this, arguments);
 
-	// Add capitalize mixin
+  // Add capitalize mixin
   this._.mixin({ 'capitalize': generalUtils.capitalize });
   this._.mixin({ 'capitalizeFile': generalUtils.capitalizeFile });
-	this._.mixin({ 'capitalizeClass': generalUtils.capitalizeClass });
-	this._.mixin({ 'lowercase': generalUtils.lowercase });
+  this._.mixin({ 'capitalizeClass': generalUtils.capitalizeClass });
+  this._.mixin({ 'lowercase': generalUtils.lowercase });
 
-	this.appname = path.basename(process.cwd());
+  this.appname = path.basename(process.cwd());
 
-	this.appname = this._.slugify(this._.humanize(this.appname));
-	this.scriptAppName = this._.camelize(this._.capitalize(this.appname)) + generalUtils.appName(this);
-	this.classedFileName = this._.capitalizeFile(this.name);
+  this.appname = this._.slugify(this._.humanize(this.appname));
+  this.scriptAppName = this._.camelize(this._.capitalize(this.appname)) + generalUtils.appName(this);
+  this.classedFileName = this._.capitalizeFile(this.name);
   this.classedName = this._.capitalizeClass(this.name);
   this.stylesLanguage = this.config.get('styles-language');
   this.architecture = this.config.get('architecture');
 
-	if (typeof this.options.appPath === 'undefined') {
-		this.options.appPath = this.options.appPath || 'src';
-	}
+  if (typeof this.options.appPath === 'undefined') {
+    this.options.appPath = this.options.appPath || 'src';
+  }
 
-	if (typeof this.options.testPath === 'undefined') {
-		this.options.testPath = this.options.testPath || 'test/spec';
-	}
+  if (typeof this.options.testPath === 'undefined') {
+    this.options.testPath = this.options.testPath || 'test/spec';
+  }
 
-	if (typeof this.options.stylesPath === 'undefined') {
-		this.options.stylesPath = this.options.stylesPath || 'src/styles';
-	}
+  if (typeof this.options.stylesPath === 'undefined') {
+    this.options.stylesPath = this.options.stylesPath || 'src/styles';
+  }
 
-	var sourceRoot = '/templates/';
-	this.scriptSuffix = '.js';
-	this.reactSuffix = '.js';
+  var sourceRoot = '/templates/';
+  this.scriptSuffix = '.js';
+  this.reactSuffix = '.js';
 
-	this.stylesSuffix = '.css';
+  // Add support for generated file legacy fallback
+  // @see https://github.com/newtriks/generator-react-webpack/issues/99
+  this.reactComponentSuffix = this.config.get('component-suffix');
+  switch(this.reactComponentSuffix) {
+    case 'jsx':
+      this.reactComponentSuffix = '.jsx';
+      break;
+    default:
+      this.reactComponentSuffix = '.js';
+  }
+
+  this.stylesSuffix = '.css';
 
     switch(this.stylesLanguage) {
         case 'sass':
@@ -55,49 +66,49 @@ var Generator = module.exports = function Generator() {
             break;
     }
 
-	this.sourceRoot(path.join(__dirname, sourceRoot));
+  this.sourceRoot(path.join(__dirname, sourceRoot));
 };
 
 util.inherits(Generator, yeoman.generators.NamedBase);
 
 Generator.prototype.appTemplate = function (src, dest) {
-	yeoman.generators.Base.prototype.template.apply(this, [
-		path.join('javascript', src + this.scriptSuffix),
-		path.join(this.options.appPath, dest) + this.scriptSuffix
-	]);
+  yeoman.generators.Base.prototype.template.apply(this, [
+    path.join('javascript', src + this.scriptSuffix),
+    path.join(this.options.appPath, dest) + this.scriptSuffix
+  ]);
 };
 
 Generator.prototype.reactComponentTemplate = function (src, dest) {
-	yeoman.generators.Base.prototype.template.apply(this, [
-		path.join('javascript', src + this.reactSuffix),
-		path.join(this.options.appPath, dest) + this.reactSuffix
-	]);
+  yeoman.generators.Base.prototype.template.apply(this, [
+    path.join('javascript', src + this.reactSuffix),
+    path.join(this.options.appPath, dest) + this.reactComponentSuffix
+  ]);
 };
 
 Generator.prototype.testTemplate = function (src, dest) {
-	yeoman.generators.Base.prototype.template.apply(this, [
-		src + this.scriptSuffix,
-		path.join(this.options.testPath, dest) + this.scriptSuffix
-	]);
+  yeoman.generators.Base.prototype.template.apply(this, [
+    src + this.scriptSuffix,
+    path.join(this.options.testPath, dest) + this.scriptSuffix
+  ]);
 };
 
 Generator.prototype.stylesTemplate = function (src, dest) {
-	yeoman.generators.Base.prototype.template.apply(this, [
-		src + this.stylesSuffix,
-		path.join(this.options.stylesPath, dest) + this.stylesSuffix
-	]);
+  yeoman.generators.Base.prototype.template.apply(this, [
+    src + this.stylesSuffix,
+    path.join(this.options.stylesPath, dest) + this.stylesSuffix
+  ]);
 };
 
 Generator.prototype.htmlTemplate = function (src, dest) {
-	yeoman.generators.Base.prototype.template.apply(this, [
-		src,
-		path.join(this.options.appPath, dest.toLowerCase())
-	]);
+  yeoman.generators.Base.prototype.template.apply(this, [
+    src,
+    path.join(this.options.appPath, dest.toLowerCase())
+  ]);
 };
 
 Generator.prototype.generateSourceAndTest = function (appTemplate, testTemplate, targetDirectory) {
-	this.appTemplate(appTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
-	this.testTemplate(testTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
+  this.appTemplate(appTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
+  this.testTemplate(testTemplate, path.join(targetDirectory, this._.capitalizeFile(this.name)));
 };
 
 Generator.prototype.generateComponentTestAndStyle = function (componentTemplate, testTemplate, stylesTemplate, targetDirectory) {
diff --git a/templates/common/_webpack.config.js b/templates/common/_webpack.config.js
index c371895..b494d47 100644
--- a/templates/common/_webpack.config.js
+++ b/templates/common/_webpack.config.js
@@ -28,7 +28,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js'],
+    extensions: ['', '.js', '.jsx'],
     alias: {
       'styles': __dirname + '/src/styles',
       'mixins': __dirname + '/src/mixins',
@@ -39,12 +39,12 @@ module.exports = {
   },
   module: {
     preLoaders: [{
-      test: /\.js$/,
+      test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       loader: 'jsxhint'
     }],
     loaders: [{
-      test: /\.js$/,
+      test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       loader: 'react-hot!babel-loader'
     },<% if (stylesLanguage === 'sass') { %> {
diff --git a/templates/common/karma.conf.js b/templates/common/karma.conf.js
index cd51e87..76481b4 100644
--- a/templates/common/karma.conf.js
+++ b/templates/common/karma.conf.js
@@ -13,7 +13,8 @@ module.exports = function (config) {
       'test/spec/actions/**/*.js'<% } %>
     ],
     preprocessors: {
-      'test/spec/components/**/*.js': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
+      'test/spec/components/**/*.js': ['webpack'],
+      'test/spec/components/**/*.jsx': ['webpack']<% if(architecture === 'flux'||architecture === 'reflux') { %>,
       'test/spec/stores/**/*.js': ['webpack'],
       'test/spec/actions/**/*.js': ['webpack']<% } %>
     },
@@ -30,7 +31,7 @@ module.exports = function (config) {
           test: /\.png/,
           loader: 'url-loader?limit=10000&mimetype=image/png'
         }, {
-          test: /\.js$/,
+          test: /\.(js|jsx)$/,
           loader: 'babel-loader'
         },<% if (stylesLanguage === 'sass') { %> {
           test: /\.sass/,
diff --git a/templates/javascript/Component.js b/templates/javascript/Component.js
index 2ce6ed0..a01f952 100644
--- a/templates/javascript/Component.js
+++ b/templates/javascript/Component.js
@@ -23,7 +23,7 @@ var <%= classedName %> = React.createClass({<% if(rich){%>
 
   render: function () {
     return (
-        <div>
+        <div className="<%= classedName %>">
           <p>Content for <%= classedName %></p>
         </div>
       );
diff --git a/templates/spec/Component.js b/templates/spec/Component.js
index d639438..adf0fb6 100644
--- a/templates/spec/Component.js
+++ b/templates/spec/Component.js
@@ -5,7 +5,7 @@ describe('<%= classedName %>', function () {
   var <%= classedName %>, component;
 
   beforeEach(function () {
-    <%= classedName %> = require('components/<%= classedFileName %>.js');
+    <%= classedName %> = require('components/<%= classedFileName %><%= reactComponentSuffix %>');
     component = React.createElement(<%= classedName %>);
   });