一、基本概念

安装插件 Reactjs code snippets

rcc 快捷操作

插件 React-Native/React/Redux snippets for es6/es7

yarn add query-string 分解git传值
npx create-react-app my-app // 创建项目
npm start // 启动项目

一、组件

//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 事件

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

3-2 事件参数

//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>

七、样式

1.class要写成className
<div className="app">hello world</div>