导入（Import）和导出（exporing）组件

在一个文件中声明多个组件，但是文件变得太大的话就不方便查看了。要解决此问题，你可以将一个组件放到一个单独的文件中并（导出） export

组件，然后在另一个文件中（导入） import 该组件。

每个 React 组件就是 JavaScript 函数，函数中可以书写 markup，这些 markup 将由 React 渲染到浏览器中。React 组件使用名为 JSX 的语法扩展来支持 markup。JSX 看上去就像 HTML 一样，但它的语法比较严格，并且可以显示动态信息。

如果我们将现有的 HTML markup 粘贴到 React 组件中，可能会报错：

组件之间的依赖代码栗子：

Gallery.js 文件
//导入应该一个组件Profile
import Profile from './Profile.js';
//导入自己，命名Gallery
export default function Gallery() {
  return (
    
      
Amazing scientists
      
      
      
    
  );
}
Profile.js 文件
const person = {
  name: 'Gregorio',
};
//可以在 JSX 中使用大花括号插入变量
export default function Profile() {
  return (
  	
	  	
{person.name}'s Todos
	    
   
  );
}