:memo: add react day 1 tutorial

dashboard/.env

@@ -0,0 +1 @@
+PUBLIC_URL=/my

dashboard/src/pages/nut/not-found.tsx

@@ -1,5 +1,10 @@
+const titleStyle = {
+  fontSize: "48px",
+  color: "red",
+};
+
 const Widget = () => {
-  return <div>not found</div>;
+  return <div style={titleStyle}>forbidden</div>;
 };
 
 export default Widget;

dashboard/src/pages/nut/users/unlock/verify.tsx

@@ -1,5 +1,9 @@
+import { useParams } from "react-router-dom";
+
 const Widget = () => {
-  return <div>verify unlock token by email</div>;
+  const { token } = useParams();
+
+  return <div>verify unlock token by email({token})</div>;
 };
 
 export default Widget;

documents/development/frontend/README.md

@@ -20,7 +20,6 @@ yarn start
 ## Typescript
 
 - [Typescript 第一天](ts-day-1/)
-- [Typescript 第二天](ts-day-2/)
 
 ## React
 

documents/development/frontend/react-day-1/README.md

@@ -0,0 +1,50 @@
+# router, link and layout
+
+## 开发规范
+
+- **禁止**私自引入第三方的 css
+- 所有第三方的 css 放进**App.css**
+- 所有的本地 css 采用 **css in js** 的写法
+
+  ![css in js](css-in-js.png)
+
+- import 按照`第三方js`, `本地js`顺序
+
+  ![import order](import-order.png)
+
+- 组件放**components**下, 页面放**pages**下，以**project id**区分
+
+  ![namespace](namespace.png)
+
+## 练习参考
+
+### layout
+
+- layout 例子(layouts/anonymous/index.tsx)
+
+  ![layout](layout.png)
+
+- 页面例子(anonymous/users/sign-in.tex)
+
+  ![page](page.png)
+
+- 绑定页面和 layout(Router.tsx)
+
+  ![bind](bind.png)
+
+## route
+
+- 从 path 拿参数
+
+  - route 绑定
+    ![route params](route-params.png)
+  - page 中获取
+
+    ![link params](link-params.png)
+
+### 页面跳转 参见(layouts/anonymous/index.tsx)
+
+## 作业
+
+- 每人把自己负责的子项目的所有 pages, components 规划一下 并写出 demo
+- 需要从 http url 中取参数的页面，要写好 params 并验证