react 的安装和案列Todolist
react 的安装和案列Todolist
1.react的安装和环境的配置
首先检查有没有安装node.js和npm
node -v
npm -v
查看相关版本
2.安装脚手架工具
2.构建:create-react-app 快速脚手架
create-react-app的安装
npm install -g create-react-app # Windows
sudo npm install -g create-react-app # Linux
创建React项目
create-react-app todolist
进入文件夹和执行项目
cd todolist
npm start
3.创建案例Todolist
Tolist.js
import React, { Component,Fragment } from 'react';
class Todolist extends Component {
constructor(props) { //最优先执行的函数
super(props);
this.state={
inputValue:'',
list:[]
}
}
render() {
return (
<Fragment>
<div>
<input
value={this.state.inputValue}
onChange={this.handleinputChange.bind(this)}
/>
<button onClick={this.handlebuttonClick.bind(this)}> 提交 </button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return(
<li
key={index}
onClick={this.handleItemdelt.bind(this,index)}
>
{item}
</li>
)
})
}
</ul>
</Fragment>
);
}
handleinputChange(e){
this.setState({
inputValue:e.target.value
})
}
handlebuttonClick(e){ //增加列表
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
handleItemdelt(index){ // 删除列表
// immutable
// state 不允许我们坐任何的改变
const list=[...this.state.list]; // list的一个副本
list.splice(index,1);
this.setState({
list:list
})
}
}
export default Todolist;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Todolist from './Todolist'; ReactDOM.render(<Todolist />, document.getElementById('root'));
1.完整的使用了state这个东西
2.使用了onChange,onClick 事件绑定的语法,还做了事件方法的this的绑定
3.如何往bind里面传递回调函数的参数
4.state不允许做改变,immutable的一个特性
5.map函数
6.splice函数
react 的安装和案列Todolist的更多相关文章
- 2021年-在windwos下如何用TOMACT发布一个系统(完整配置案列)
2021年新年第一篇:博主@李宗盛-关于在Windwos下使用TOMCAT发布一个系统的完成配置案列. 之前写过关于TOMCAT的小篇幅文档,比较分散,可以作为对照与参考. 此篇整合在一起,一篇文档写 ...
- pyinstaller和wordcloud和jieba的使用案列
一.pyinstaller库 1.简介 pyinstaller库:将脚本程序转变为可执行(.exe)格式的第三方库 注意:需要在.py文件所在目录进行以下命令,图标扩展名是.ico 2.格式: pyi ...
- Spring MVC的配置文件(XML)的几个经典案列
1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...
- js闭包的作用域以及闭包案列的介绍:
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- SAMSUNG某型号一千短信成功记录!对比其他软件恢复不成功的案列!
Hello! 大家好欢迎再次来到Dr.wonde的博客, 下面谈一下今天的案列,今年11月26号收到了一客户寄来的三星S4手机恢复里面短信, 如下图所示,用其他软件恢复以后,数据为零,没有恢复,,这下 ...
- php知识案列分享
今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...
- linux下mysql函数的详细案列
MYSQL * STDCALL mysql_real_connect(MYSQL *mysql, const char *host, const char *user, const char *pas ...
- axis1,xfire,jUnit 测试案列+开Web Service开发指南+axis1.jar下载 代码
axis1,xfire,jUnit 测试案列+Web Service开发指南(中).pdf+axis1.jar下载 代码 项目和资源文档+jar 下载:http://download.csdn. ...
- 大数据技术之_14_Oozie学习_Oozie 的简介+Oozie 的功能模块介绍+Oozie 的部署+Oozie 的使用案列
第1章 Oozie 的简介第2章 Oozie 的功能模块介绍2.1 模块2.2 常用节点第3章 Oozie 的部署3.1 部署 Hadoop(CDH版本的)3.1.1 解压缩 CDH 版本的 hado ...
随机推荐
- Android编译系统产品线
1.Android源码中的产品线解析 通常产品厂商在拿到Android源码后会在Android源码基础上进行定制修改,以匹配适应自己的产品.这就引入了产品线的概念.Android系统源码中,产品相关的 ...
- DAY15-Django模板语言
Django模板系统 官方文档 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(reque ...
- sql 一些偶尔会用到的写法和函数 不定时更新
小数转整数: --round() 遵循四舍五入把原值转化为指定小数位数,如: ) -- =1 ) -- =2 --floor() 向下舍入为指定小数位数 如: SELECT floor(1.45) - ...
- android中finish和system.exit方法退出的区别
finish只是将此activity推向后台,并没有释放资源. 而system.exit则是杀死进程,会释放资源
- floyd路径记录
#include<cstdio> #include<cstring> #include<algorithm> #include<cstdlib> #in ...
- HDU 6397(2018多校第8场1001) Character Encoding 容斥
听了杜教的直播后知道了怎么做,有两种方法,一种构造函数(现在太菜了,听不懂,以后再补),一种容斥原理. 知识补充1:若x1,x2,.....xn均大于等于0,则x1+x2+...+xn=k的方案数是C ...
- c# 类的初步认识
这里我们把类分为三种: String类(字符串类):Math类(数学类):DateTime类(时间日期类). 在使用类时注意 在输入的过程中代码前面会出现一些符号(紫色立方体代表方法,函数和黑色扳手 ...
- JavaPersistenceWithHibernate第二版笔记-第七章-004Mapping a map(@MapKeyEnumerated 、 @MapKeyTemporal、@MapKeyColumn)
一.结构 二.代码 1. package org.jpwh.model.collections.mapofstrings; import org.jpwh.model.Constants; impor ...
- C/C++中struct/union/class内存对齐
struct/union/class内存对齐原则有四个: 1).数据成员对齐规则:结构(struct)(或联合(union))的数据成员,第一个数据成员放在offset为0的地方,以后每个数据成员存储 ...
- c# 匿名函数和lamda表达式语法
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...