1-1 hello world

一、组件

//Tips:每一个页面级的组件第一行必须加
import React from 'react'

二、无状态组件

//就是一个函数,无状态组件中不能写事件,不能对数据进行直接的改变

import React from 'react';
function App() {
  return (
    <div className="App" >
       hello world
    </div>
  );
}
export default App;

三、有状态组件

import React from 'react';
class App extends React.Component{
    //数据放在构造函数的state属性
  constructor(props){
    super(props);
    this.state = {
      msg:"hello world"
    }
  }
  render(){
    return (
        //使用数据 {this.state.msg}
    <div>{this.state.msg}</div>
    )
  }
}
// jsx
export default App;

3-1 内联样式

<p style={{width:300,marginRight:"10px"}}>hello world</p>

3-2 事件

//1.改变事件内部this指向的问题  bind(this)
render(){
    return (
        //bind(this)改变this关键字的指向
    <div onClick={this.handleClick.bind(this)}>{this.state.msg}</div>
    )
  }
  handleClick(){
    this.setState({
      msg:"change"
    })
  }

推荐第2种

//2.使用箭头函数 改变this指向
render(){
    return (
    <div onClick={this.handleClick}>{this.state.msg}</div>
    )
  }
  handleClick=()=>{
    this.setState({
      msg:"change"
    })
  }

3-3 onChange事件

//value是可变的,input要加上onChange事件
 <input type="text" value={this.state.userName} onChange={this.handleChange} />
//js
handleChange=(e)=>{
        // console.log(e.target.value)
    this.setState({
         userName:e.target.value
    })
}

3-4 事件参数

//Tips:传递参数一定加bind  bind(this,params)
render(){
    return (
    <div onClick={this.handleClick.bind(this,"10001")}>{this.state.msg}</div>
    )
  }
  handleClick=(id)=>{
    console.log(id)
    this.setState({
      msg:"change"
    })
  }

四、if-else

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow:true
    }
  }
  render() {
    return (
      <div>
        {this.Message()}
      </div>
    )
  }
  Message(){
    if(this.state.isShow){
      return (<span>显示</span>)
    }else{
      return (<span>隐藏</span>)
    }
  }
}
export default App;

五、三元

<p>{this.state.isShow?'good':'hello world'}</p>

六、for map

<div>{this.state.arr.map(item=>{
        return (<p>{item}</p>)
        })}</div>
</div>