@modern-js/main-doc 2.3.0 → 2.5.0

package/zh/tutorials/first-app/c06-model.mdx

@@ -10,8 +10,8 @@ title: 添加业务模型（状态管理）
 
 因此会开始编写一些跟 UI 完全无关的业务逻辑，如果继续写在组件代码中，会产生越来越多的面条式代码。为此，我们引入了一种叫做 **业务模型（Model）** 的代码模块，将这些业务逻辑和 UI 解耦。
 
-:::info意
-使用状态管理相关 API，需要先启用配置项 [runtime.state](/docs/configure/app/runtime/state)：
+:::info 注意
+使用状态管理相关 API，需要先启用配置项 [runtime.state](/configure/app/runtime/state)：
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';

package/zh/tutorials/first-app/c07-container.mdx

@@ -277,6 +277,6 @@ export default Index;
 
 `components/` 里的**视图组件**，都是目录形式，如 `Avatar/index.tsx`。而 `containers/` 里的**容器组件**，都是单文件形式，如 `contacts.tsx`。**这是我们推荐的一种最佳实践**。
 
-在 ​ [添加 UI 组件（Component）](./c02-component.md) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
+在 ​ [添加 UI 组件（Component）](./c02-component.mdx) 章节提到过，视图组件用目录形式，是因为视图组件负责实现 UI 展示和交互细节，可以演变的复杂。用目录形式，可以方便增加子文件，包括专用的资源（图片等）、专用子组件、CSS 文件等。在这个目录内部可以随意重构，只考虑最小局部。
 
 而容器组件只负责连接，是一个胶水层，复杂的业务逻辑和实现细节都交给 View 层和 Model 层去实现。容器组件自己应该保持简单清晰，不应该包含复杂实现细节，所以不应该有内部结构。采用单文件形式不但更简洁，也能起到约束作用，提醒开发者不要把容器组件写复杂。

package/zh/tutorials/first-app/c08-entries.mdx

@@ -91,13 +91,12 @@ mv src/myapp src/contacts
 
 我们可以在 Modern.js 配置文件里，自己写代码来控制项目的配置。
 
-现在，修改 `modern.config.ts` 里面添加内容：
+现在，修改 `modern.config.ts`，添加内容：
 
-```ts
+```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
 import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   runtime: {
     router: true,

package/zh/tutorials/foundations/introduction.mdx

@@ -2,44 +2,29 @@
 title: 介绍
 sidebar_position: 1
 ---
+
 # 介绍
 
 欢迎来到 Modern.js 教程！
 
 阅读本栏目后，你将初步理解 Modern.js，并使用 Modern.js 创建第一个应用。
 
-:::note 关注
-加入我们的飞书群，咨询相关问题，了解最新动态。
-
-:::
-
 ## Modern.js 是什么
 
-**Modern.js** 是基于 React 的渐进式现代 Web 开发框架。
-
-框架内置多种开箱即用的开发工具，拥有极致的构建性能，支持零配置的渲染范式切换，一体化的 API 调用。并从三种工程方案出发（应用工程方案、模块工程方案，Monorepo 工程方案），支持全链路的前端研发。
-
-Modern.js 是字节跳动的底层前端研发框架，已经直接或间接的服务上千个应用，包括中后台、PC Web、H5 等多种应用场景。框架覆盖完整的生命周期，拥有完善的插件体系，提供高度定制能力。支持通过生成器插件自定义业务线专属的工程方案，定制各种功能扩展和业务需求，帮助开发者更快速的搭建应用。
-
-## 为什么使用 Modern.js
-
-Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。
-
-在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置**额外的功能和优化**。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。
-
-它主要包含以下特点：
-
-- 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
-- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
-- 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
-- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
-- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
-- 🚀 **独立构建核心**：支持多种打包工具，深度优化构建产物。
+如果你对 Modern.js 还不了解，可以先阅读 [Modern.js 介绍](/guides/get-started/introduction)。
 
-## 下一步
+## 实战教程
 
-{/* 如果你是前端初学者，可能会觉得这些概念有些复杂。我们提供了一些 [JavaScript 和 React](/tutorials/foundations/basic) 的学习资料，你可以先对它们做些了解。
+我们准备了一个创建「联系人列表应用」的实战教程，你可以按照教程一步步创建一个应用，并了解到 Modern.js 中的以下实践：
 
-如果你是有经验的开发者，希望了解如何使用 Modern.js，你可以尝试[创建第一个应用](/tutorials/first-app/c01-start)，或是阅读[指南](/guides/get-started/quick-start)。  */}
+- 创建项目
+- 使用 antd 组件库
+- 集成 Tailwind CSS
+- 客户端路由
+- 数据获取
+- 状态管理
+- 容器组件
+- 新建入口
+- ...
 
-如果你希望了解如何使用 Modern.js，可以尝试[创建第一个应用](/tutorials/first-app/c01-start)，或是阅读[指南](/guides/get-started/quick-start)。
+下面就让我们从 [创建项目](tutorials/first-app/c01-start) 开始吧！

package/en/apis/app/commands/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Commands
-
-This section covers all commands.

package/en/apis/app/hooks/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Convention
-
-This section covers all documentation conventions.

package/en/apis/app/runtime/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Runtime
-
-This section covers all APIs using `@modern-js/runtime`.

package/en/guides/advanced-features/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# Advanced Features
-
-This section covers advanced features of Modern.js.

package/en/guides/basic-features/css/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "CSS Solutions",
-  "position": 4
-}

package/zh/apis/app/commands/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 命令
-
-本节涵盖了所有命令。

package/zh/apis/app/hooks/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 文件约定
-
-本节涵盖了使用应用工程的所有文件约定。

package/zh/apis/app/runtime/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 运行时
-
-本节涵盖了使用 `@modern-js/runtime` 的所有 API。

package/zh/guides/advanced-features/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 进阶功能
-
-本节涵盖了使用应用工程的进阶功能。

package/zh/guides/basic-features/css/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "CSS 开发方案",
-  "position": 4
-}

package/zh/guides/basic-features/index.mdx

@@ -1,7 +0,0 @@
----
-type: ref
----
-
-# 基础功能
-
-本节涵盖了使用应用工程的基础功能。