React 之 组件模块依赖（三）

导入（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 (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Profile.js 文件
const person = {
  name: 'Gregorio',
};
//可以在 JSX 中使用大花括号插入变量
export default function Profile() {
  return (
  	<>
	  	<h1>{person.name}'s Todos</h1>
	    <img
	      src="https://i.imgur.com/QIrZWGIs.jpg"
	      alt="Alan L. Hart"
	    />
   </>
  );
}