第2节,React目录结构分析 、创建组件、 JSX语法、 绑定数据 绑定对象2019-05-04

1、目录结构

(1)yarn.lock:项目依赖安装包,一般不需要动;
(2)Read.me:项目说明文件;
(3)package.json:脚手架工具文件,node的包文件,脚手架自动生成,一般不需要动;
(4)node_modules文件夹:项目依赖的第三方包
(5)public文件夹
favicon.ico:地址栏图标;
index.html:项目首页模板;
manifest.json:允许将站点添加至主屏幕,是 PWA 提供的一项重要功能,当前 manifest.json 的标准仍属于草案阶段,Chrome 和 Firefox 已经实现了这个功能,微软正努力在 Edge 浏览器上实现,Apple 目前仍在考虑中;
(6)src文件夹
index.js:入口文件
index.html:项目首页模板
index.css:项目的公共css文件

2、创建组件

需要注意,组件的名称首字母需要大写,

2.1第一种写法:


class 组件名称 extends React.Component{
  render(){
     return(
             
Hello Word
//最外层必须有一个标签元素 ) } } export default 组件名称;//导出组件

2.2第二种写法:

import React,{Component} from "react";

class 组件名称 extends Component{
  render(){
     return(
             
Hello Word
) } }

3、JSX语法

3.1构造函数

super继承Component父类;
props为固定参数,用于父子组件数据的传递;

3.2注释

{/*多行注释*/}

{
  //单行注释
}

3.3jsx的语法

jsx语法基本上是html的标签,需要注意相关关键词需要改成react的写法,如class需要改成className,for改成htmlFor;

4、绑定数据

(1)通过state进行赋值,可以是单一属性值或者是对象值;

    super(props);
    this.state={
        name:'张三',
        userinfo:{
            age:20
        }
    }
}

(2)在return返回值中调用

姓名:this.state.name;


对象:this.state.userinfo.username

完整示例如下:

import React, { Component } from 'react';
class Home extends Component{
    constructor(){
        super();
        //react定义数据
        this.state={
            name:"张三",
            age:'30',
            userinfo:{
                username:"itying"
            }
        }
    }

    render(){
        return (
            

react组件里面的所有节点要被根节点包含

姓名:{this.state.name}

年龄:{this.state.age}

对象:{this.state.userinfo.username}

) } } export default Home;

5、总结说明

5.1 supper说明

Es6中的super可以用在类的继承中,super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

    class Person {
        constructor (name) {
            this.name = name;
        }
    }

    class Student extends Person {
        constructor (name, age) {
                super(); // 用在构造函数中,必须在使用this之前调用
                this.age = age;
         }
    }

5.2为什么官方的列子里面写个super(props):

只有一个理由需要传递props作为super()的参数,那就是你需要在构造函数内使用this.props。那官方提供学习的例子中都是写成super(props),所以说写成super(props)是完全没问题的,也建议就直接这样写。

你可能感兴趣的:(第2节,React目录结构分析 、创建组件、 JSX语法、 绑定数据 绑定对象2019-05-04)