02 React目录结构分析、创建组件、JSX语法、绑定数据、绑定对象

一、React目录结构

1.node_modules: 项目依赖包目录；
2.public: 公共目录，该目录下的文件都不会被webpack进行加载、解析、打包；通过yarn build进行打包时该项目下的所有文件将会直接被复制到build目录下；
  1.favicon.ico: 是网站图标[可替换删除]
  2.index.html: 页面模板，webpack打包后将输出文件引入到该模板内；补充：index.html中通过环境变量%PUBLIC_URL% 来指向public目录路径；
  3.manifest.json: PWA将应用添加至桌面的功能的实现依赖于 manifest.json 。通过manifest.json文件可以对图标、名称等信息进行配置。

3.src: 是源码目录该目录下除了index.js App.test.js registerServiceWorker.js文件具有一定意义其余文件都是演示使用可直接删除
  1.index.js: 是整个项目的入口文件；
  2.App.test.js: 测试单元演示文件，暂时并不知道干嘛用；可以直接删除；
  3.registerServiceWorker.js: service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务；registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的service worker只在生产环境中生效，并且该功能只有在https下才能有效果；
4.gitignore: 该文件是github过滤文件配置
5.README.md: 该文件是github描述文件
6.package.json: 定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。部分依赖模块被隐藏；
7.yarn.lock：每次通过yarm添加依赖或者更新包版本时 yarn都会把相关版本信息写入yarn.lock文件；npm也有类似功能，npm 也可以生成一个锁文件，就是使用上没有yarn方便

二、React创建组件

三、React JSX语法

JSX就是Javascript和XML结合的一种格式。

import React, { Component } from "react";

class Home extends Component {
  constructor() {
    super();

    //react 定义数据
    this.state = {
      name: "张三",
      age: "30",
      userinfo: {
        username: "itying123",
      },
    };
  }
  //render 模板   jsx
  render() {
    return (
      <div>
        <h2>react组件里面所有节点要被根节点包含</h2>
        <p>姓名：{this.state.name}</p>
        <p>年龄：{this.state.age}</p>
        <p>用户名：{this.state.userinfo.username}</p>
      </div>
    );
  }
}

export default Home;

四、React绑定数据

/*
总结：

super关键字：

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;
  } 
}



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

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

import React from "react";

class News extends React.Component {
  constructor(props) {
    super(props); /*用于父子组件传值  固定写法 */

    //定义数据
    this.state = {
      usesrinfo: "张三",
    };
  }

  render() {
    return (
      <div>
        <h2>{this.state.usesrinfo}</h2>
        <ul>
          <li>这是一个列表</li>
          <li>这是一个列表</li>
          <li>这是一个列表</li>
        </ul>
      </div>
    );
  }
}

export default News;