docs(jsx-tsx): how to use jsx & tsx

demo/pages/docs/jsx/enUS/index.md

@@ -0,0 +1,30 @@
+<!--anchor:on-->
+
+# JSX & TSX
+
+## Enable JSX & TSX
+
+About how to enable JSX & TSX please look at your toolchain's docs.
+
+## Use Component
+
+We recommend importing component directly when using JSX.
+
+```js
+import { defineComponent } from 'vue'
+import { NButton } from 'naive-ui'
+
+export default defineComponent({
+  render () {
+    return <NButton>{{ default: () => 'Star Kirby' }}</NButton>
+  }
+})
+```
+
+## Props look like `@update:*`
+
+In naive-ui, all props look like `on-update:*` has a corresponding `onUpdate*` prop (since in JSX `onUpdate:*` is not a valid prop name).
+
+If you find it doesn't exist, I must forget to make it. Please create an issue or PR.
+
+For example, `<n-select @update:value="..." />` in template can be written in `<NSelect onUpdateValue={...} />`.

demo/pages/docs/jsx/zhCN/index.md

@@ -0,0 +1,30 @@
+<!--anchor:on-->
+
+# JSX & TSX
+
+## 启用 JSX & TSX
+
+关于启用 JSX 和 TSX，请参考你使用的工具链的相关文档。
+
+## 使用组件
+
+在 JSX 中，推荐以直接引入的形式使用组件。
+
+```js
+import { defineComponent } from 'vue'
+import { NButton } from 'naive-ui'
+
+export default defineComponent({
+  render () {
+    return <NButton>{{ default: () => 'Star Kirby' }}</NButton>
+  }
+})
+```
+
+## 形如 `@update:*` 的 prop
+
+naive-ui 中，所有形如 `on-update:*` 的 prop 都有一个对应的 `onUpdate*` 属性可供使用（由于 JSX 自身的规定，`onUpdate:*` 不是一个合法的 prop）。
+
+如果你发现没有，那一定是我忘了写了，请提交一个 Issue 或者 PR。
+
+例如，在模板中 `<n-select @update:value="..." />` 在 JSX 中可以写为 `<NSelect onUpdateValue={...} />`。

demo/routes/routes.js

@@ -29,6 +29,10 @@ export const docChildRoutes = withPrefix('/:lang/:theme/docs', [
   {
     path: '/theme',
     component: () => import('../pages/docs/theme/index.entry')
+  },
+  {
+    path: '/jsx',
+    component: () => import('../pages/docs/jsx/index.entry')
   }
 ])
 

demo/store/menu-options.js

@@ -77,6 +77,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
       zh: '指南',
       type: 'group',
       children: [
+        {
+          en: 'JSX & TSX',
+          zh: 'JSX & TSX',
+          path: '/jsx'
+        },
         {
           en: 'Create Themed Component',
           zh: '创建适配主题的组件',