feat: commit code

docs/intro.md

@@ -1,47 +1,43 @@
 ---
-sidebar_position: 1
+id: intro
+title: 项目介绍
 ---
 
-# Tutorial Intro
+:::tip
+本教程由开发组成员 [YuKun Liu](https://github.com/mrxiaozhuox) 撰写，并非完全照搬翻译官方文档。
+:::
 
-Let's discover **Docusaurus in less than 5 minutes**.
+Dioxus 是一款用于构建跨平台用户界面的框架。这本指南将带领你学习并使用它。
 
-## Getting Started
+在开始之前，先贴上一份 `Hello World` 代码：
 
-Get started by **creating a new site**.
 
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+```rust
+fn App(cx: Scope) -> Element {
+    let (count, set_count) = use_state(&cx, || 0);
 
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 14 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
+    cx.render(rsx!(
+        h1 { "High-Five counter: {count}" }
+        button { onclick: move |_| set_count(count + 1), "Up high!" }
+        button { onclick: move |_| set_count(count - 1), "Down low!" }
+    ))
+};
 ```
 
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
-
-The command also installs all necessary dependencies you need to run Docusaurus.
+## 功能亮点
 
-## Start your site
+- 参照 React 设计，使得相关开发人员过渡简单。
+- 强大状态管理系统以及易用的 `Hooks` 设计。
+- 桌面应用原生支持，提供部分常用 API 可调用。
+- 简洁的 `RSX` 界面声明格式，比 HTML 更加易读。
 
-Run the development server:
-
-```bash
-cd my-website
-npm run start
-```
+## 多平台支持
 
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+Dioxus 支持多平台开发，这意味着你的大部分代码可以在任意平台下被构建使用。
 
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+目前为止，我们所支持的平台有：
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+- 网页应用（使用 WASM 构建）
+- 桌面应用（使用 Wry 构建）
+- 移动应用（使用 Wry 构建）
+- 终端应用（使用 Rink 构建）

docs/quick-start/hello-world.md

@@ -0,0 +1,58 @@
+---
+id: hello-world
+title: 简单应用
+---
+
+在上一章中我们编写了一段简单的代码让 Dioxus 成功运行了起来：
+
+```rust
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(App);
+}
+
+fn App(cx: Scope) -> Element {
+    cx.render(rsx! (
+        div { "Hello, world!" }
+    ))
+}
+```
+
+接下来我们来解析一下这个代码，了解下它的大致用途。
+
+---
+
+### 代码解析
+
+```rust
+use dioxus::prelude::*;
+```
+我们通过 `use` 将一部分结构、函数等引入我们的程序，方便我们直接调用。
+这里使用了 `dioxus::prelude::*` 即代表引入了所有 dioxus 预先定义好的常用内容。
+这样写的好处是我们不需要编写一大堆 `use` 语句，而是一次性引入了所有常用功能。
+
+```rust
+fn App(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div { "Hello, world!" }
+    })    
+}
+```
+我们有一个 `App` 函数，它接受一个 `Scope` 类型的参数，并返回一个 `Element` 类型。
+通过 `Scope` 内的 `render` 函数可以返回一个 `Element` 类型，在 `render` 内便可以使用 `rsx!` 宏编写 RSX 语法。
+
+这里我们的 RSX 内生成了一个 `div` 元素（相同于 HTML 中的元素），它的内容为 "Hello, world!"，相同于：
+
+```html
+<div>Hello, world!</div>
+```
+RSX 会自动被转换为 HTML 结构，但是 RSX 更容易被表达和阅读。
+
+```rust
+fn main() {
+    dioxus::desktop::lanuch(App);
+}
+```
+在 `main` 函数中，我们通过 `lanuch` 函数运行整个程序，并传入根组件 `App`，也就是我们上面编写的那个函数。
+注意，这里的主线程会被应用程序的事件循环所阻塞，直到触发整个程序的退出。

docs/quick-start/rsx.md

@@ -0,0 +1,62 @@
+---
+id: rsx
+title: RSX格式
+---
+
+这一章我们讲解一下 `RSX!` 的基本使用方法。
+
+我们先准备一个略微复杂的 HTML 结构，然后尝试用 RSX 表达它：
+
+```html
+<div style="text-align:center;">
+    <h1>Hello Dioxus</h1>
+    <a href="https://www.dioxus.cn">Dioxus 中国</a>
+    <p class="content">帮助您快速构建可靠的用户界面程序。</p>
+</div>
+```
+
+这段 HTML 看起来还算复杂吧，那我们尝试转换一下它：
+```rsx
+rsx! {
+    div {
+        style: "text-align:center;",
+        h1 { "Hello Dioxus" }
+        a {
+            href: "https://www.dioxus.cn/",
+            "Dioxus 中国"
+        }
+        p {
+            class: "content",
+            "帮助您快速构建可靠的用户界面程序。"
+        }
+    }
+}
+```
+
+细品一下吧，你大概已经明白 RSX 怎么编写了吧！是不是看起来比 HTML 舒服多了。
+
+:::info
+先声明元素各类属性（如 `style` `id` `class` `href`）等，再声明子元素。
+
+参数后需要带逗号，而子元素则无所谓。
+:::
+
+### 自定义属性
+
+在上面的例子中，我们使用到了 `style` `class` `href` 等常用属性，它们都被 Dioxus 定义在了内部。
+但是如果我们需要用的某个属性并不是 HTML 规则中存在的，而是自定义的，如：
+
+```html
+<div dioxus-data="10">Hello World</div>
+```
+
+那我们在编写时则需要为它打上双引号：
+```rsx
+rsx! {
+    div {
+        "dioxus-data": "10",
+        "Hello World"
+    }
+}
+```
+其实所有属性都可以被双引号包裹，但是为了代码提示工具能检查出异常，常用的可属性也可不加。

docs/quick-start/setup.md

@@ -0,0 +1,65 @@
+---
+id: setup
+title: 初始化
+---
+
+> 工欲善其事，必先利其器。
+
+在本章中，我们来了解一下如何初始化一个最简单的 Dioxus 项目。
+
+首先，我们使用 `cargo` 来新建一个 Rust 二进制项目：
+
+```shell
+cargo init --bin
+```
+
+通过编辑 `Cargo.toml` 加入 Dioxus 包依赖：
+
+```toml
+dioxus = { version = "0.2.3", features = ["desktop"] }
+```
+
+### Features 选项
+
+在添加 Dioxus 到依赖时，我们需要选择对应的 Features 选项：
+
+- `macro` - 宏支持（默认开启）
+- `hooks` - Hooks 封装（默认开启）
+- `html` - HTML 相关（默认开启）
+- `web` - Web 应用程序支持
+- `tui` - TUI 应用程序支持
+- `desktop` - 桌面应用程序支持
+- `router` - 路由相关功能支持
+- `fermi` - 全局路由工具支持
+
+其中 `web` `tui` `desktop` 决定了你的应用运行在什么平台之上。
+
+我们这里使用了 `desktop` 选项，那么我们开发的将是一个桌面应用程序。
+
+### 让项目跑起来！
+
+接下来，我们尝试让应用程序运行起来，我们在 `main.rs` 写下：
+
+```rust
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(App);
+}
+
+fn App(cx: Scope) -> Element {
+    cx.render(rsx! (
+        div { "Hello, world!" }
+    ))
+}
+```
+
+并使用 `cargo run` 就可以运行一个 `Hello World` 项目了！（代码解析将在下一篇章中）
+
+:::caution
+上面提到的 Web 平台需要 WASM 编译环境作为支持：
+
+添加编译目标：`rustup target add wasm32-unknown-unknown`
+
+如果没添加 wasm 的话，将无法完成 web 应用的编译。
+:::