title: How can I render a react application compiled in a bundle.js?
body: <p>So I have a React application that was compiled into a bundle.js file. The index.tsx file of the React application shows that the App component will be rendered in a DOM element with ID "scheduleSitesGrid2" as showed on this picture:</p>
  
  <p><a href="https://i.stack.imgur.com/K8LFa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K8LFa.png" alt="index.tsx"></a></p>
  
  <p>I have been able to bundle this react app and host the bundle on Azure Storage. In fact, if I create a simple HTML file that only contains a div and a script with a src pointing to the azure url, I am able to see the bundle.js in Chrome DevTools:</p>
  
  <p><a href="https://i.stack.imgur.com/wIz0W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wIz0W.png" alt="dummy index.html"></a>
  <a href="https://i.stack.imgur.com/Qizvr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qizvr.png" alt="chrome devtools"></a></p>
  
  <p>When I open the dummy index.html, I cannot see the React App component. There are no errors on the console as well.</p>
  
  <p><a href="https://i.stack.imgur.com/UPein.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UPein.png" alt="page"></a></p>
  
  <p>I also tried to add breakpoints in the App component and they are triggered when the page loads. I am just wondering where the index.html page is blank even if I inserted a div with the valid ID.</p>
  
  <p>Here is my App.tsx file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import '@progress/kendo-theme-default/dist/all.css';
  import './App.css';
  import jobs from './jobs.json';
  import { Grid, GridColumn } from '@progress/kendo-react-grid';
  import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
  import EditIconComponent from "./components/editicon.component";
  import UploadIconComponent from "./components/uploadicon.component";
  
  export default class App extends Component {
  
    handleDropDownChange = (e: DropDownListChangeEvent) =&gt; {
      this.setState({
        dropdownlistCategory: e.target.value.CategoryID
      });
    }
  
    state = { skip: 0, take: 5 }
  
      pageChange = (event: any) =&gt; {
          this.setState({
              skip: event.page.skip,
              take: event.page.take
          });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
            &lt;Grid
              resizable={true}
              pageable={true}
              skip={this.state.skip}
              take={this.state.take}
              total={jobs.length}
              onPageChange={this.pageChange}
              data={jobs.slice(this.state.skip, this.state.take + this.state.skip)}&gt;
              &lt;GridColumn field="null" title=" " cell={EditIconComponent} resizable={false} width="50px"/&gt;
              &lt;GridColumn field="null" title=" " cell={UploadIconComponent} resizable={false} width="50px"/&gt;
              &lt;GridColumn field="technology" title="Technology" /&gt;
              &lt;GridColumn field="marketcost" title="Market/Cost"/&gt;
              &lt;GridColumn field="num" title="Job #" /&gt;
              &lt;GridColumn field="locationCode" title="Location Code" /&gt;
              &lt;GridColumn field="siteName" title="Site Name" /&gt;
              &lt;GridColumn field="pin" title="PIN" /&gt;
              &lt;GridColumn field="status" title="Job Status" /&gt;
            &lt;/Grid&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p>Here is the entire index.tsx file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('scheduleSitesGrid2'));
  
  // If you want your app to work offline and load faster, you can change
  // unregister() to register() below. Note this comes with some pitfalls.
  // Learn more about service workers: .....
  serviceWorker.unregister();
  
  </code></pre>
  
  <p>And here is my package.json</p>
  
  <pre><code>{
    "name": "kendo-grid-test",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@progress/kendo-data-query": "^1.5.2",
      "@progress/kendo-drawing": "^1.6.0",
      "@progress/kendo-react-dateinputs": "^3.6.0",
      "@progress/kendo-react-dialogs": "^3.6.0",
      "@progress/kendo-react-dropdowns": "^3.6.0",
      "@progress/kendo-react-grid": "^3.6.0",
      "@progress/kendo-react-inputs": "^3.6.0",
      "@progress/kendo-react-intl": "^3.6.0",
      "@progress/kendo-theme-default": "^4.5.2",
      "@types/jest": "24.0.19",
      "@types/node": "12.11.6",
      "@types/react-dom": "16.9.2",
      "react": "^16.11.0",
      "react-dom": "^16.11.0",
      "react-scripts": "3.2.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "./node_modules/.bin/webpack",
      "pack": "webpack --config webpack.config.js",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "@babel/core": "^7.6.4",
      "@babel/preset-env": "^7.6.3",
      "@babel/preset-react": "^7.6.3",
      "@types/react": "^16.9.9",
      "babel-loader": "^8.0.6",
      "glob": "^7.1.5",
      "source-map-loader": "^0.2.4",
      "ts-loader": "^6.2.1",
      "typescript": "^3.6.4",
      "uglifyjs-webpack-plugin": "^2.2.0",
      "webpack-cli": "^3.3.10"
    }
  }
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>When I created the bundle, public/index.html was an empty file. If I add some basic html code and include the div with id scheduleSitesGrid2, I see that App component is working fine:
  <a href="https://i.stack.imgur.com/nRm2N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nRm2N.png" alt="grid"></a></p>
  
  <p>Thank you!</p>