在正文中加入花括号   可以写js表达式    但不能写js的语句       {1+2}对

{if(true){return  1+2}}错

快速新建react项目

1. 进入react官网---右边 create react app

2. https://react.docschina.org/docs/create-a-new-react-app.html往下翻create react app---下方有构建过程

   
   

样式语法一：

标签内样式：style = {{ 键：值1，键：值2，... }}

样式语法二：

class 属性绑定：注意标签内避免 class 关键词重复，改用 className

父组件通过属性的形式向子组件传递参数，子组件通过 props 接受父组件传递过来的参数

子组件如果想和父组件通信，子组件要调用父组件传递过过来的方法

为什么循环产生的组件中要利用 key 这个特殊的 prop?

Keys 负责帮住 React 跟踪列表中哪些元素被改变，添加，删除。React 利用子元素的 key 再比较两棵树的时候，快速得知一个元素时新的还是刚刚被移除。没有 Keys ， React 也就不知道当前哪一个的 item 被移除了。

父组件通过属性的形式向子组件传递参数

子组件通过 props 接受父组件传递过来的参数

在此过程中 key 属性不可缺

子组件向父组件传值，子组件调用父组件传递过来的方法，在子组件中写 this.props.方法名(参数)

react父子组件间参数的传递和引用

父组件通过属性的形式向子组件传递数据， 子组件通过props的形式接受父组件的数据。

jsx里只能写表达式，不能写语句。

父组件向子组件传值，用属性

子组件向父组件传值，用方法

import React,{ Component } from 'react';
class TodoList extends Component{
handlerClick(){
this.setState({
list:[...this.state.list,this.state.inputvalue],
inputvalue:''
})
//this.state.list.push('1');
}
handleInput(e){
this.setState({
inputvalue:e.target.value
});
}
handlerDel(index){
const list=[...this.state.list];
list.splice(index,1);
this.setState({list});
}
//构造器
constructor(props){
super(props);
this.state={
list:[
'learn react',
'learn english',
'learn vue'
],
inputvalue:''
}
}
render(){
return(
<div>
<div>
<input value={this.state.inputvalue} onChange={this.handleInput.bind(this)}/>
<button onClick={this.handlerClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index} onClick={this.handlerDel.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;

import React,{ Component } from 'react';class TodoList extends Component{handlerClick(){this.setState({list:[...this.state.list,this.state.inputvalue],inputvalue:''})//this.state.list.push('1');}handleInput(e){this.setState({inputvalue:e.target.value});}//构造器constructor(props){super(props);this.state={list:['learn react','learn english','learn vue'],inputvalue:''}}render(){return(<div><div><input value={this.state.inputvalue} onChange={this.handleInput.bind(this)}/><button onClick={this.handlerClick.bind(this)}>add</button></div><ul>{this.state.list.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>);}}export default TodoList;

import React,{ Component } from 'react';

class TodoList extends Component{

handlerClick(){

this.setState({

list:[...this.state.list,'1']

})

//this.state.list.push('1');

}

//构造器

constructor(props){

super(props);

this.state={

list:[

'learn react',

'learn english',

'learn vue'

]

}

}

render(){

return(

<div>

<div>

<input/>

<button onClick={this.handlerClick.bind(this)}>add</button>

</div>

<ul>

{

this.state.list.map((item,index)=>{

return <li key={index}>{item}</li>

})

}

</ul>

</div>

);

}

}

export default TodoList;

//定义函数
onClick={this.函数名}
//构造函数
constructor(props){
    super(props);
    this.state={
      list:[
       '1',
       '2' 
      ]
    }
}
//循环
{
    this.state.数据.map((item)=>{
       {item}
    })
}