如何使用 webpack 显示组件？

Question

我正在尝试为 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

Answer 1

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

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 Main from './main';


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

如何使用 webpack 显示组件？

How to display the component with webpack?

reactjs

gulp

webpack-dev-server