Question

我正在尝试在笔记本电脑上设置一个基本的反应应用程序（Hello World）。我正在使用react和react-dom（版本15.5.4）以及babel，webpack和yarn来运行/测试它。

对于我在App.jsx中定义的纯函数组件，我得到未捕获的ReferenceError：Button未定义。以下是我使用的内容+应用程序目录结构。

App.jsx

import React from 'react';


/*
export default class App extends React.Component {
    render() {
        return(
            <div>
                <h1>Hello World</h1>
            </div>
            );
    }
}*/

const Button = () => {
    return(<button>Go</button>);
};

export default Button;

index.js

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

//ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Button />, document.getElementById('test'));

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App Setup</title>
  </head>
  <body>
    <!-- <div id="root"></div> -->
    <div id="test"></div>
  </body>
</html>

目录结构

<root_directory>
|_client
       |_components
                  |_App.jsx
       |_index.html
       |_index.js

如果还需要package.json，webpack config和.babelrc文件内容，请告诉我。

浏览器控制台显示以下错误。

Uncaught ReferenceError: Button is not defined
    at Object.<anonymous> (index_bundle.js:12891)
    at __webpack_require__ (index_bundle.js:20)
    at Object.<anonymous> (index_bundle.js:30981)
    at __webpack_require__ (index_bundle.js:20)
    at module.exports (index_bundle.js:66)
    at index_bundle.js:69

无法呈现反应功能组件

0 个答案: