当我更新代码并重建解决方案时，看不到响应应用程序的更改答案

【问题标题】：Can't see changes to react application When I update the code and rebuild the solution当我更新代码并重建解决方案时，看不到响应应用程序的更改
【发布时间】：2018-08-29 02:41:29
【问题描述】：

我使用这个tutorial 在 Visual Studio 中创建一个 Node.js 和 React 应用程序。我成功地遵循了教程中的所有内容，然后按了 Ctrl + F5，我收到了 Welcome to React 消息。

当我向 app.tsx 添加更多代码时，问题就出现了。我又编写了两个组件并渲染了它们，但是当我构建解决方案并运行应用程序时，与最初的“欢迎使用 React ！！”没有任何变化信息。这里是我添加到 app.tsx 的附加代码：

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to Reactive!!</h1>
        );
    }
}

class Paragraph extends React.Component {
    render() {
        return (
            <p1>We the best music!! </p1>
        );
    }
}

class ShoppingList extends React.Component {
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));
ReactDOM.render(<Paragraph />, document.getElementById('main'));
ReactDOM.render(<ShoppingList />, document.getElementById('list'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这是我在 index.html 文件中的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="root"></div>
    <div id="main"></div>
    <div id="list"></div>
    <!-- scripts -->
    <script src="./dist/app-bundle.js"></script>
</body>
</html>

我应该注意，无论我将什么代码添加到 index.html 或 app.tsx，当我构建解决方案时，都会显示相同的 Welcome to React 消息。这是消息的图片：

我应该进一步注意，每次构建 (Ctrl + F5) 时，我都会收到一条消息说项目已过时，我要重建它吗？

这是我的 webpack 配置：

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
};

这是我的 package.json：

{
  "name": "dcwims-menu",
  "version": "0.0.0",
  "description": "DCWIMS MENU",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "dependencies": {
    "express": "4.16.2",
    "path": "0.12.7",
    "react": "16.4.0",
    "react-dom": "16.4.0",
    "ts-loader": "4.0.1",
    "typescript": "2.7.2",
    "webpack": "4.1.1",
    "webpack-cli": "2.0.11"
  }
}

【问题讨论】：

请检查您的控制台
控制台什么都没有...构建成功，没有错误！
请分享你的包 json 和 webpack
当您收到消息说项目已过期时，您单击哪个按钮？
看起来你可能需要重新运行this step...这很烦人。这就是重建你的包的原因。

标签： javascript node.js reactjs

【解决方案1】：

嗯，通常使用 React 你只留下一个 index.html

<div id="root"></div>

并在里面放一个App组件

ReactDOM.render(<App />, document.getElementById('root'));

然后在 App Component 中导入所有其他组件：

import { Loading } from '../components/loading.js'
import { GridView } from '../components/news/GridView'
import { TextView } from '../components/news/TextView'
import { FilterTag } from '../components/shared/FilterTag'

class App extends React.Component {
    render() {
        return (
            <div>
            <Loading />
            <GridView />
            <TextView />
            <FilterTag />
            </div>
        );
    }
}

【讨论】：

true.. 但我只是想看看变化！！