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外邓、創(chuàng)建組件
需要注意撤蚊，組件的名稱首字母需要大寫，
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組件里面的所有節(jié)點要被根節(jié)點包含</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)是完全沒問題的，也建議就直接這樣寫幕庐。
