使用create-react-app生成react脚手架之后,我在上一篇文件已经讲过,这个脚手架所生成的问价以及可以删除的文件夹,那么react的脚手架应该如何使用?
首先,app.js做为主要的根组件的入口文件,我们通常是写完组件之后,在app.js文件实现组件的利用
如图:
其中,我们可以将组件的后缀名,命名为.js文件也可以为.jsx文件,webpack打包之后都会形成.js文件,所以这边纯粹跟人习惯。
接下来就是写组件了
组件,也就是上图中的 ----->也可以写成这样
组件的命名必须是以大写开头
然后就是模板了:
react模板
组件模板中必须有的是:
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中写,并且还需要有一个根节点包裹起来如上图的
标签