如何使用 webpack 显示组件？ [关闭]答案

【问题标题】：How to display the component with webpack? [closed]如何使用 webpack 显示组件？ [关闭]
【发布时间】：2016-10-21 05:03:18
【问题描述】：

我正在尝试为 react/webpack/gulp 实现 HMR，这是我的组件：

import React from 'react';

class main extends React.Component {

    constructor(props) {
        super(props);

    }
    render() {

        return (
            <div>Hi this is fdsfdsfs</div>
        );
    }
}

export default main;

这是我的 index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './main';


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

当我更改文件时，我得到：

[HMR] Waiting for update signal from WDS...
client:37 [WDS] Hot Module Replacement enabled.
2client:37 [WDS] App updated. Recompiling...
client:37 [WDS] App hot update...
only-dev-server.js:69 [HMR] Checking for updates on the server...
log-apply-result.js:20 [HMR] Updated modules:
log-apply-result.js:22 [HMR]  - 245
only-dev-server.js:55 [HMR] App is up to date.

问题是为什么我看不到页面上呈现的任何内容？另见here

【问题讨论】：

它应该是<App /> 而不是<main /> - 另外，按照约定用大写命名你的组件，小写标签将被视为常规HTML标签。跨度>
哈哈，很快，谢谢

标签： reactjs gulp webpack-dev-server

【解决方案1】：

React 组件名称必须始终以大写字母开头，否则它们将被视为常规 HTML 标记。此外，您将主要组件作为 App 导入并再次将其用作主要组件，这是不正确的。

import React from 'react';

class Main extends React.Component {

    constructor(props) {
        super(props);

    }
    render() {

        return (
            <div>Hi this is fdsfdsfs</div>
        );
    }
}

export default Main;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './main';


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

【讨论】：