React.jsでbrowserifyのインポートが機能しない

Question

私はReact.jsを学習していて、私のfirtコンポーネントをレンダリングすることはできません。私のプロジェクトは、次のようになります。

javascript 
    | 
    --components 
    | | 
    | ---- searchbar.jsx 
    | 
    |  
    --app.jsx 

searchbar.jsx：

export default class SearchBar extends React.Component { 
    //some code 

    render(){ 
     //some code 
    } 
} 

app.jsxは次のようになります。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { SearchBar } from './components/searchbar.jsx'; 

ReactDOM.render(

     <App /> 
     , 
    document.getElementById('content') 
); 

class App extends React.Component { 



    render() { 
     <div> 
      <SearchBar placeHolder='search bar text'/> 
     </div> 
    } 
} 

コンパイルしてパックするとエラーはありません。私はそれを実行したときしかし、私は次のエラーを取得しています：私はapp.jsxのすべてのコードを入れて、すべてが...べきと検索バーが表示されているとして働いて、その後何のインポートを使用していないが、私は入れたい

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 
    printWarning 
    warning 
    createElement 
    1../components/searchbar.jsx 

異なるファイルのコンポーネント。どうすればいいですか？

Answer 1

検索バーモジュールは、デフォルト値ではなく、名前の輸出をエクスポート（中括弧で囲むことで、あなたが名前のエクスポートを必要とブレース）

あなたはさらにimport { SearchBar }

import SearchBarに変更する必要があり、あなたはの宣言を移動する必要がありますアプリケーションはファイルの先頭に向かって使用する前に宣言する必要があります