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

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

reactjs webpack

如何使用webpack/reactjs运行jsx组件？,reactjs,webpack,webpack-dev-server,Reactjs,Webpack,Webpack Dev Server,我正在研究reactjs/webpack，我已经构建了一个简单的reactjs应用程序。在app.js中，我得到： class Application extends React.Component { render() { console.log('testing ') return <div> <h1>Hello, ES6 w React 0

我正在研究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'));

我还使用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组件

您需要实际渲染组件的某个位置。例如：

index.html

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

index.js

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

ReactDOM.render（，document.querySelector（“#app”）；

编辑：

您编辑了问题并将其添加到代码

React.render（）

。。。但是它应该是

ReactDOM.render（）

，除非您使用的是相当旧的React版本，并且正如所指出的，组件名称不匹配。。。如果这是您的实际代码，您应该会看到各种控制台错误。

我克隆了您的repo并发现了错误：

首先，如前所述，您的类名为

Applications

，您正在呈现

（注意url:path与输出文件名匹配）。您可以稍后更改此选项，并使用--content base
等选项为自定义文件夹（创建自己的索引html文件）提供服务
现在应该呈现组件。
console中有错误吗？您必须使用ReactDOM.render
，在DOM中呈现顶级元素。您是否在某处进行此操作？您好，刚刚添加了一些代码和引用到您正在呈现的repo
，但您的类是应用程序
。你应该调用ReactDOM.render
，而不是React.render
。只是尝试了这个，没有运气只是尝试了你的建议。没有错误。我使用gulp已经有一段时间了（我会自己尝试webpack dev server
），但我怀疑您的代码是否正在执行。您是否应该将HTML模板复制到dist
？非常感谢您详尽的回答，只有一个问题。如果bundle.js文件在内存中运行，我在哪里需要它？@bierhier不客气。如果构建不在内存中，服务器将在内存中构建文件。尝试将配置键output.path
修改为\uu dirname+'/dist'
并运行node\u modules/.bin/webpack
命令。它会将您的包生成到dist
文件夹中。然后运行node\u modules/.bin/webpack dev server，并尝试修改组件（标记中的文本）。它将在浏览器中更新。您来自巴西吗？巴西烧烤是我最喜欢的食物：）@bierhier是的！在巴西南部，我们做了一个很棒的烧烤（顺便说一句：）
ReactDOM.render(<Applications />, document.querySelector("#app"));

ReactDOM.render(<Application />, document.getElementsByTagName("body")[0]);