diff --git a/docs/react/_category_.json b/docs/react/_category_.json
new file mode 100644
index 0000000..359db7a
--- /dev/null
+++ b/docs/react/_category_.json
@@ -0,0 +1,7 @@
+{
+    "label": "react的入门",
+    "position": 13,
+    "link": {
+        "type": "generated-index"
+    }
+}
\ No newline at end of file
diff --git a/docs/react/react_todo_list.md b/docs/react/react_todo_list.md
new file mode 100644
index 0000000..33211fc
--- /dev/null
+++ b/docs/react/react_todo_list.md
@@ -0,0 +1,198 @@
+---
+sidebar_position: 1
+---
+
+# 如何使用react+ts编写前端todo list
+本文将编写一个简单的前端todo list应用，从进入项目后，逐步实现增加，删除，筛选的功能
+
+## 先决条件
+1. 已创建react ts工程
+
+>**提示**                                                                                                                                    
+若未创建react ts工程，可以参考[使用vite创建react ts工程](http://localhost:3000/full-stack-tutorial/docs/react/react_ts)文档
+
+## 项目初始化
+打开react ts工程
+
+## 编写todo list结构及功能
+在`App.tsx`中，通过以下代码，设计结构并实现todo list的功能
+```
+//导入依赖
+import React, { useState } from 'react'
+import './App.css'
+
+//定义全局变量，用于生成新数组的id
+let nextId = 4
+
+function App() {
+
+  //定义数组
+  const [products, setProducts] = useState([
+    { name: '吃饭', completed: false, id: 1 },
+    { name: '睡觉', completed: true, id: 2 },
+    { name: '打豆豆', completed: true, id: 3 },
+  ])
+const [inputValue, setinputValue] = useState('')
+
+
+
+  //在input中输入的值
+  const handleInputValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setinputValue(value)
+    console.log('当前的值', value);
+
+  }
+
+  //在输入框中按下回车键的事件
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (inputValue === '') {
+      return
+    }
+    if (event.key === 'Enter') {
+      const newProduct = {
+        name: inputValue.trim(),
+        completed: false,
+        id: nextId++
+      }
+
+      setProducts([...products, newProduct]);
+      setinputValue('')
+      console.log(`按下回车键的值:${inputValue}`);
+    }
+
+  }
+
+  //切换completed的状态
+  const CompleteStatus = (id:number)=>{
+    setProducts(
+      products.map((product) =>
+      product.id === id ? {...product,completed: !product.completed} : product)
+    )
+  }
+
+  //筛选功能的实现
+  const [filter,setFilter] = useState<'all'|'active'|'completed'>('all')
+
+  const onShow = products.filter((product) => {
+    if(filter === 'active'){
+      return !product.completed
+    }else if(filter === 'completed'){
+      return product.completed
+    }else{
+      return true
+    }
+  })
+
+  const count = products.filter((product) => !product.completed).length
+
+  //渲染组件
+  return (
+    <>
+      <div>
+        <h1>TODO LIST</h1>
+        <input
+          className="input-todo"
+          type='text'
+          placeholder='您想做点什么'
+          onChange={handleInputValue}
+          onKeyDown={handleKeyDown}
+          value={inputValue}
+        ></input>
+        <ul>
+          {/* {TodoItem}  */}
+          {onShow.map(product => (
+            <li key={product.id}>{product.name}{' '}
+              <span className={`icon-complete ${product.completed ? 'icon-complete-active' : ''}`}
+               onClick={() => CompleteStatus(product.id)}
+               >
+                </span>{' '}
+              <button onClick={() => {
+                setProducts(products.filter((a) => a.id !== product.id));
+              }}>删除</button>
+            </li>
+          ))}
+
+        </ul>
+        <div>
+          <span>还有<span>{count}</span>个未完成</span>
+          <div className='filter-btn-group'>筛选
+            <button onClick={()=> setFilter('all')}>全部</button>
+            <button onClick={()=> setFilter('active')}>未完成</button>
+            <button onClick={()=>setFilter('completed')}>已完成</button>
+          </div>
+        </div>
+      </div>
+
+    </>
+  )
+}
+
+export default App
+```
+## 设计todo list的样式
+在`App.css`中，通过以下代码，设计todo list的样式
+```
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+.icon-complete{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: solid 1px #ddd;
+  border-radius: 50%;
+}
+
+.icon-complete-active::after{
+  content: '√';
+  color: green;
+}
+```
+
+## 运行项目
+按下快捷键`Ctrl + ~`,打开终端，输入以下命令，运行项目
+```
+npm run dev
+```
+![运行结果](./result2.png)
\ No newline at end of file
diff --git a/docs/react/react_ts.md b/docs/react/react_ts.md
new file mode 100644
index 0000000..ac82c03
--- /dev/null
+++ b/docs/react/react_ts.md
@@ -0,0 +1,33 @@
+---
+sidebar_position: 1
+---
+
+# 使用vite创建react ts工程
+React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
+
+## 项目初始化
+### 1. 创建react+ts项目
+按下快捷键`Ctrl + ~`,打开终端，运行以下命令
+```
+npm create vite@latest
+```
+
+根据提示，输入项目名字并选择react，再选择TypeScript
+
+### 2. 打开项目
+运行以下命令，进入项目
+```
+cd react-ts-test1
+```
+
+### 3. 安装依赖
+运行以下命令，安装依赖
+```
+npm install
+```
+
+### 4. 运行项目
+输入以下命令,运行项目
+```
+npm run dev
+```
diff --git a/docs/react/result2.png b/docs/react/result2.png
new file mode 100644
index 0000000..ea64a2b
Binary files /dev/null and b/docs/react/result2.png differ