以结果为导向，写给刚学完前端三剑客和想要了解 React 框架的小伙伴，使得他们能快速上手（省略了历史以及一些不必要的介绍）。
再谈组件
React 组件的神奇之处就在于它们的可复用性，你可以创建由其他组件组成的组件，但是随着嵌套越来越多的组件，我们需要将它们拆分为不同的文件，以便轻松浏览文件并在更多地方重复使用它们。
比如在 src/App.js 中，我们创建两个组件：
const Profile = () => { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } const App = () => { return ( <div> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </div> ); } export default App; 复制代码
如果我们想把配置文件放在其他地方或者改变登陆屏幕，就需要把这两个组件从根组件文件中移出，这样可以使它们能更好地模块化以及更容易被复用，你可以：
- 新建一个 JS 文件放入组件
- 将组件导出
- 将其导入使用该组件的文件中
就像这样，新建一个 Gallery.js 文件：
// 新建的 src/Gallery.js 文件 const Profile = () => { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } // 重命名为Gallery const Gallery = () => { return ( <div> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </div> ); } // 导出组件 export default Gallery; 复制代码
原有的 App.js 文件：
// 导入所需组件 import Gallery from "./Gallery"; // import Gallery from './Gallery.js'; 这样也是可以的 export default function App() { return <Gallery />; } 复制代码
导入导出
export 有两种导出方式，默认导出和命名导出，两种导出对应的导入方式也不同。
一个文件只能有一个默认导出，但可以有任意多个命名导出，两者并不冲突，可以同时存在。
新建 src/Test.js 文件：
export function Button() { // 命名导出 ... } export function Nav() { // 命名导出 ... } export default function App() { // 默认导出 ... } 复制代码
导出方式不同，导入方式肯定不同：
- 命名导入函数名称必须与导出名称匹配，这也是称它为命名导入的原因
- 默认导入可以输入你想要的任意名称
在 src/App.js 导入组件：
// 命名导入 import { Button } from './Test'; import { Nav } from './Test.js'; // 可以带.js后缀 // 默认导入 import App from './Test'; import Apple from './Test'; // 任意名称 复制代码
如果文件只导出一个组件，我们选择默认导出，多个组件和值选择命名导出，更具体的导入导出请查看 MDN 文档。
但无论怎么样，请选择有意义的名称，尽量做到【见名知意】。
专栏
因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。
在更新完后会整合为一整篇，感谢关注和点赞！
