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

Question

我正在思考 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组件？

Answer 1

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

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 并且正如指出的那样组件名称不匹配...如果这是您的实际代码，您应该会看到各种控制台错误。

Answer 2

我克隆了您的存储库并发现了问题所在：

首先，如前所述，您的 class 被命名为 Applications 并且您正在渲染 <Application />。因此，将 class 重命名为 Application.
而不是使用 React.render，你应该调用 ReactDOM.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'。这样，当运行ning webpack命令时，它会在这个位置生成捆绑文件：dist/bundle.js。

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

转到您的浏览器并指向：http://localhost:8080/bundle（注意 url：路径与输出文件名匹配）。您可以稍后更改此设置并使用 --content-base.

等选项提供您的自定义文件夹（创建您自己的索引 html 文件）

组件现在应该被渲染。

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

How to run jsx component with webpack/reactjs?

reactjs

webpack

webpack-dev-server