title: HTML Component not rendering in electron react app
body: <p>The TitleBar from Component.js is not rendering as html in my electron app, I get no errors and have confirmed the file paths.</p>
  <p>Component.js,</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  export default class TitleBar extends React.Component {
      render() {
          return(
              &lt;div id=&quot;TitleBar&quot;&gt;
                  &lt;button id=&quot;minButton&quot;&gt;_&lt;/button&gt;
                  &lt;button id=&quot;maxButton&quot;&gt;[]&lt;/button&gt;
                  &lt;button id=&quot;exitButton&quot;&gt;X&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default class NavBar extends React.Component {
      render() {
          return(
              &lt;div id=&quot;NavBar&quot;&gt;
                  &lt;button id=&quot;homeButton&quot;&gt;Home&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p>Index.js,</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import TitleBar from &quot;./Components.js&quot;;
  
  console.log('intro');
  ReactDOM.render(&lt;TitleBar /&gt;, document.getElementById('app'));
  </code></pre>
  <p>index.html,</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;DevFlow&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;index.css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;main id=&quot;app&quot;&gt;&lt;/main&gt;
      &lt;script defer type=&quot;text/babel&quot; src=&quot;./index.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>When I run the command &quot;npm start&quot; the application comes up, however there is no component within the  tags. Any assistance would be greatly appreciated. I will also include my Main.js although I don't think it would be necessary to diagnose my issue. Thanks</p>
  <p><a href="https://i.stack.imgur.com/8qIBg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8qIBg.png" alt="enter image description here" /></a></p>
  <p>Main.js,</p>
  <pre><code>const { app, BrowserWindow } = require('electron');
  const path = require('path');
  
  if (require('electron-squirrel-startup')) {
    app.quit();
  }
  
  const createWindow = () =&gt; {
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        nodeIntegration: true,
      },
      frame: false
    });
  
    mainWindow.loadFile(path.join(__dirname, 'index.html'));
  
    mainWindow.webContents.openDevTools();
  };
  
  app.on('ready', createWindow);
  
  app.on('window-all-closed', () =&gt; {
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });
  
  app.on('activate', () =&gt; {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
  </code></pre>