diff --git a/readme.md b/readme.md
index dc922c1..25cc737 100644
--- a/readme.md
+++ b/readme.md
@@ -41,6 +41,7 @@ When you run GRC within your project the first time, it will ask you a series of
 ```json
 {
   "usesTypeScript": true,
+  "usesJsxFormat": false,
   "usesCssModule": true,
   "cssPreprocessor": "scss",
   "testLibrary": "Testing Library",
@@ -193,6 +194,7 @@ You can do so by extending the **generate-react-cli.json** config file like this
 ```json
 {
   "usesTypeScript": false,
+  "usesJsxFormat": false,
   "usesCssModule": true,
   "cssPreprocessor": "scss",
   "testLibrary": "Testing Library",
@@ -259,6 +261,7 @@ The keys represent the type of file, and the values are the paths that point to
 ```json
 {
   "usesTypeScript": false,
+  "usesJsxFormat": false,
   "usesCssModule": true,
   "cssPreprocessor": "scss",
   "testLibrary": "Testing Library",
@@ -437,6 +440,7 @@ You can do so by editing your **generate-react-cli.json** config file like so.
 ```json
 {
   "usesTypeScript": false,
+  "usesJsxFormat": false,
   "usesCssModule": false,
   "cssPreprocessor": "css",
   "testLibrary": "Testing Library",
diff --git a/src/utils/generateComponentUtils.js b/src/utils/generateComponentUtils.js
index d946065..0f5aabb 100644
--- a/src/utils/generateComponentUtils.js
+++ b/src/utils/generateComponentUtils.js
@@ -128,7 +128,8 @@ function componentDirectoryNameGenerator({ cmd, componentName, cliConfigFile, fi
 
 function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convertors }) {
   // @ts-ignore
-  const { usesStyledComponents, cssPreprocessor, testLibrary, usesCssModule, usesTypeScript } = cliConfigFile;
+  const { usesStyledComponents, cssPreprocessor, testLibrary, usesCssModule, usesTypeScript, usesJsxFormat } =
+    cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
   let filename = null;
@@ -149,7 +150,7 @@ function componentTemplateGenerator({ cmd, componentName, cliConfigFile, convert
     // --- Else use GRC built-in component template
 
     template = usesTypeScript ? componentTsTemplate : componentJsTemplate;
-    filename = usesTypeScript ? `${componentName}.tsx` : `${componentName}.js`;
+    filename = usesTypeScript ? `${componentName}.tsx` : usesJsxFormat ? `${componentName}.jsx` : `${componentName}.js`;
 
     // --- If test library is not Testing Library or if withTest is false. Remove data-testid from template
 
@@ -215,9 +216,13 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    const { usesTypeScript, usesStyledComponents, cssPreprocessor, usesCssModule } = cliConfigFile;
+    const { usesTypeScript, usesStyledComponents, cssPreprocessor, usesCssModule, usesJsxFormat } = cliConfigFile;
     if (usesStyledComponents) {
-      filename = usesTypeScript ? `${componentName}.styled.ts` : `${componentName}.styled.js`;
+      filename = usesTypeScript
+        ? `${componentName}.styled.ts`
+        : usesJsxFormat
+          ? `${componentName}.styled.jsx`
+          : `${componentName}.styled.js`;
       template = componentStyledTemplate;
     } else {
       const module = usesCssModule ? '.module' : '';
@@ -239,7 +244,7 @@ function componentStyleTemplateGenerator({ cliConfigFile, cmd, componentName, co
 
 function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, convertors }) {
   const { customTemplates } = cliConfigFile.component[cmd.type];
-  const { testLibrary, usesTypeScript } = cliConfigFile;
+  const { testLibrary, usesTypeScript, usesJsxFormat } = cliConfigFile;
   let template = null;
   let filename = null;
 
@@ -256,7 +261,11 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
     template = customTemplate;
     filename = customTemplateFilename;
   } else {
-    filename = usesTypeScript ? `${componentName}.test.tsx` : `${componentName}.test.js`;
+    filename = usesTypeScript
+      ? `${componentName}.test.tsx`
+      : usesJsxFormat
+        ? `${componentName}.test.jsx`
+        : `${componentName}.test.js`;
 
     if (testLibrary === 'Enzyme') {
       // --- Else use GRC built-in test template based on test library type
@@ -277,7 +286,7 @@ function componentTestTemplateGenerator({ cliConfigFile, cmd, componentName, con
 }
 
 function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, convertors }) {
-  const { usesTypeScript } = cliConfigFile;
+  const { usesTypeScript, usesJsxFormat } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
   let filename = null;
@@ -298,7 +307,11 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
     // --- Else use GRC built-in story template
 
     template = componentStoryTemplate;
-    filename = usesTypeScript ? `${componentName}.stories.tsx` : `${componentName}.stories.js`;
+    filename = usesTypeScript
+      ? `${componentName}.stories.tsx`
+      : usesJsxFormat
+        ? `${componentName}.stories.jsx`
+        : `${componentName}.stories.js`;
   }
 
   return {
@@ -309,7 +322,7 @@ function componentStoryTemplateGenerator({ cliConfigFile, cmd, componentName, co
 }
 
 function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, convertors }) {
-  const { usesTypeScript } = cliConfigFile;
+  const { usesTypeScript, usesJsxFormat } = cliConfigFile;
   const { customTemplates } = cliConfigFile.component[cmd.type];
   let template = null;
   let filename = null;
@@ -330,7 +343,11 @@ function componentLazyTemplateGenerator({ cmd, componentName, cliConfigFile, con
     // --- Else use GRC built-in lazy template
 
     template = usesTypeScript ? componentTsLazyTemplate : componentLazyTemplate;
-    filename = usesTypeScript ? `${componentName}.lazy.tsx` : `${componentName}.lazy.js`;
+    filename = usesTypeScript
+      ? `${componentName}.lazy.tsx`
+      : usesJsxFormat
+        ? `${componentName}.lazy.jsx`
+        : `${componentName}.lazy.js`;
   }
 
   return {
diff --git a/src/utils/grcConfigUtils.js b/src/utils/grcConfigUtils.js
index 6637f99..78415fc 100644
--- a/src/utils/grcConfigUtils.js
+++ b/src/utils/grcConfigUtils.js
@@ -18,6 +18,12 @@ const projectLevelQuestions = [
     name: 'usesTypeScript',
     message: 'Does this project use TypeScript?',
   },
+  {
+    type: 'confirm',
+    name: 'usesJsxFormat',
+    message: 'Do you want to use the .jsx file format for components?',
+    default: false,
+  },
   {
     type: 'confirm',
     name: 'usesStyledComponents',