react简介以及语法基础
react Fiber // React 16 之后的版本对应的框架
react 环境搭建
React 脚手架工具 create-react-app
npx create-react-app todolist
cd todolist
yarn start
什么是组件
component
简单的jsx语法
项目代码
├── src
│ ├── TodoItem.js
│ ├── TodoList.js
│ ├── index.js
│ ├── serviceWorker.js
│ └── style.css
Index.js
Index.js 是项目的入口
import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
// 组件,大写字母开头
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
TodoList.js
组件, ES6语法规范下的一些新的写法
import React, {Component, Fragment}from 'react';
import TodoItem from './TodoItem';
// 组件需要继承 React.Component, 才能具有组件的方法以及生命周期
class TodoList extends Component {
// constructor(props){
// super(props);
// this.state={
// list:[
// 'learn react',
// 'learn english'
// ]
// }
//this.handleDelete=this.handleDelete.bind(this)
// }
state = {
list: [],
inputValue: ''
}
handleAdd=()=> {
// this.state.list.push("hello world")
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
console.log("add new item: " + this.state.list)
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
handleDelete(index) {
// 如果要对state 中的数据进行操作,最好通过副本去操作
const list = [...this.state.list]
list.splice(index,1)
// this.setState({
// list:list
// })
this.setState({list})
}
getItems(){
return(
this.state.list.map((item, index) => {
return <TodoItem key={index}
handleDelete={this.handleDelete.bind(this)}
content={item}
index={index}/>
})
)
}
render() {
// jsx 语法
// 父组件通过属性的方式向子组件传递参数
// 子组件通过props的方式接受父组件传递的参数
return (
<Fragment>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
{/* <button style={{background:'red', color:'#fff'}} onClick={this.handleAdd.bind(this)} >add</button> */}
<button className='red-btn' onClick={this.handleAdd} >add</button>
</div>
<ul>
{
// this.state.list.map((item, index) => {
// return <TodoItem key={index}
// handleDelete={this.handleDelete.bind(this)}
// content={item}
// index={index}/>
// // return <li onClick={this.handleDelete.bind(this, index)} key={index}>{item}</li>
// })
this.getItems()
}
</ul>
</Fragment>
);
}
}
export default TodoList;
TodoItem.js
import React from 'react'
class TodoItem extends React.Component{
// 子组件如果要和父组件通信要调用父组件传递过来的方法实现传值
handleDelete(){
// 子组件向父组件传值
this.props.handleDelete(this.props.index)
console.log(this.props.index)
}
render(){
const {content} = this.props;
return(
<div onClick={this.handleDelete.bind(this)}>
{/* {this.props.content} */}
{content}
</div>
)
}
}
export default TodoItem;