Javascript React.js与browserify导入不起作用

我正在学习React.js，无法使我的第一个组件进行渲染。我的项目如下所示：

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中，不使用导入时，一切都正常工作，搜索栏也显示出来。。但我想把组件放在不同的文件中。那么我该怎么做呢？

搜索栏模块导出一个默认值，而不是命名导出（通过用大括号括起来，您需要命名导出）

您应该将

import{SearchBar}

更改为

import SearchBar

---

此外，您应该将应用程序的声明移到文件的开头，在使用之前应该声明它

否，它没有帮助。我仍然得到相同的错误，是的，我确保我重新编译和打包了。我在gulp文件中使用watchify。请尝试在导入后移动

应用程序

类声明，然后再将其与

ReactDOM.render一起使用。从我所看到的
class
声明不像
var
声明那样被提升
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