react入门笔记(二)--项目搭建与语法学习

1.脚手架开发模式的，代码入口是src的index.js文件

引入reactjs,从v0.14开始分包的，现在的react包是只包含了web和mobile通用的核心部分
import React from 'react';
这个包是负责操作Web页面的dom（拓展“操作mobile的包在react-native的，所以如果是rn项目，则需要用引入rn包），一般用ReactDOM.render()和ReactDOM.findDOMNode()加载元素，服务器端渲染，可以ReactDOM.renderToString()
import ReactDOM from 'react-dom';

• react中在html里面使用变量是用{}，绑定事件也是用{}，比如onClick={()=>{this.setState({val:'X'})}}，不用加上"",''

class Square extends React.Component {
    constructor(props){
        super(props);
        this.state={val:null,myclassName:'square square1'}
    }

    render() {
        return (
            <button className={this.state.myclassName} onClick={()=>{this.setState({val:'X'})}}>
                {this.state.val}
            </button>
        );
    }
}

2.CSS在react中使用

render函数内的标签
<div className="myfirstreact-css"></div>

3.props传值

• 父传子
  传值：<mycomponents myvalue="父传子"/>
  取值：1.html取值<div>{this.props.myvalue}</div>
  在render打印的this
  

4.组件内部的数据流

• react是class式写法，用构造函数constructor定值，state是类似与vue的data的存在
  初始化：

  constructor(props){
        super(props);
        this.state={val:null,}
    }

改值：修改state的值用api this.setState({val:'xxx'})，和小程序也差不多

• 划重点！！！，setState是异步的，有两种写法

1. this.setState({ val: 'X' }, () => { console.log("改后的val", this.state.val); });
2. this.setState((state,props) => {return {val:'x'}; });

取值： {this.state.val}

5.组件内部数据流