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

如何显示jsxcomponent？

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

我克隆了你的回购，发现了什么错误：

首先，如上所述，您的班级名为Applications，而您正在渲染<Application />。因此，请将您的课程重命名为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'。这样，当运行webpack命令时，它将在此位置生成捆绑文件：dist/bundle.js。

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

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

现在应该渲染组件。

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

2 个答案: