原始TodoList网页（主要就是链接里网页应用ndex.html、styles.css、script.js ）：
https://blog.csdn.net/weixin_42357472/article/details/140657576
node、npn安装参考：
https://blog.csdn.net/weixin_42357472/article/details/140643624

vue、react区别
Vue：Vue 有自己的脚手架工具 Vue CLI，可以快速创建项目。Vue 还有自己的服务器渲染框架 Nuxt.js。
React：React 有自己的脚手架工具 Create React App，可以快速创建项目。React 还有自己的服务器渲染框架 Next.js。

1、vue框架实现TodoList页面案例

安装vue：

npm install -g @vue/cli 或 npm install -g cnpm --registry=https://registry.npm.taobao.org 

创建应用：

vue create my-vue-project 

进入项目写应用：

cd my-vue-project  #修改以下文件： src/App.vue 

src/App.vue代码

运行项目：

npm run serve 

打开网页

1、react框架实现TodoList页面案例

安装好node自带了npx

创建应用：

npx create-react-app react-todolist 或 ##安装create-react-app cnpm install -g create-react-app ##创建应用 create-react-app react-todolist 

进入项目写应用：

cd react-todolist  #修改以下文件： src/App.js src/App.css 

src/App.js 代码

import React, { useState, useEffect } from 'react'; import './App.css';  function App() {   const [todos, setTodos] = useState([]);   const [newTodo, setNewTodo] = useState('');    useEffect(() => {     loadTodos();   }, []);    const loadTodos = () => {     const savedTodos = localStorage.getItem('todos');     if (savedTodos) {       setTodos(JSON.parse(savedTodos));     }   };    const saveTodos = (updatedTodos) => {     localStorage.setItem('todos', JSON.stringify(updatedTodos));   };    const addTodo = (e) => {     e.preventDefault();     if (newTodo.trim() === '') return;     const updatedTodos = [{ text: newTodo, completed: false }, ...todos];     setTodos(updatedTodos);     setNewTodo('');     saveTodos(updatedTodos);   };    const toggleTodo = (index) => {     const updatedTodos = todos.map((todo, i) =>        i === index ? { ...todo, completed: !todo.completed } : todo     );     setTodos(updatedTodos);     saveTodos(updatedTodos);   };    const deleteTodo = (index) => {     const updatedTodos = todos.filter((_, i) => i !== index);     setTodos(updatedTodos);     saveTodos(updatedTodos);   };    return (     
       
TodoList
       
         (e) => setNewTodo(e.target.value)}           placeholder="Add a new todo"         />         Add       
       
         {todos.map((todo, index) => (           
             () => toggleTodo(index)}             />             {todo.text}             () => deleteTodo(index)}>Delete           
         ))}       
     
   ); }  export default App; 

src/App.css代码

.App {   font-family: Arial, sans-serif;   max-width: 500px;   margin: 0 auto;   padding: 20px; }  h1 {   text-align: center; }  form {   display: flex;   margin-bottom: 20px; }  input[type="text"] {   flex-grow: 1;   padding: 10px;   font-size: 16px;   border: 1px solid #ddd;   border-radius: 4px 0 0 4px; }  button {   padding: 10px 20px;   font-size: 16px;   background-color: #4CAF50;   color: white;   border: none;   border-radius: 0 4px 4px 0;   cursor: pointer; }  ul {   list-style-type: none;   padding: 0; }  li {   display: flex;   align-items: center;   padding: 10px;   background-color: #f9f9f9;   border: 1px solid #ddd;   margin-bottom: 10px;   border-radius: 4px; }  li.completed {   text-decoration: line-through;   opacity: 0.6; }  li input[type="checkbox"] {   margin-right: 10px; }  li button {   margin-left: auto;   background-color: #f44336; } 

运行项目：

npm start 

网页查看：