Create React App 导入组件

感谢 Webpack ，该项目设置支持 ES6 modules。
虽然你仍然可以使用 require() 和 module.exports ，但我们建议你使用 import 和 export。

例如：

Button.js

import React, { Component } from 'react';

class Button extends Component {
  render() {
    // ...
  }
}

export default Button; // 别忘了使用 export default ！ 

DangerButton.js

import React, { Component } from 'react';
import Button from './Button'; // 从其他文件导入一个组件

class DangerButton extends Component {
  render() {
    return <Button color="red"/>;
  }
}

export default DangerButton;

请注意 默认导出和命名导出之间的区别。 这是一个常见的错误来源。

我们建议你在模块仅导出单个内容（例如，组件）时坚持使用默认import 和 export。 当你使用 export default Button 时，可以使用 import Button from './Button'导入。

命名导出对于导出多个函数的实用程序模块很有用。 一个模块最多可以有一个默认导出和任意多个命名导出。

了解有关ES6模块的更多信息：

• 什么时候使用花括号？
• 探索ES6：Modules （中文）
• 了解ES6：Modules