我如何呈现在bundle.js中编译的React应用程序？

Question

所以我有一个React应用程序，该应用程序已编译为bundle.js文件。 React应用程序的index.tsx文件显示该App组件将在ID为“ scheduleSitesGrid2”的DOM元素中呈现，如下图所示：

我已经能够捆绑此React应用并将其捆绑在Azure存储上。实际上，如果我创建一个仅包含div和带有src的脚本的HTML文件，该src指向azure网址，则可以在Chrome DevTools中看到bundle.js：

当我打开虚拟index.html时，我看不到React App组件。控制台上也没有错误。

我还试图在App组件中添加断点，并且它们在页面加载时被触发。我只是想知道，即使我插入具有有效ID的div，index.html页面的空白处也是如此。

这是我的App.tsx文件：

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>
    );
  }
}

这里是整个index.tsx文件：

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();

这是我的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"
  }
}

更新

当我创建捆绑包时，public / index.html是一个空文件。如果我添加一些基本的html代码并包含ID为scheduleSitesGrid2的div，则可以看到App组件运行良好：

谢谢！

Answer 1

我发现了问题。我的Webpack.config.js文件有问题。我将条目设置为src / App.tsx，但将其更改为src / index.tsx。

非常感谢大家的帮助！

祝你有美好的一天

如果有人需要，这是我的Webpack.config：

"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'
            ]
        }]
    }
};