react学习第一天

  • Z时代
  • 2024-01-10
  • 分类：综合

react

使用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中写，并且还需要有一个根节点包裹起来如上图的

    标签

以上是 react学习第一天 的全部内容， 来源链接： utcz.com/z/381821.html

回到顶部