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(
<div>Hello Word</div>//最外层必须有一个标签元素
)
}
}
export default 组件名称;//导出组件
2.2第二种写法：
import React,{Component} from "react";
class 组件名称 extends Component{
render(){
return(
<div>Hello Word</div>
)
}
}
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返回值中调用
<p>姓名：this.state.name;</p>
<p>对象：this.state.userinfo.username</p>
完整示例如下：
import React, { Component } from 'react';
class Home extends Component{
constructor(){
super();
//react定义数据
this.state={
name:"张三",
age:'30',
userinfo:{
username:"itying"
}
}
}
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;
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)是完全没问题的，也建议就直接这样写。
