@modern-js/main-doc 0.0.0-next-20221116121040

package/zh/tutorials/first-app/c03-ide/3.2-hints-in-ide.md

@@ -0,0 +1,66 @@
+---
+title: IDE 中的自动提示
+---
+
+打开任意 JS/TS 文件（比如 `src/App.jsx`），底部状态栏右侧应该有显示 ESLint，点击可以看到运行 log，应该没有报错。
+
+接下来对 `App.jsx` 代码做如下修改（修改过程中不要保存），增加无用的函数参数、去掉换行、单引号改成双引号、增加缩进（可以直接复制下面的代码替换 App.jsx 的内容），注意修改过程中**先不要保存文件**。
+
+```js
+import { Switch, Route } from '@modern-js/runtime/router';
+
+import './App.css';
+
+const App = (a) => (
+  <Switch>
+    <Route exact={true} path="/">
+      <div className="container-box">
+        <main>
+          <div className='logo'>
+            <img
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png"
+              width="300"
+              alt="Modern.js Logo"
+            />
+          </div>
+          <p className="description">
+            Get started by editing <code className="code">src/App.tsx</code>
+          </p>
+          <div className="grid">
+            <a href="#" className="card">
+              <h2>Quick Start</h2>
+            </a>
+            <a href="#" className="card">
+              <h2>Handbook</h2>
+            </a>
+            <a href="#" className="card">
+              <h2>API Reference </h2>
+            </a>
+            <a
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="card">
+              <h2>Community </h2>
+            </a>
+          </div>
+        </main>
+        <footer className="footer">
+          <a href="#" target="_blank" rel="noopener noreferrer">
+            Powered by Modern.JS
+          </a>
+        </footer>
+      </div>
+    </Route>
+    <Route path="*">
+      <div>404</div>
+    </Route>
+  </Switch>
+);
+
+export default App;
+```
+
+可以在 VS Code 中看到修改过的代码出现了问题提示，点击底部界面中的 Problems 一栏，可以看到问题列表。
+
+![vsc-with-error](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-with-error.png)

package/zh/tutorials/first-app/c03-ide/3.3-autofix-in-ide.md

@@ -0,0 +1,11 @@
+---
+title: IDE 中的自动修复
+---
+
+直接保存当前文件（CMD/Ctrl + S），应该会看到代码风格相关的问题都自动被修复了（有时每次保存只能修复一部分，需要多保存几次，直到没变化）。
+
+只剩下**无用的函数参数**问题，需要人工修复：
+
+![vsc-how-to-fix](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/vsc-how-to-fix.png)
+
+问题提示中，显示了这个问题来自 ESLint 的 `no-unused-vars` 规则，带下划线的是 ESLint 规则名称，按住 CMD/Alt 键点击，可以打开这条规则的文档，查看问题的解释和解决方法。

package/zh/tutorials/first-app/c03-ide/3.4-autofix-in-cli.md

@@ -0,0 +1,63 @@
+---
+title: 命令行中的自动修复
+---
+
+提交前的自动准入检查，跟 VS Code 里的保存一样，会尽可能自动格式化代码和修复问题，只有遇到无法自动修复的问题，才会报错阻止提交。
+
+我们添加一段可自动修复的问题代码（如果在 VS Code 里添加，保存时会自动修复，所以用 CLI 来添加）：
+
+```bash
+echo ';' >> src/App.jsx
+```
+
+打开 `App.jsx`，可以看到末尾多了一个 ';'，有问题提示。
+
+提交代码：
+
+```bash
+git commit -am "test: 再次测试准入检查"
+git status
+```
+
+可以看到虽然仍然提交失败，但新增的问题被自动修复了。
+
+手动把参数 a 的问题修复（删除 a），再次添加 ';'，提交代码：
+
+```bash
+echo ';' >> src/App.jsx
+git commit -am "test: 再次测试准入检查"
+git log HEAD --stat --graph --name-status
+```
+
+可以看到提交成功了，新增的问题被自动修复，并且自动被 stage。
+
+:::info 注
+在真实项目的开发中，对于以下情况，可以在提交时增加 -n 或 --no-verify 参数，破例跳过准入检查：
+1. Hotfix
+2. merge 过程中解决了冲突，变更的文件里包含别人的代码
+3. 旧项目迁移到 Modern.js，最初做统一自动修复的提交
+:::
+
+提交前的自动准入检查，只会检查和修复这次提交中有变更的文件（已经 stage 的文件），也就是说，只会强制要求这次工作过程中修改过的文件没有问题，不会要求你去解决这次工作无关的文件的问题。
+
+如果要对整个仓库的所有文件做 lint 检查和自动修复，可以手动执行 `lint` 命令，比如：
+
+```bash
+echo ';' >> src/App.jsx
+pnpm run lint
+```
+
+:::info 注
+上述命令速度慢，不常用。旧项目刚迁移到 Modern.js 框架的时候，可以用这个命令对所有代码做一次自动修复，单独提交。
+:::
+
+本章节中，我们完成了编程环境的初始化和检查，熟悉了相关功能。下一章节开始，我们就可以开始写代码了。
+
+:::info 注
+Modern.js 是用 [Modern Lint](/docs/guides/advanced-features/eslint) 规则集来实现上述能力， 集成了 ESLint、TypeScript 支持、Prettier 等主流工具和最佳实践。
+:::
+
+---
+
+> 本章节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c03/hello-modern)。
+

package/zh/tutorials/first-app/c03-ide/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "3: 确认编程环境"
+}

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.1-use-es6-plus.md

@@ -0,0 +1,67 @@
+---
+title: 使用 ES6+ 语法
+---
+
+上一章节中，我们确认了当前 IDE 的编程环境。
+
+这一章节中，我们沿用上一章节的项目和编码环境，实现一个最简单的联系人列表。
+
+Modern.js 支持 `src` 目录下直接使用 ES6+（ES2015+）语法，原则上包括：
+
+1. 已经进入 [Stage 4（完成阶段）](https://github.com/tc39/proposals/blob/master/finished-proposals.md)的语法，包括 ES2015（ES6）到 ES2020（ES11）以及后续版本。
+2. 部分很有用且确定性较强（重构也容易）的 [Stage 1（提案阶段）](https://github.com/tc39/proposals/blob/master/stage-1-proposals.md)、[Stage 2（草案阶段）](https://github.com/tc39/proposals#stage-2)、[Stage 3（候选阶段）](https://github.com/tc39/proposals#stage-3)语法，比如：
+
+     - [Decorators](https://babeljs.io/docs/en/babel-plugin-proposal-decorators)（默认使用 legacy 提案，可通过 `output.enableLatestDecorators` 使用新版提案）
+     - [Class Public Properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)
+     - [Class Private Properties](https://babeljs.io/docs/en/babel-plugin-proposal-private-property-in-object)、[Class Private Methods](https://babeljs.io/docs/en/babel-plugin-proposal-private-methods)
+     - [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator)（默认为 minimal 提案）
+     - [Partial Application](https://babeljs.io/docs/en/babel-plugin-proposal-partial-application)
+     - [Bind Operator](https://babeljs.io/docs/en/babel-plugin-proposal-function-bind)
+     - [export default from](https://babeljs.io/docs/en/babel-plugin-proposal-export-default-from), [export namespace from](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from)
+     - [Optional Catch Binding](https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding)
+     - [Numeric Separator](https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator)
+
+我们把 `src/App.jsx` 改成：
+
+```js
+const getAvatar = users =>
+  users.map(user => ({
+    ...user,
+    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+  }));
+
+const mockData =
+  [
+    { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
+    { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
+    { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
+    { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
+  ] |> getAvatar;
+
+function App() {
+  return (
+    <ul>
+      {mockData.map(({ name, avatar, email }) => (
+        <li key={name}>
+          <img src={avatar} width={60} height={60} /> ---
+          <span>{name}</span> ---
+          <span>{email}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default App;
+```
+
+可以看到其中使用了多种 ES6+ 语法（注意生成 mockData 过程中使用了 [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 语法），都不需要做任何配置。
+
+运行 `pnpm run dev`，查看运行结果：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/contacts.png)
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern)。
+

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.2-use-typescript.md

@@ -0,0 +1,111 @@
+---
+title: 使用 TypeScript 语法
+---
+
+Modern.js 同样对 TypeScript 提供了一等公民、开箱即用的支持。
+
+这一小节，我们将当前为 ES6+ 语法的 Demo 修改为 TypeScript 语法。
+
+在项目根目录下执行：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="macOS" label="macOS" default>
+
+```bash
+mv src/App.jsx src/App.tsx
+
+pnpm add typescript @types/react @types/react-dom @types/node -D
+
+touch tsconfig.json
+```
+
+</TabItem>
+<TabItem value="Windows" label="Windows">
+
+```bash
+mv src/App.jsx src/App.tsx
+
+pnpm add typescript @types/react @types/react-dom @types/node -D
+
+ni tsconfig.json
+```
+
+</TabItem>
+</Tabs>
+
+:::info 注
+接下来所有章节的项目，都会使用 TS 来进行开发。
+:::
+
+`tsconfig.json` 内容如下：
+
+```json
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src", "shared", "config"]
+}
+```
+
+打开 `src/App.tsx`，把代码改成以下内容：
+
+```ts
+import React from 'react';
+
+const getAvatar = (users: Array<{ name: string; email: string }>) =>
+  users.map(user => ({
+    ...user,
+    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+  }));
+
+const mockData = getAvatar([
+  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
+  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
+  { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
+  { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
+]);
+
+function App() {
+  return (
+    <ul>
+      {mockData.map(({ name, avatar, email }) => (
+        <li key={name}>
+          <img src={avatar} width={60} height={60} /> ---
+          <span>{name}</span> ---
+          <span>{email}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default App;
+```
+
+可以看到，跟 ES6+ 的代码相比有以下不同：
+
+1. 由于 TS 还不支持 [Pipeline Operator](https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator) 语法，需要把 mockData 的生成过程改成普通的函数调用语法。
+2. 需要声明 `getAvatar` 参数的类型。
+
+在 VS Code 里，把鼠标悬停在 `mockData` 上，可以看到它的类型已经被自动推导出来。如果把 `key={name}` 改成 `key={name * 2}`，可以看到 TS 的报错。
+
+运行 `pnpm run dev`，可以看到一样的运行结果。
+
+:::info 注
+更简单、开箱即用的方式，是在创建项目的时候，**开发语言**选择 TS，会自动生成上述样板代码，源代码文件也会自动默认采用 .ts 和 .tsx。
+:::
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern-2)。
+

package/zh/tutorials/first-app/c04-es6-plus-and-ts/4.3-compatibility.md

@@ -0,0 +1,67 @@
+---
+title: 客户端兼容性
+---
+
+前两个小节我们学习了如何使用 ES6+ 与 TypeScript 语法来编写应用。
+
+这一小节，我们来学习如何在 Modern.js 中解决客户端兼容性的问题。
+
+在实际项目中，往往会因为需要兼容老版本浏览器，而无法利用现代浏览器的最新特性与最佳实践。
+
+Modern.js 提供了开箱即用的解决客户端兼容性的能力，支持自动 Polyfill、Browserslist 配置、差异化分发。
+
+我们首先使用微生成器开启该功能：
+
+```bash
+? 请选择你想要的操作：启用可选功能
+? 启用可选功能：启用「基于 UA 的 Polyfill」功能
+```
+
+接着我们修改 `modern.config.js`，添加以下配置：
+
+```js title="modern.config.js"
+export default defineConfig({
+  output: {
+    polyfill: 'ua',
+  },
+});
+```
+
+以上配置将会开启「 自动 Polyfill 」，Modern.js 会根据浏览器对规范的支持程度，返回不同内容的 polyfill，我们不需要再担心低版本浏览器对新版本浏览器的拖累。
+
+执行 `pnpm run dev`，可以看到浏览器中请求了当前服务上 `/__polyfill__` 这一资源，但是当前请求到的资源是空的：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result1.png)
+
+我们切换到 Chrome Mobile 模式，选择设备为 iPhone 5/SE，重新刷新页面，可以看到请求到了有内容的资源：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result2.png)
+
+:::info 注
+如果遇到无法识别的浏览器，Modern.js 将会返回全量的 polyfill。
+:::
+
+接下里我们继续修改 `modern.config.js`：
+
+```js title="modern.config.js"
+export default defineConfig({
+  output: {
+    enableModernMode: true,
+    polyfill: 'ua',
+  },
+});
+```
+
+以上配置将会开启「 差异化分发 」，在原生支持模块功能的浏览器中，Modern.js 优先使用带有 ESM 模块语法静态资源的 HTML，浏览器能够最优化的加载模块，带来更好的页面性能。
+
+执行 `pnpm run build && pnpm run start`，打开页面，可以看到已经加载了带有 `-es6` 后缀的资源文件：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/result3.png)
+
+:::info 注
+更多相关内容可以查看 [**客户端兼容性**](/docs/guides/advanced-features/compatibility)。
+:::
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c04/hello-modern-3)。

package/zh/tutorials/first-app/c04-es6-plus-and-ts/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "4: 写 JS 代码"
+}

package/zh/tutorials/first-app/c05-component/5.1-use-ui-library.md

@@ -0,0 +1,68 @@
+---
+title: 使用主流组件库
+---
+
+上一章节中，我们学习了如何使用 ES6+ 与 TypeScript 语法编写 Modern.js 应用。
+
+这一章节中，我们继续沿用上一章节的项目代码（注意是 TS 代码，不是 ES6+ 代码），继续完善联系人列表。
+
+为了做更好的 UI 展示和交互，我们引入主流的组件库 Ant Design 来开发，使用 List 组件来代替原始的列表。
+
+先添加依赖:
+
+```bash
+pnpm add antd
+```
+
+之前章节介绍过，Modern.js 支持在项目创建后继续为项目增加功能，我们执行 `pnpm run new`，进行如下选择，开启 Less 支持。
+
+```bash
+# 启用可选功能
+  启用 Tailwind CSS 支持
+❯ 启用 Less 支持
+  启用 Sass 支持
+  ...
+```
+
+修改 `src/App.tsx`，在顶部导入组件:
+
+```js
+import { List } from 'antd';
+```
+
+修改 App 组件的实现：
+
+```ts
+function App() {
+  return (
+    <div>
+      <List
+        dataSource={mockData}
+        renderItem={({ name, email, avatar }) => (
+          <List.Item key={name}>
+            <List.Item.Meta
+              avatar={<img alt="avatar" src={avatar} width={60} height={60} />}
+              title={name}
+              description={email}
+            />
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+}
+```
+
+执行 `pnpm run dev`，查看运行结果：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/05/result.png)
+
+可以看到 Ant Design 导出的组件，已经具备了完整的样式。
+
+:::info 注
+Modern.js 会[自动按需导入 Ant Design 组件需要的 CSS](https://github.com/ant-design/babel-plugin-import)。
+:::
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c05/hello-modern)。

package/zh/tutorials/first-app/c05-component/5.2-use-standalone-component.md

@@ -0,0 +1,92 @@
+---
+title: 使用独立开源组件
+---
+
+上一小节我们使用 Ant Design 组件库中的组件来实现列表。
+
+这一小节我们用独立开源组件来实现联系人的操作按钮。
+
+以按钮库 [Ladda](https://lab.hakim.se/ladda/) 的 [React 实现](https://www.npmjs.com/package/react-ladda) 为例，先添加依赖：
+
+```bash
+pnpm add react-ladda ladda
+```
+
+在 `src/App.tsx` 里导入组件，同时手动导入需要的 CSS：
+
+```ts
+import LaddaButton, { S, SLIDE_UP } from 'react-ladda';
+import 'ladda/dist/ladda.min.css';
+```
+
+修改 `List.Item` 组件的调用代码，添加 actions：
+
+```ts
+<List.Item
+  key={name}
+  actions={[
+    <LaddaButton
+      key={email}
+      loading={false}
+      data-size={S}
+      data-style={SLIDE_UP}
+      data-spinner-size={20}
+      data-spinner-color="#ddd"
+      data-spinner-lines={8}>
+      Call
+    </LaddaButton>
+  ]}>
+  <List.Item.Meta
+    avatar={<img alt="avatar" src={avatar} width={60} height={60} />}
+    title={name}
+    description={email}
+  />
+</List.Item>
+```
+
+`react-ladda` 组件库没有提供 types 文件，我们添加一个 `.d.ts` 文件：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="macOS" label="macOS" default>
+
+```bash
+touch src/modern-app-env.d.ts
+```
+
+</TabItem>
+<TabItem value="Windows" label="Windows">
+
+```bash
+ni src/modern-app-env.d.ts
+```
+
+</TabItem>
+</Tabs>
+
+在 `modern-app-env.d.ts` 中添加模块定义：
+
+```ts
+declare module 'react-ladda' {
+  const LaddaButton: any;
+  export default LaddaButton;
+  export const S: any;
+  export const SLIDE_UP: any;
+}
+```
+
+执行 `pnpm run dev`，查看运行结果：
+
+![result1](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/05/result1.png)
+
+:::info 注
+CSS 文件会自动经过 Modern.js 内置的 [PostCSS](/docs/guides/basic-features/css/postcss) 的处理，能够满足大多数项目的样式开发需求。
+
+Modern.js 也支持导入 SCSS、Less 文件。此外，有的组件使用 CSS in JS，不需要额外导入样式文件，下一节会有相关介绍。
+:::
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c05/hello-modern-2)。

package/zh/tutorials/first-app/c05-component/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "5: 使用 UI 组件"
+}

package/zh/tutorials/first-app/c06-css-and-component/6.1-css-in-js.md

@@ -0,0 +1,110 @@
+---
+title: 用 CSS in JS 写组件
+---
+
+上一章节中，我们学习了如何使用 UI 组件库、标准三方库中的组件。
+
+这一章节中，我们将学习如何实现 UI 组件。
+
+首先我们希望自己控制联系人头像的展示，实现这种设计稿：
+
+![design](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/design1.png)
+
+假设没有现成的组件可以实现，那就需要自己写些 CSS 了，传统上，我们有如下选择：
+
+1. 直接在元素的 style 属性上写样式，缺点是：不方便维护，UI 视觉上的细节也会跟 UI 结构上的细节和业务逻辑混在一起。
+2. 在 CSS 代码里用选择器找到这个头像元素，写样式，避免了 1 的缺点，但新的缺点是：不方便在其他有头像出现的地方复用，集中维护，做到 [DRY](https://en.wikipedia.org/wiki/Don't_repeat_yourself)。
+3. 在 CSS 代码里写一个 classname，封装这个样式，避免了 2 的缺点，但新的缺点是：需要考虑命名问题，避免在全局命名空间下重名，可能要用到 [BEM](http://getbem.com/) 之类的规范。
+4. 用 CSS Modules 技术，让 CSS 文件和其中的 classname 变得【 模块化 】，避免了 3 的缺点。
+
+Modern.js 开箱即用的支持 CSS Modules，但我们更推荐优先采用 CSS Modules 的继承者、在【 模块化 】上更进一步的 [styled-components](https://styled-components.com/)，来实现类似的需求。
+
+Modern.js 同样开箱即用的支持 styled-components，既不需要安装依赖，也不需要做任何配置。
+
+在 `src/App.tsx` 里修改顶部的代码：
+
+```js
+import styled from '@modern-js/runtime/styled';
+```
+
+添加以下代码：
+
+```js
+const Avatar = styled.img`
+  width: 50px;
+  height: 50px;
+  border: 4px solid #0ef;
+  border-radius: 50%;
+`;
+```
+
+修改 `List.Item.Meta` 的代码：
+
+```tsx
+<List.Item.Meta
+  avatar={<Avatar src={avatar} />}
+  title={name}
+  description={email}
+/>
+```
+
+执行 `pnpm run dev`，可以看到预期的运行结果：
+
+![result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/06/result1.png)
+
+接下来我们做一点重构，为了增强可读性，让代码更容易维护，可以把 Avatar 组件拆分出去
+
+在终端执行以下命令：
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+<TabItem value="macOS" label="macOS" default>
+
+```bash
+mkdir -p src/components/Avatar
+touch src/components/Avatar/index.tsx
+```
+
+</TabItem>
+<TabItem value="Windows" label="Windows">
+
+```powershell
+mkdir -p src/components/Avatar
+ni src/components/Avatar/index.tsx
+```
+
+</TabItem>
+</Tabs>
+
+把 `src/App.tsx` 里的 Avatar 实现删掉，改成：
+
+```js
+import Avatar from './components/Avatar';
+```
+
+`src/components/Avatar/index.tsx` 的内容：
+
+```js
+import styled from '@modern-js/runtime/styled';
+
+const Avatar = styled.img`
+  width: 50px;
+  height: 50px;
+  border: 4px solid #0ef;
+  border-radius: 50%;
+`;
+
+export default Avatar;
+```
+
+执行 `pnpm run dev`，运行结果应该是一样的。
+
+:::info 注
+采用目录形式（Avatar/index.tsx）而不是单文件形式（Avatar.tsx）的原因是，之后可以方便在目录内部增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等，在这个**黑盒**内部可以随意重构，只考虑**最小局部**。
+:::
+
+---
+
+> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c06/hello-modern)。