React basic usage-1

react

   react的思想  先获取元素在改变元素最后子在设置元素

Official website

 https://reactjs.org/docs/create-a-new-react-app.html

Install scaffolding

新方法npx create-react-app myapp直接创建项目
        老方法npm  i -g  create-react-app 
    创建项目
        create-react-app  +项目名
    运行方式
        npm  start   npm  run start
    配置文件
        在git里运行 npm run eject

Life cycle hook function

        getDefaultProps()     //组件创建的时候调用
        getInitialState()    //组件挂载之前调用，定义state初始值
        componentWillMount()    //组件即将被装载、渲染到页面上
        componentDidMount()    //组件挂载后调用
        componentWillReceiveProps()    //组件将要接收新属性的时候调用
        shouldComponentUpdate()    // 组件接受到新属性或者新状态的时候调用
        componentWillUpdate() // 新属性或state 更新前调用
        componentDidUpdate()    // 更新完成后调用
         componentWillUnmount()  // 组件销毁之前调用

Usually used

getInitialState()    // 定义你的初始state
componentDidMount()    // 在render()方法之后调用，也就是执行这个方法前DOM已经渲染完成，此时可以使用这个方法来载入数据，也就是发送ajax请求数据

grammar

绑定数据
        this.state={name:"张三"}
            调用{this.state.name}
    绑定属性
        <div  className='red'>
          {this.state.title}
        </div>
            属性是个变量的话
                <div title={this.state.title} >
          {this.state.title}
        </div>
        注意 class 改成classname   <lable >里面的for 改成htmlfro
    绑定样式
        style={
   
   {color:'red'}}
        style={this.state.stye}
    引入图片
        <img src={logo}/>
          <img src={require('./../../assets/images/logo.svg')}/>
          <img src={this.state.url}/>
          <img src="图片路径“/>

Circular list

 子 render() {
    
      return(
        <div  className='red' style={this.state.stye} >
          
          {
          this.state.list.map((item,index)=>{
            return(
             <li key={index}>{item}</li>
            )
          })}

        </div>
      )

Bound event

       class Home extends Component{
  state={
    list:[1,2,3,45,6,6],
    msg:"1223"
  }
  add(){
    console.log(this)
  }
  add=(str)=>{
    this.setState({
      msg:str
    })
  }
  render() {
      return(
        <div  className='red' style={this.state.stye} >
          {this.state.msg}
          <button onClick={this.add}>点击</button>
          <button onClick={this.add.bind(this,"张三")}>点击</button>


        </div>
      )
  }
}

Event object

  add=(e)=>{console.log(e)}
            事件对象属性
                e.target.getAttribute("属性名")
    表单事件
        class Home extends Component{
  state={
    list:[1,2,3,45,6,6],
    msg:"1223"
  }
  render() {
      return(
        <div  className='red' style={this.state.stye} >
          <input onChange={(e)=>{
            console.log(e.target.value)
          }}/>
        </div>
      )
  }
}
export default Home;
        约束表单 
            value
                写死的值
        非约束标单
            defaulValue
                非写死的值
    父子组件
        通信
            父传子
            父传子 在调用子组件的地方自定一个属性用this.props.属性名来接收
    组件的插槽语法
        // 子组件
class Child extends React.Component {
    render() {
        return <div>
            {this.props.children}
        </div>
    }
}
// 父组件
class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'hello world！'
        }
    }
    render() {
        return <div>
            <Child>
                {this.state.name}
            </Child>
        </div>
    }
}

   Server proxy
       configuration in package.json

   "name": "myap",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3100",

 "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "proxy": "http://localhost:3100/"
  },
        webpack.config.js里面
            devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:3100/',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    },

Guess you like