How can I render a react application compiled in a bundle.js? - reactjs

Question

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:
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:
When I open the dummy index.html, I cannot see the React App component. There are no errors on the console as well.
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.
Here is my App.tsx file:
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) => {
this.setState({
dropdownlistCategory: e.target.value.CategoryID
});
}
state = { skip: 0, take: 5 }
pageChange = (event: any) => {
this.setState({
skip: event.page.skip,
take: event.page.take
});
}
render() {
return (
<div className="App">
<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)}>
<GridColumn field="null" title=" " cell={EditIconComponent} resizable={false} width="50px"/>
<GridColumn field="null" title=" " cell={UploadIconComponent} resizable={false} width="50px"/>
<GridColumn field="technology" title="Technology" />
<GridColumn field="marketcost" title="Market/Cost"/>
<GridColumn field="num" title="Job #" />
<GridColumn field="locationCode" title="Location Code" />
<GridColumn field="siteName" title="Site Name" />
<GridColumn field="pin" title="PIN" />
<GridColumn field="status" title="Job Status" />
</Grid>
</div>
);
}
}
Here is the entire index.tsx file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, 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();
And here is my package.json
{
"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": [
">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"
}
}
UPDATE
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:
Thank you!

Answer 1

I found the issue. I had an issue in my Webpack.config.js file. I set the entry to src/App.tsx, but I changed it to src/index.tsx.
Thank you so much everyone for your help!
Have a good day
Here is my Webpack.config if someone needs it:
"use strict"
const path = require('path');
module.exports = {
entry: './src/index.tsx',
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
devServer: {
publicPath: "/",
contentBase: "./public",
hot: true
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: "inline-source-map",
module: {
rules: [{
test: /\.(ts|tsx)$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
}
};