react介绍及使用脚手架搭建项目

1. 介绍
   一款javascript前端框架，把用户界面抽象成一个个的组件，按需组合成页面，官网，与其他框架的共同点是，都采用虚拟dom，和数据驱动
   

2. 开始使用

   1. 可以使用yarn或者npm创建 react项目(也可以使用WebStorm直接创建 )
   2. create-react-app 目录 | npx create-react-app 目录 (直接使用脚手架创建)
   3. yarn eject 解构出所有的配置文件 可选
      yarn start | npm start 开发
      yarn build | npm run build 打包

3. 环境解析

   • react: 核心包，解析组件 演示
   • react-dom: 编译 -> 浏览器 演示
   • react-scrpts: react的项目环境配置
   • manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
   • registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
   • 对Internet Explorer 9,10和11的支持需要polyfill。

4. 资源限制

   • 本地资源导入(import) 不可以导入src之外的包
   • 相对 路径以文件所在位置为基准顶层到src，绝对路径 的根是 public目录
   • 前景图片, 相对 和 绝对路径 都指向了 public目录（因为是数据)

5. JSX
   jsx是一个 JavaScript 的语法扩展，可以理解为js的一个新的数据类型，类XML（JSON前身）语法，出现在js当中，文件为xx.js|xx.jsx

	var b= <strong>强壮</strong>
	语法要求
	- 标签要闭合
	- 元素必须要有一个顶层元素
	- 变量首字母大写代表组件，小写对应是js数据类型
	- 属性，小驼峰命名  <input type="text" tabIndex="1"/>
	JSX 是一个 JavaScript 语法扩展。它类似于模板语言，但它具有 JavaScript 的全部能力。JSX 最终会被编译为 React.createElement() 函数调用，返回称为 “React 元素” 的普通 JavaScript 对象

6. 类

es6

// this   --> {}  模块

class Person{
  constructor(name){
    this.name=name||'alex';  //实例属性创建，赋值
  }

  show(){//实例方法
    console.log('show',this.name);//this在实例里面指向实例
  }

}

//静态方法|类方法
Person.VERSION='1.2.3';//静态属性|类属性
Person.show2=function () {
  console.log(this);//  指向类 //this在类里面指向类
};


let p1 = new Person('bulala');//实例化
console.log(p1.name);//访问实例成员
p1.show();//output bulala //访问实例成员

//访问静态成员
console.log(Person.VERSION);
Person.show2();// output 类本身

//子类
class Worker extends Person{

  constructor(name,job){

    super(name);//类如果有继承 super就要出现

    this.job=job||'卖烧饼';

  }

  show(){
    console.log(this.job,this.name);
  }
}



es6+
class Person{

  //实例属性创建，赋值
  // 名=值
  // 名
  name = 'alex';//初始化  + 赋值
  nikename; //初始化,为负值  undefined


  //静态|类属性
  static VERSION = '1.2.3';

  constructor(name){
    this.name=name ;  //接受实例化是的修改
  }

  show(){//实例方法
    console.log('show',this.name);//this在实例里面指向实例
  }

  static show2(){
    console.log(this);//  指向类 //this在类里面指向类
  }
}


let p1 = new Person('bulala');//实例化
console.log(p1.name);//访问实例成员
p1.show();//output bulala //访问实例成员

//访问静态成员
console.log(Person.VERSION);
Person.show2();// output 类本身


//子类
class Worker extends Person{
  job = '卖烧饼';

  constructor(name,job){
    super(name);//类如果有继承 super就要出现
    this.job=job
  }

  show(){
    console.log(this.job,this.name);
  }
}