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的更多相关文章

  1. 2021年-在windwos下如何用TOMACT发布一个系统(完整配置案列)

    2021年新年第一篇:博主@李宗盛-关于在Windwos下使用TOMCAT发布一个系统的完成配置案列. 之前写过关于TOMCAT的小篇幅文档,比较分散,可以作为对照与参考. 此篇整合在一起,一篇文档写 ...

  2. pyinstaller和wordcloud和jieba的使用案列

    一.pyinstaller库 1.简介 pyinstaller库:将脚本程序转变为可执行(.exe)格式的第三方库 注意:需要在.py文件所在目录进行以下命令,图标扩展名是.ico 2.格式: pyi ...

  3. Spring MVC的配置文件(XML)的几个经典案列

    1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...

  4. js闭包的作用域以及闭包案列的介绍:

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  5. SAMSUNG某型号一千短信成功记录!对比其他软件恢复不成功的案列!

    Hello! 大家好欢迎再次来到Dr.wonde的博客, 下面谈一下今天的案列,今年11月26号收到了一客户寄来的三星S4手机恢复里面短信, 如下图所示,用其他软件恢复以后,数据为零,没有恢复,,这下 ...

  6. php知识案列分享

    今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...

  7. linux下mysql函数的详细案列

    MYSQL * STDCALL mysql_real_connect(MYSQL *mysql, const char *host, const char *user, const char *pas ...

  8. axis1,xfire,jUnit 测试案列+开Web Service开发指南+axis1.jar下载 代码

    axis1,xfire,jUnit 测试案列+Web Service开发指南(中).pdf+axis1.jar下载    代码 项目和资源文档+jar 下载:http://download.csdn. ...

  9. 大数据技术之_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 ...

随机推荐

  1. Android编译系统产品线

    1.Android源码中的产品线解析 通常产品厂商在拿到Android源码后会在Android源码基础上进行定制修改,以匹配适应自己的产品.这就引入了产品线的概念.Android系统源码中,产品相关的 ...

  2. DAY15-Django模板语言

    Django模板系统 官方文档 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(reque ...

  3. sql 一些偶尔会用到的写法和函数 不定时更新

    小数转整数: --round() 遵循四舍五入把原值转化为指定小数位数,如: ) -- =1 ) -- =2 --floor() 向下舍入为指定小数位数 如: SELECT floor(1.45) - ...

  4. android中finish和system.exit方法退出的区别

    finish只是将此activity推向后台,并没有释放资源. 而system.exit则是杀死进程,会释放资源

  5. floyd路径记录

    #include<cstdio> #include<cstring> #include<algorithm> #include<cstdlib> #in ...

  6. HDU 6397(2018多校第8场1001) Character Encoding 容斥

    听了杜教的直播后知道了怎么做,有两种方法,一种构造函数(现在太菜了,听不懂,以后再补),一种容斥原理. 知识补充1:若x1,x2,.....xn均大于等于0,则x1+x2+...+xn=k的方案数是C ...

  7. c# 类的初步认识

    这里我们把类分为三种: String类(字符串类):Math类(数学类):DateTime类(时间日期类). 在使用类时注意  在输入的过程中代码前面会出现一些符号(紫色立方体代表方法,函数和黑色扳手 ...

  8. JavaPersistenceWithHibernate第二版笔记-第七章-004Mapping a map(@MapKeyEnumerated 、 @MapKeyTemporal、@MapKeyColumn)

    一.结构 二.代码 1. package org.jpwh.model.collections.mapofstrings; import org.jpwh.model.Constants; impor ...

  9. C/C++中struct/union/class内存对齐

    struct/union/class内存对齐原则有四个: 1).数据成员对齐规则:结构(struct)(或联合(union))的数据成员,第一个数据成员放在offset为0的地方,以后每个数据成员存储 ...

  10. c# 匿名函数和lamda表达式语法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...