React extends 关键字 webpack 编译失败答案

【问题标题】：React extends keyword webpack failed to compileReact extends 关键字 webpack 编译失败
【发布时间】：2019-03-13 20:36:03
【问题描述】：

我是 React 的初学者，当我编译下面的代码时会出错。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar'

const API_KEY = '';

// this component should produce some html
// Some HTML

const App = () => {
    return (
        <div>
            <SearchBar/>
        </div>
    )
};

// aciklama
ReactDOM.render(<App/>, document.querySelector('.container'));

search_bar.js：

import React, {Component} from 'react';

const SearchBar extends Component {
    render() {
        return <input />;
    }
}

export default SearchBar;

我从终端启动 npm 服务器，它在下面的链接中给出了错误：

error picture

./src/components/search_bar.js 中的错误模块构建失败：SyntaxError: Unexpected token (3:16) webpack: 编译失败。

【问题讨论】：

嗨！请作为文本包含错误消息，而不仅仅是作为文本的图片。为什么：meta.stackoverflow.com/q/285551/157247
不要在此处发布您的 API 密钥！

标签： javascript reactjs

【解决方案1】：

打错字了

class SearchBar extends Component {  //fixed
    render(){
        return <input />;
    }
}

从const 更改为class

【讨论】：

【解决方案2】：

一个 const 扩展一个类。它必须是一个类本身。所以，const 应该改为class。

【讨论】：