react开发——TodoList

最新推荐文章于 2022-07-29 23:07:33 发布
最新推荐文章于 2022-07-29 23:07:33 发布
阅读量449 收藏 1
点赞数 1
分类专栏： React 文章标签： react react环境搭建 todoList 初学react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BeautyBeier/article/details/82461812
版权
这篇博客介绍了React框架下的TodoList应用开发过程。首先讲解了开发前的准备工作，包括项目的启动和入口文件index.js的设置。接着，创建了一个新的todoList.js组件，并在index.js中引入。文章还提到了React中的jsx语法和state数据管理，通过state来定义和更新数据。
摘要由CSDN通过智能技术生成

React现在很流行的前端开发框架，这次以TodoList 开发来介绍react

一、开发前的准备

1.开发前电脑要安装好NodeJS（nodeJs 官网地址）：`https://nodejs.org`
2.npm命令行安装； 安装成功后通过`node-v` 和 `npm-v`来查看是否安装成功； 
3.上面两个安装好后，运行命令行 `npm install -g create-react-app` ——安装react脚手架

二、使用react编写TodoList功能

这里写图片描述

上面就是todoList的效果组件效果图；
首先使用代码npm run start 来启动项目，它的入口文件在下图文件src目录的index.js;
这里写图片描述

新建一个todoList的js文件；
在index.js中引入import TodoList from './TodoList';

三、jsx语法


import React, {
    Component,
    Frag
最低0.47元/天 解锁文章
BeautyBeier
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React基础教程：TodoList案例
WwLK123的博客
06-12 918
react的状态state学习的经典案例：todolist
React之Todolist
Nathan_Qian的博客
01-03 551
1
React—todolist
Poppy_LYT的博客
09-11 272
React—todolist 父组件 import React from 'react'; import ReactDom from 'react-dom'; import Header from './component/header' import List from './component/list' let arr = []; // 定义一个空数组用来储存每次输入的内容 class To...
react-todolist
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
07-31 173
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
react：todolist
臧小川的博客
02-15 460
效果图 入口 Index import React, { useState } from 'react'; import styles from './style.less' import Header from './component/Header' import List from './component/List' import Footer from './component/Footer' const index = () => { const [toDos, setToDos
【尚硅谷React】——React全家桶笔记
m0_67393342的博客
07-29 3849
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
react-todolist练习资源
05-12
在本文中，我们将深入探讨React.js的一个经典应用——"todolist"练习，这是一个用于学习和实践React基础功能的绝佳项目。React是Facebook开发的一款用于构建用户界面的JavaScript库，尤其适用于构建可复用的组件。在...
React 脚手架与TodoList案例
IAN27的博客
04-28 306
1. 使用create-react-app创建react应用 2. react 脚手架 1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1. 包含了所有需要的配置（语法检查、jsx编译、devServer…） 2. 下载好了所有相关的依赖 3. 可以直接运行一个简单效果 2. react提供了一个用于创建react项目的脚手架库: create-react-app 3. 项目的整体技术架构为: react + webpack + es6 + eslint 4. 使用脚手架开
todoList react
realDE的博客
11-04 529
TodoListUi层分析列表展示区域和输入区域和按钮区域列表输入区域包括一个全选的状态按钮列表展示区域包括选择完成，删除任务按钮区域筛选list todo状态按钮功能分析新增事件删除事件 功能可以实现，但是有个报错标记完成事件 功能实现，但是在遍历上我觉得可以优化筛选事件全选事件踩坑知识点向数组中新增list todo时，不要使用push，因为push返回的是数组的新长度。应该用concat给to
react版的TodoList
03-31
todoList学习使用，
react项目之TodoList
12-31
使用react实现todolist功能，运用了react的基本语法，父子组件的传值，jsx基本语法，性能优化。
react-使用React实现的todolist
08-14
使用 React 实现 Todo-List，实现的功能有新增一个任务，完成任务以及删除任务
React-ToDoList:React中的待办事项列表
05-10
React到清单 使用In React创建了基本的任务清单。
React实现ToDoList
weixin_48065262的博客
04-01 136
需要搭建react脚手架，放在src的index.js中 import { Component } from 'react' import ReactDOM from 'react-dom' class Tick extends Component { state = { val: '', arr: [], title: 'tiDo', res: [], flage: false } render(
React实现Todolist
csdn_zsdf的博客
03-15 9665
一个todolist基本的功能点包括： 点击复选框标记完成或者未完成，且相应的文字出现删除线 从列表中移除item 添加item 首先它是由todolist title 、todolist、和addtodo三部分组成。由于todolist title 和addtodo比较简单，在这里只将todolist拆分成组件。 创建一个ListItem组件。含有一个render方法 class List...
React实现todolist
Mary_wmt的博客
06-26 519
React特点 用于构建用户界面的 js库、框架 声明式：数据改变时，能够有效地更新并正确地渲染组件；以声明方式编写UI，使得代码更可靠，利于调试 准备工作 安装：局部安装 npx create-react-app todo-list npx–>npm 5.2+附带的package运行工具 运行： npm start 默认在3000端口下运行 删除src文件夹内容如图 ...
react实现todolist
qq_37473645的博客
07-22 1128
使用React做一个简单的todolist小demo新建一个react项目 todolist写出todolist的基本结构用数组把数据存储起来监听输入框里面的内容,与state 里的inputValue绑定起来实现增加功能实现删除功能将li提取出来用单独作为一个组件，利用props传值修改删除功能，实现子组件通过父组件传过来的方法对父组件通信 新建一个react项目 todolist // 创建r...
react版本得todoList
最新发布
07-22
React 版本的 ToDo List 可以使用 React 的组件化开发方式来实现。首先，你需要创建一个名为 `TodoList` 的 React 组件，它将包含待办事项列表并管理其状态。 ```jsx import React, { useState } from 'react'; const TodoList = () => { const [todos, setTodos] = useState([]); const [inputValue, setInputValue] = useState(''); const addTodo = () => { if (inputValue.trim() !== '') { setTodos([...todos, inputValue]); setInputValue(''); } }; const removeTodo = (index) => { const updatedTodos = todos.filter((_, i) => i !== index); setTodos(updatedTodos); }; return ( <div> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> <button onClick={addTodo}>Add</button> <ul> {todos.map((todo, index) => ( <li key={index}> {todo} <button onClick={() => removeTodo(index)}>Remove</button> </li> ))} </ul> </div> ); }; export default TodoList; ``` 在上面的代码中，我们使用了 React 的 `useState` 钩子来创建了 `todos` 和 `inputValue` 两个状态。`todos` 用于存储待办事项列表，`inputValue` 用于获取输入框的值。 `addTodo` 函数用于将输入框的内容添加到 `todos` 列表中，并清空输入框的值。`removeTodo` 函数用于移除指定位置的待办事项。 在组件的返回部分，我们渲染了一个输入框、一个添加按钮和一个待办事项列表。通过 `map` 方法遍历 `todos` 列表，并为每一个待办事项创建一个包含删除按钮的列表项。 你可以将这个 `TodoList` 组件嵌入到你的 React 应用中，从而实现一个基本的 ToDo List 功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值