Bundle.jsは私のファイルの1つを認識していませんか？

Question

私はjavascript初心者であり、ちょうど反応を学び始めているので、私に同行してください。

私は小さなアプリを作るためにしようとしていますが、私は...私のいずれかのファイルが見つからないというエラーを取得しておく特にこの：

bundle.js：56不明なエラー：「モジュールが見つかりません./ components/search_bar "

私のファイル構造は、srcというフォルダ内にindex.jsがあり、次にコンポーネントと呼ばれるフォルダ内に検索バー（search_bar.js）があります。私はトリプルでそれらのスペルをチェックしましたが、私はこのエラーを引き続き受けます。

これは私のindex.js

import SearchBar from './components/search_bar'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
//Create a componant (some /HTML) 

const API_KEY = 'AIzaSyC3Z3qTpvAacDLYEIxaueKflFJbWvdIHsw'; 

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

// Put that componant on the page (the DOM) 

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

であり、これは私がここで間違ってやっているものに、私のようsearch_bar.js

import React, { Component } from 'react'; 

class SearchBar extends Component { 
    contructor(props) { 

    super(props); 
    // when user updates the search bar this term will get updated. 
    this.state = { term: ''}; 

    } 

    render() { 
    //update state 
    //use set state everywhere besides constructor!! 
    return (
     <div> 
     <input onChange={event => this.setState({term: event.target.value})} 
/> 
     Value of the input: {this.state.term} 
     </div> 
    ); 
    } 

} 


export default SearchBar; 

任意のアイデアですか？

Answer 1

次のディレクトリ構造を確認できますか？ my_project/src/index.js、私は、コンストラクタのうち、 's' を左my_project/components/search_bar.js

Answer 2

AHHH ...そうsearch_bar：

my_project/src/index.js

my_project/src/components/search_bar.js

代わりに次のようになりますあなたの現在のディレクトリ構造のように思えます.jsはコンパイルできませんでした。私は今約1時間これを見てきました...