react学习第一天_react该如何详细学习贴近公司工作-优快云博客

使用create-react-app生成react脚手架之后，我在上一篇文件已经讲过，这个脚手架所生成的问价以及可以删除的文件夹，那么react的脚手架应该如何使用？

首先，app.js做为主要的根组件的入口文件，我们通常是写完组件之后，在app.js文件实现组件的利用

如图：
在这里插入图片描述

其中，我们可以将组件的后缀名，命名为.js文件也可以为.jsx文件，webpack打包之后都会形成.js文件，所以这边纯粹跟人习惯。

接下来就是写组件了

组件，也就是上图中的 ----->也可以写成这样

组件的命名必须是以大写开头

然后就是模板了：

react模板

1553134072560

组件模板中必须有的是：

import React, { Component } from 'react'

export default class componentName extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  render() {
    return (
      <div>

      </div>
    )
  }
}

我们必须用export default将这个组件开放出去，利用class创建类，props是用来实现子父组件间传值的，一般可以直接当作模板直接写，在自己的组件间用不到，但是传值的时候用的到
其次是construct构造器中，必须有一个super()即便这个东西没有值传，而且必须将super()放在state之前，否则会报错
接下来就是render(){}了，这个实例函数中我们放的是html模板。其中的重点要注意的是，在render（）中给标签加绑定属性要十分注意{

class 要变成 className

for 要变成 htmlFor

style属性和以前的写法有些不一样
```
  	<div style={{'color':'blue'}}>{this.state.title}</div>
```
```
            <div style={{'color':this.state.color}}>{this.state.title}</div>
```
}

最后一点就是render(){}这个实例函数的模板必须在return中写，并且还需要有一个根节点包裹起来如上图的
标签