一、注釋
在js寫xml就是jsx語法

const element = <div>
  {
    //jsx單行注釋
    /*
      jsx多行注釋
    */
  }
  <h1>Hello World</h1>
</div>;
ReactDOM.render(
  element,
  document.querySelector("#app")
);

//返回jsx
function fn(){
  return (  //這是js注釋
    <div>
      {/*這是jsx注釋*/}
      <h1>Hello World</h1>
    </div>
  )
}
const element = fn();
ReactDOM.render(
  element,
  document.querySelector("#app")
);

二、插值

const person = {
  name : "張三",
  age : 18,
  sex : 0,
  like : "女"
}
function getSex(){
  if(person.sex){
    return "性別：女";
  }
  return "性別：男";
}
const element = (
  <div>
    <h2>Hello React</h2>
    <h2>我是：{person.name}</h2>
    <h2>今年：{person.age}</h2>
    <h2>性別：{person.sex}</h2>
    <h2>
      {getSex()}
    </h2>
    {
      //jsx里面不能 if else 判斷，可以用三元表達式，也可以調用函數
    }
    <h2>{person.sex?'女':'男'}</h2>
    <h2>愛好：{person.like}</h2>
    <h3>
      {
        //自執行函數也可以，在花括號里面是正兒八經的js代碼
        (function(){
          if(person.sex){
            return <i>性別：女</i>;
          }
          return <i>性別：男</i>
        })()
      }
    </h3>
  </div>
);
ReactDOM.render(
  element,
  document.querySelector("#app")
);

三、節點屬性

const element = (
  <div>
    {
      //class -> className
      //單標簽一定閉合
      //value ->defaultValue
      //checked -> defaultChecked
      //從數據結構里面取值
    }
    <h2 className="active">標題</h2>
    <input type="button" defaultValue="123" title="123" />
    <input type="radio" defaultChecked />
  </div>
);
ReactDOM.render(
  element,
  document.querySelector("#app")
);

四、列表渲染

//數據可以是數字、字符串、標簽（不要加引號，加了引號就是字符串，要綁定key唯一標識，提升性能diff）
const arr = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = [<li key="1">1</li>, <li key="2">2</li>, <li key="3">3</li>];
const element = (
  <ul>
    {arr3}
  </ul>
);
const arr4 = [
  {
    name:"張三",
    age:18
  },
  {
    name:"李四",
    age:18
  }
];
const element2 = [];
arr4.forEach((item, index) => {
  element2.push(<li key={index}>name：{item.name} - age：{item.age}</li>);
})
const element3 = (
  <div>
    <h2>
      {
        //如果數據是json對象，要用JSON.stringify編譯成字符串，當做文本插入到頁面中
      }
      {JSON.stringify(arr4)}
    </h2>

    <ul>
      {
        (function(){
          const element4 = [];
          arr4.forEach((item, index) => {
            element4.push(<li key={index}>name：{item.name} - age：{item.age}</li>);
          })
          return element4;
        })()
      }
    </ul>
  </div>
);
ReactDOM.render(
  element3,
  document.querySelector("#app")
);

五、事件處理

function fn(){
  alert(1)
}
const element = (
  <div>
    {
      //onClick 事件駝峰命名
      //事件綁定，都會給一個事件處理函數
    }
    <input type="button" defaultValue="事件調用" onClick={fn} />
    <input type="button" defaultValue="行間函數" onClick={()=>{alert(123)}} />
    <input type="button" defaultValue="行間函數" onLoad={alert(456)} />
  </div>
);
ReactDOM.render(
  element,
  document.querySelector("#app")
);

六、無狀態組件

let a = 123;
const element = (
  <div>
    {a}
  </div>
);
//只是普通的變量是沒有狀態的，組件才有狀態或無狀態
//react是單向數據流
//狀態其實就是讓數據驅動視圖的響應式數據
ReactDOM.render(
  element,
  document.querySelector("#app")
);
//不會改變
setTimeout(()=>{
  a = 456;
}, 3000)

七、函數式組件

//這只是一個目標變量
const header = (
  <h2>頭部</h2>
)
const main= (
  <h2>主體</h2>
)
const footer= (
  <h2>底部</h2>
)
//這只是一個目標變量，沒有狀態
const element = (
  <div>
    {header}
    {main}
    {footer}
  </div>
);

//函數式聲明組件
//組件的名字首字母必須是大寫
//也不要用H5新標簽
function Hd(){
  return (
    <h2 className="hd"></h2>
  )
}
//組件傳值，這個也是無狀態的組件，沒有數據變化，視圖也跟著變化
//狀態其實就是讓數據驅動視圖的響應式數據
function Con(props){
  return (
    <h2 className="main">主體內容，{props.name}</h2>
  )
}
function Ft(){
  return (
    <h2 className="footer">底部</h2>
  )
}
//有狀態的組件 -> 讓數據驅動視圖的響應式數據
class MainCon extends React.Component{
  constructor(){
    super();//調用父組件的構造函數，不調用會報錯
    //state就是組件的狀態
    //從后端請求的數據都是掛載state（狀態）上
    //相當于Vue的data
    this.state = {
      name : "張三"
    }

    setTimeout(()=>{
      this.setState({
        name:"李四"
      });
    }, 3000)
  }
  render(){
    return (
      <div>
        <h3>內容{this.state.name}</h3>
      </div>
    )
  }
}

const element1 = (
  <div>
    <Hd />
    <Con name="函數式聲明組件" />
    <Ft />
    <MainCon />
  </div>
);
ReactDOM.render(
  element1,
  document.querySelector("#app")
);