准备工作
安装nodejs和npm,设置淘宝镜像等,自行百度。
使用react脚手架来搭建应用
npx craet-react-app appName
执行完得到以下目录结构:
在安装目录下执行npm start
,会在浏览器打开localhost:3000:
开始编写
先在src下新建一个TodoItem文件:
import React,{Component} from 'react';
class TodoItem extends Component{
clickHandle(){
this.props.clickHandle(this.props.index);
}
render(){
return (
<li onClick={this.clickHandle.bind(this)}>{this.props.item}</li>
);
}
}
export default TodoItem;
再新建一个TodoList.js文件。
import React,{Component} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component{
constructor(){
super();
this.state = {
item:['学习react','学习nodejs','学习ES6'],
input:''
}
}
btnClickHandle(){
this.setState({
item:[...this.state.item,this.state.input],
input:''
})
}
delItem(index){
var list = [...this.state.item];
list.splice(index,1);
this.setState({
item:list
})
}
render(){
return (
<div>
<input value={this.state.input} onChange={(e)=>{this.setState({input:e.target.value})}}/>
<button onClick={()=>{this.btnClickHandle()}}>add</button>
<ul>
{
this.state.item.map((value,index)=>{
return (<TodoItem index={index} key={index} item={value} clickHandle={(i)=>{this.delItem(i)}}/>);
})
}
</ul>
</div>
);
}
}
export default TodoList;
修改index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
项目完成,运行npm start
,就可以在浏览器体验一个TodoList基本功能了。
总结
1、大爱箭头函数。不需要在为函数绑定this,因为它的this是在定义时确定的,不像普通函数一样,由调用时决定。
2、JSX语法中,HTML标签嵌套的大括号相当一个JS代码的执行环境,里面可以放JS表达式,但不能写语句,如if else等
3、React更新页面不操作DOM节点,而是依靠数据驱动