diff --git a/.umirc.ts b/.umirc.ts
index 345cac53ed49a97f96c13b39f84a8550aa13c0ce..a048c87a9ebdbd7e06a392cb017122ddc27e45d0 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -6,4 +6,6 @@ export default defineConfig({
   },
   // routes: [{ path: '/', component: '@/pages/index' }],
   fastRefresh: {},
+  dva: {},
+  antd: {},
 });
diff --git a/README.md b/README.md
index d0e1c2309bcf7dbabb10d3806640b6fc2c9f0477..c19793cec233491bd13635e429c257cd740afbd4 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,16 @@
 >chenhao1415@gmail.com  
 12345678  
 
+**[UmiJs 文档](https://umijs.org/zh-CN/docs/getting-started)**  
+
+**[DvaJs 文档](https://dvajs.com/guide/introduce-class.html#%E9%80%9A%E4%BF%A1%E9%97%AE%E9%A2%98)**  
+
+**[umi+Dva学习总结](https://juejin.cn/post/6947599812447436830#heading-6)**  
+
 **[语雀 王者荣耀项目 任务](https://www.yuque.com/umijs/umi)**  
 
+**[Joidea Social Figma UI Design](https://www.figma.com/file/MbyaLmSR0in1ai2eXLc1ze/Joidea-Social)**
+
 ## 16/12/2021 Create README file  
 
 This is the first exercise ---Jin
@@ -166,4 +174,57 @@ git追踪不到这么多的文件更新所以会报错。
 重新在主目录初始化项目，之后把my-app里面的文件全部  
 提到主目录，之后把空的my-app文件删掉，复制social  
 项目的gitignore文件到主目录，这样提交代码的时候git  
-会自动忽略掉.umi之类的webpack文件(节省空间)。保存之后再次提交代码就没有问题了。  
+会自动忽略掉.umi之类的webpack文件(节省空间)。  
+保存之后再次提交代码就没有问题了。  
+
+## 28/12/2021  
+
+> //src/components/Welcome/Welcome.jsx  
+
+        function Welcome(props) {
+          return (
+            <>
+                <h1>Hello, {props.name}</h1>
+                <p>Your age is {props.age}</p>
+                <p>Your gender is {props.gender}</p>
+                {props.children}
+            </>
+          );
+        }
+
+>//src/App.jsx  
+
+        const App = (props) => {
+           return (
+             <>
+                <Welcome name="Jin" gender="female" age="24" >
+                    <p style={{color:"red"}}>Your boyfriend is Ian</p>
+                </Welcome>
+                <Welcome name="Ian" gender="male" age="26" >
+                    <p style={{color:"red"}}>Your girlfriend is Jin</p>
+                </Welcome>
+             </>
+           );
+        };
+
+> //src/index.js  
+
+        ReactDOM.render(<App/>, document.getElementById('root'));
+
+在welcome.jsx文件里定义welcome组件,之后在App.jsx里引用  
+welcome组件。props指的就是在App.jsx里面引用welcome组件,它  
+定义的属性：name, gender, age与在welcome.jsx里面的一一对应  
+props.children指的就是被welcome标签包裹着的内容。index.js用于渲染app组件。  
+
+**js与jsx的区别**  
+在于jsx文件里面可以使用html的代码，而js文件里不行  
+
+### **Module '"umi"' has no exported member 'Effect'**  
+
+当完成 增加 dva models教程步骤的时候，引入 effect reducer 报错  
+
+        import { Effect, Reducer } from 'umi';
+        //显示Module '"umi"' has no exported member 'Effect'  
+
+[解决方法见链接内容](https://github.com/umijs/umi/issues/4164)  
+更改tsconfig.json文件，然后重启vscode，yarn start跑一遍程序
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index b9662b108cfb10e3d47a4d27901bcff151a66e5b..098f5c8d8d9410340378bb34d7a3215de7c4faec 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -1,4 +1,4 @@
-import React, { Children } from 'react';
+import { Children } from 'react';
 import styles from './index.less';
 import { Layout, Menu } from 'antd';
 import { Link } from 'umi';
@@ -17,7 +17,6 @@ function BasicLayout(props: any) {
     location: { pathname },
     children,
   } = props;
-
   return (
     <Layout>
       <Header>
diff --git a/src/models/hero.ts b/src/models/hero.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3173fded6dfd84eabca2cb73dfe00552c50bd230
--- /dev/null
+++ b/src/models/hero.ts
@@ -0,0 +1,39 @@
+import { Effect, Reducer } from 'umi';
+
+export interface HeroModelState {
+  name: string;
+}
+
+export interface HeroModelType {
+  namespace: 'hero';
+  state: HeroModelState;
+  effects: {
+    query: Effect;
+  };
+  reducers: {
+    save: Reducer<HeroModelState>;
+  };
+}
+
+const HeroModel: HeroModelType = {
+  namespace: 'hero',
+
+  state: {
+    name: 'hero',
+  },
+
+  effects: {
+    *query() {},
+  },
+
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};
+
+export default HeroModel;
diff --git a/src/models/item.ts b/src/models/item.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a94a2a4ae74aa322c6c0ff9489678a5d29b06a49
--- /dev/null
+++ b/src/models/item.ts
@@ -0,0 +1,39 @@
+import { Effect, Reducer } from 'umi';
+
+export interface ItemModelState {
+  name: string;
+}
+
+export interface ItemModelType {
+  namespace: 'item';
+  state: ItemModelState;
+  effects: {
+    query: Effect;
+  };
+  reducers: {
+    save: Reducer<ItemModelState>;
+  };
+}
+
+const ItemModel: ItemModelType = {
+  namespace: 'item',
+
+  state: {
+    name: 'item',
+  },
+
+  effects: {
+    *query() {},
+  },
+
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};
+
+export default ItemModel;
diff --git a/src/models/summoner.ts b/src/models/summoner.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2d8d71658cc2bbf4d148bc397b1e7351619e0614
--- /dev/null
+++ b/src/models/summoner.ts
@@ -0,0 +1,39 @@
+import { Effect, Reducer } from 'umi';
+
+export interface SummonerModelState {
+  name: string;
+}
+
+export interface SummonerModelType {
+  namespace: 'summoner';
+  state: SummonerModelState;
+  effects: {
+    query: Effect;
+  };
+  reducers: {
+    save: Reducer<SummonerModelState>;
+  };
+}
+
+const SummonerModel: SummonerModelType = {
+  namespace: 'summoner',
+
+  state: {
+    name: 'summoner',
+  },
+
+  effects: {
+    *query() {},
+  },
+
+  reducers: {
+    save(state, action) {
+      return {
+        ...state,
+        ...action.payload,
+      };
+    },
+  },
+};
+
+export default SummonerModel;
diff --git a/src/pages/hero.tsx b/src/pages/hero.tsx
index 10f6ce8941e1bb9da963e0e651a4c1d9a2cecb48..131fe7395e4c5ad9467eb6544078453f7f1a84bb 100644
--- a/src/pages/hero.tsx
+++ b/src/pages/hero.tsx
@@ -1,10 +1,21 @@
-import React from 'react';
+import { FC } from 'react';
 import styles from './hero.less';
+import { connect, HeroModelState, ConnectProps } from 'umi';
 
-export default function Page() {
+interface PageProps extends ConnectProps {
+  hero: HeroModelState;
+}
+
+const Hero: FC<PageProps> = (props) => {
+  console.log(props.hero);
   return (
-    <div>
-      <h1 className={styles.title}>Page hero</h1>
+    <div className={styles.title}>
+      <h1>Page hero</h1>
+      <h2>This is {props.hero.name}</h2>
     </div>
   );
-}
+};
+
+export default connect(({ hero }: { hero: HeroModelState }) => ({ hero }))(
+  Hero,
+);
diff --git a/src/pages/item.tsx b/src/pages/item.tsx
index 653de7299498199ef4bc62019a7631f55c05e8bc..7c990adc23491d6d23c8024035ed4e964ccc5dbd 100644
--- a/src/pages/item.tsx
+++ b/src/pages/item.tsx
@@ -1,10 +1,20 @@
-import React from 'react';
+import { FC } from 'react';
 import styles from './item.less';
+import { connect, ItemModelState, ConnectProps } from 'umi';
+interface PageProps extends ConnectProps {
+  item: ItemModelState;
+}
 
-export default function Page() {
+const Item: FC<PageProps> = (props) => {
+  console.log(props.item);
   return (
-    <div>
-      <h1 className={styles.title}>Page item</h1>
+    <div className={styles.title}>
+      <h1>Page item</h1>
+      <h2>This is {props.item.name}</h2>
     </div>
   );
-}
+};
+
+export default connect(({ item }: { item: ItemModelState }) => ({ item }))(
+  Item,
+);
diff --git a/src/pages/summoner.tsx b/src/pages/summoner.tsx
index a842e8f36efb9f3d60281cb8a35d5e734ee2e6bc..bb6d2fa00addc72f9280c8b84dcb13ea9ed4a438 100644
--- a/src/pages/summoner.tsx
+++ b/src/pages/summoner.tsx
@@ -1,10 +1,21 @@
-import React from 'react';
+import { FC } from 'react';
 import styles from './summoner.less';
+import { connect, SummonerModelState, ConnectProps } from 'umi';
 
-export default function Page() {
+interface PageProps extends ConnectProps {
+  summoner: SummonerModelState;
+}
+
+const Summoner: FC<PageProps> = (props) => {
+  console.log(props.summoner);
   return (
-    <div>
-      <h1 className={styles.title}>Page summoner</h1>
+    <div className={styles.title}>
+      <h1>Page summoner</h1>
+      <h2> This is {props.summoner.name}</h2>
     </div>
   );
-}
+};
+
+export default connect(({ summoner }: { summoner: SummonerModelState }) => ({
+  summoner,
+}))(Summoner);
diff --git a/tsconfig.json b/tsconfig.json
index 6d42f8cb4b23b0d24df934f6f9d8296ba58220b2..b81c5ccae61a1d4c0279b5de9c7b9b9a39ea18d2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,20 +1,31 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "baseUrl": "./",
+    "outDir": "build",
     "module": "esnext",
+    "target": "ES6",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
+    "rootDir": ".",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
     "importHelpers": true,
-    "jsx": "react-jsx",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "baseUrl": "./",
-    "strict": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "allowSyntheticDefaultImports": true,
     "paths": {
       "@/*": ["src/*"],
       "@@/*": ["src/.umi/*"]
-    },
-    "allowSyntheticDefaultImports": true
+    }
   },
   "include": [
     "mock/**/*",
@@ -25,13 +36,14 @@
   ],
   "exclude": [
     "node_modules",
-    "lib",
-    "es",
+    "build",
     "dist",
-    "typings",
-    "**/__test__",
-    "test",
-    "docs",
-    "tests"
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "tslint:latest",
+    "tslint-config-prettier"
   ]
 }