第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)是完全没问题的，也建议就直接这样写。