如何使用 webpack/reactjs 运行 jsx 组件？答案

【问题标题】：How to run jsx component with webpack/reactjs?如何使用 webpack/reactjs 运行 jsx 组件？
【发布时间】：2017-06-25 12:12:22
【问题描述】：

我正在研究 reactjs/webpack，并且我已经构建了一个简单的 reactjs 应用程序。在 app.js 我得到了：

class Application extends React.Component {
            render() {
                console.log('testing ')
                return <div>
                    <h1>Hello, ES6 w React 0.13!</h1>
                </div>;
            }
  }

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

由于某种原因，当我运行 webpackserver 时，没有显示该组件。这是我的 webpack.config：

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './app/app.js',
    output: {
        path: __dirname + '/',
        publicPath: './dist/',
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 8080
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

我也在使用 gulp 启动服务器：

gulp.task('webpack-dev-server', function (c) {
    var myConfig = Object.create(webpackConfig);

    myConfig.devtool = 'eval';
    myConfig.debug = true;

    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        stats: {
            colors: true
        }
    }).listen(myConfig.devServer.port, 'localhost', function (err) {
        if (err) {
            throw new gutil.PluginError('webpack-dev-server', err);
        }
        gutil.log('[webpack-dev-server]', 'http://localhost:8080/index.html');
    });
});

如何显示 jsx 组件？

【问题讨论】：

控制台有错误吗？您必须在 DOM 中使用 ReactDOM.render 渲染您的顶级元素，您是否在某处这样做？
嗨，刚刚添加了一些代码和参考到 repo
您正在渲染<Application />，但您的课程是Applications。你应该打电话给ReactDOM.render，而不是React.render。
刚试过这个，没有运气

标签： reactjs webpack webpack-dev-server

【解决方案1】：

我克隆了你的仓库并发现了问题：

首先，如前所述，你的类被命名为Applications，你正在渲染<Application />。因此，请将您的课程重命名为 Application。
您应该调用ReactDOM.render，而不是使用React.render
渲染到<body> 标签。由于 HTML 是由 webpack-dev-server 自动生成的（默认情况下），因此没有 root 或 app 元素。像这样：
```
ReactDOM.render(<Application />, document.getElementsByTagName("body")[0]);
```
您可以从配置文件中删除publicPath: './dist/'。它影响了webpack-dev-server 根文件夹。让path: __dirname + '/',，进行测试。

但是，您可以将其更改为path: __dirname + '/dist'。这样，当运行webpack 命令时，它会在这个位置生成捆绑文件：dist/bundle.js。

请注意，webpack-dev-server 不会生成输出文件。它在内存中构建它。
最后，您可以运行webpack-dev-server，从您的应用根文件夹node_modules/.bin/webpack-dev-server 调用。这里不需要咕哝，因为我们只是在测试。

转到您的浏览器并指向：http://localhost:8080/bundle（注意 url：路径与输出文件名匹配）。您可以稍后更改此设置并使用 --content-base 等选项提供您的自定义文件夹（创建您自己的索引 html 文件）。

现在应该渲染组件。

【讨论】：

非常感谢您的详尽回答，只有一个问题。如果 bundle.js 文件在内存中运行，我在哪里需要它？
@bierhier 不客气。如果构建不存在，服务器会在内存中构建文件。尝试将您的配置键 output.path 修改为 __dirname + '/dist' 并运行 node_modules/.bin/webpack 命令。它会将您的捆绑包生成到dist 文件夹中。然后运行node_modules/.bin/webpack-dev-server 并尝试修改您的组件（
标签内的文本）。它将在浏览器中更新。
你来自巴西？巴西烧烤是我最喜欢的食物:)
@bierhier 是的！在巴西南部，我们做了一个很棒的烧烤顺便说一句:)

【解决方案2】：

您需要在某处实际渲染组件。例如：

index.html

<html>
  <body>
    <div id="app" />
    <script src="bundle.js"></script>
  </body>
</html>

index.js

ReactDOM.render(<Applications />, document.querySelector("#app"));

编辑：

您编辑了您的问题并添加到您的代码 React.render()... 但它应该是 ReactDOM.render() 除非您使用的是相当旧的 React 版本并且正如所指出的组件名称不匹配...您应该如果这是您的实际代码，则会看到各种控制台错误。

【讨论】：

刚刚尝试了您的建议，但没有运气。没有错误。
我使用 gulp 已经有一段时间了（我会自己尝试webpack-dev-server），但我怀疑您的代码是否正在执行。您不应该将您的 HTML 模板复制到 dist 吗？

标签内的文本）。它将在浏览器中更新。