React擴展關鍵字Webpack無法編譯

Question

我是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服務器，它在以下鏈接中給出了錯誤：

錯誤圖片

./src/components/search_bar.js中的錯誤模塊構建失敗：語法錯誤：意外的令牌（3:16）Webpack：編譯失敗。

Answer 1

這是一個錯字

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

從const變為class

Answer 2

const擴展一個類。 它本身必須是一個類。 因此， const應該更改為class 。