react初识

初识：react 为单向数据流

首先创建react项目

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

然后localhost:3000即可

需要生成config，配置文件，的步骤如下

在package.json中有

image.png

需要运行

npm run eject || yarn eject 

但是会报错

image.png

这个时候需要

git add .
git commit -m '备注'

在运行

npm run eject || yarn eject 

即可，这个时候package.json 中的

eject:"react-scripts eject"

自动删除，项目中会增加config文件夹

然后下面就是要去写页面了

与平时vue 、html不同

1.class 变成className

<div  className="tit"></div>

2.onclick 绑定得时候

<button onClick={activateLasers}></button>

3.react引入图片的方式 ，不能引入src以外的路径图片

import jt from '../app/images/right-jt.png';
<img src={jt} />

4.react 赋值

 this.setState({isSearch:false})

5.react中定义的方法都需要在构造函数中绑定 ，引入如果不绑定的话，方法内部中的this会丢失，会指向window

constructor（）{
    this.handleChange = this.handleChange.bind(this);
        this.handBlur=this.handBlur.bind(this)
}

在react中不可以通过 return false，方式去阻止默认行为 。必须使用 e.preventDefault();

react生命周期

componentDidMount()  组件已经被渲染到Dom中后运行
componentWillUnmount() 组件移除得时候调用

react语法

ES5语法：

var pcHeader=React.creatClass({
    getInitialState ：function （）{
  return {
    bg: "transparent",
    }
}
})

ES6语法

class PCheader extends React.Component{
    constructor(){
    super();
this.state={
    bg:'"transparent",'
}
}
}

es6中static defaultProps = {
        name:" "
 }