init

Author: maomincoding

doc/en/essentials/api/index.md

@@ -27,10 +27,10 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={add}>add</button>
       <p>{count}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -49,11 +49,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={add}>add</button>
       <p>{count}</p>
       <p>{double}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -73,10 +73,10 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{name}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -98,11 +98,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{name}</p>
       <p>{surname}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -127,11 +127,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{name}</p>
       <p>{surname}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -151,14 +151,14 @@ function handleArr() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={push}>push</button>
       <ul>
         {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
-    </fragment>
+    </>
   );
 }
 ```
@@ -176,10 +176,10 @@ function handleObj() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{obj.value.name}</p>
-    </fragment>
+    </>
   );
 }
 ```

doc/en/essentials/usage/index.md

@@ -39,10 +39,10 @@ function App() {
   const showHtm = computed(() => (isShow.value ? <p>Mettle.js</p> : <null></null>));
 
   return (
-    <fragment>
+    <>
       <button onClick={useShow}>show</button>
       <div>{showHtm}</div>
-    </fragment>
+    </>
   );
 }
 ```
@@ -62,14 +62,14 @@ function handleArr() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={push}>push</button>
       <ul>
         {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
-    </fragment>
+    </>
   );
 }
 ```
@@ -103,10 +103,10 @@ function MyComponent() {
   }
 
   return (
-    <fragment>
+    <>
       <p>{count}</p>
       <button onClick={add}>MyComponent</button>
-    </fragment>
+    </>
   );
 }
 
@@ -118,11 +118,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <p>{count}</p>
       <button onClick={add}>App</button>
       <MyComponent />
-    </fragment>
+    </>
   );
 }
 ```
@@ -140,10 +140,10 @@ function Child({ content }) {
   };
 
   return (
-    <fragment>
+    <>
       <button onClick={post}>Post</button>
       <Child />
-    </fragment>
+    </>
   );
 }
 
@@ -153,10 +153,10 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={get}>Get</button>
       <Child />
-    </fragment>
+    </>
   );
 }
 ```
@@ -194,11 +194,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <h1 $ref={h1} onClick={getDomInfo}>
         Hello
       </h1>
-    </fragment>
+    </>
   );
 }
 ```
@@ -216,11 +216,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={add}>Add</button>
       <h1 $once>{count}</h1>
       <h2>{count}</h2>
-    </fragment>
+    </>
   );
 }
 ```
@@ -259,7 +259,7 @@ function App({ memo }) {
   }
 
   return (
-    <fragment>
+    <>
       <ul onClick={handle}>
         {arr.value.map((todo) => (
           <li
@@ -272,7 +272,7 @@ function App({ memo }) {
           </li>
         ))}
       </ul>
-    </fragment>
+    </>
   );
 }
 ```
@@ -294,10 +294,10 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={useShow}>show</button>
       <div>{isShow.value ? <p>Mettle.js</p> : <null></null>}</div>
-    </fragment>
+    </>
   );
 }
 ```
@@ -306,17 +306,19 @@ function App() {
 
 Create a document fragment tag. It is not part of the real DOM tree, its changes will not trigger a re-rendering of the DOM tree, and will not have an impact on performance.
 
+Typically `<>...</>` is used instead.
+
 ::: warning
 There is only one root component, so you will see it used as the root component in many places in the documentation.
 :::
 
 ```jsx
 function App() {
   return (
-    <fragment>
+    <>
       <h1>Mettle</h1>
       <h2>Hello!</h2>
-    </fragment>
+    </>
   );
 }
 ```

doc/en/tool/mettleRouter/index.md

@@ -78,10 +78,10 @@ function About() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={goHome}>goHome</button>
       <h1 onClick={getOption}>About</h1>
-    </fragment>
+    </>
   );
 }
 ```

doc/zh/essentials/api/index.md

@@ -27,10 +27,10 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={add}>add</button>
       <p>{count}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -49,11 +49,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={add}>add</button>
       <p>{count}</p>
       <p>{double}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -73,10 +73,10 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{name}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -98,11 +98,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{name}</p>
       <p>{surname}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -127,11 +127,11 @@ function App() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{name}</p>
       <p>{surname}</p>
-    </fragment>
+    </>
   );
 }
 ```
@@ -151,14 +151,14 @@ function handleArr() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={push}>push</button>
       <ul>
         {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
-    </fragment>
+    </>
   );
 }
 ```
@@ -176,10 +176,10 @@ function handleObj() {
   }
 
   return (
-    <fragment>
+    <>
       <button onClick={change}>change</button>
       <p>{obj.value.name}</p>
-    </fragment>
+    </>
   );
 }
 ```