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 ...
随机推荐
- 如何通过outline为SQL语句指定执行计划
创建测试表 以用户jyu连接,创建测试表 SQL> conn jyu/jyu; Connected. SQL> create table t (id number, name varcha ...
- java反射专题二
一丶Class中常用方法详解 1)getFields() 只能获取到运行时类中及其父类中声明为public的属性 2)getDeclaredFields() 获取运行时类本身声明的所有属性 3)get ...
- Diag:Diagonal matrices and diagonals of a matrix
Diag:Diagonal matrices and diagonals of a matrix Syntax X = diag(v,k) X = diag(v) v = diag(X,k) v = ...
- 部署和调优 2.9 mysql主从配置-3
测试 先给主mysql解锁 > unlock tables; 删除一个表 > use db1; > show tables; > drop table help_categor ...
- 我的第一个Socket程序-SuperSocket使用入门(二)
操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操操 辛辛苦苦写那么久的博客,最后手贱点了全屏富文本编辑器 ...
- mysql 打印随机数
select rand(); 这样取出来的数据是类似这样的: 0.5389902438400223 要几位自己取几位: 取得方法类似 select substr(concat("000000 ...
- 剑指offer 34_丑数
丑数:只有2 3 5 这三个因子的数,求前(第)1500个.习惯上我们把1当作第一个丑数 例如 6, 8是丑数.14不是. #include <stdio.h> int Min(int x ...
- 指定jdk编译或运行
set JAVA_HOME=D:\java\jdk8 set CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOMe%\lib\tools.jar; set Pat ...
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题
目录 1 什么是ajax 2 获取ajax对象 3 ajax对象的属性和方法 4 使用ajax的编程步骤 5 缓存问题 6 乱码问题 1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是 ...
- 15-struct(构造函数,重载)
必须充分掌握struct的使用,包括其构造和重载函数的写法: #include <iostream> using namespace std; struct node { int x, y ...