diff --git a/app/index.js b/app/index.js
index c434b3f..e9d723c 100644
--- a/app/index.js
+++ b/app/index.js
@@ -107,6 +107,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 actions?',
+    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 %>);
   });