引入 jsx 語法內容時，需要指定 type為 text/babel
<script src="./jsx.js" type="text/babel"></script>
或者
<script type="text/babel">
...jxs
</script>
ReactDOM.render(html,target[,callback])將內容和渲染到指定的節(jié)點
變量用法
{ }代表進入了JavaScript執(zhí)行環(huán)境

//基礎用法
const a = <h1>Hello React</h1>;
// 變量用法
//{ }代表進入了JavaScript執(zhí)行環(huán)境
let msg = "Hello React";
let ;
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*將內容和渲染到指定的節(jié)點
ReactDOM.render(
    <div>
        {a}
        
    </div>,
    document.querySelector(".box")
)

jsx 標簽必須要有結束標簽。<a></a><input/>
jsx 中注釋必須用{ 包裹}
只有一個根節(jié)點

//基礎用法
const a = <h1>Hello React</h1>;
// 變量用法
//{ }代表進入了JavaScript執(zhí)行環(huán)境
let msg = "Hello React";
let ;
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*將內容和渲染到指定的節(jié)點
const c = React.createElement("a",{href:"http://www.baidu.com"},"復雜超鏈接")

const d = React.DOM.a({href:"http://www.baidu.com"},"復雜的超鏈接D");

const e =   <div>
                <h1>嵌套</h1>
                <span> 數(shù)據(jù)</span>
            </div>;

const f = React.createElement("div",null,
    React.createElement("h1",null,"嵌套二")
);
//書寫style時，橫線式要改為駝峰式，font-size=>fontSize
const g = <span style={{color:'red',fontSize:'20px'}}>Style 寫法</span>

const so = {
    color:'green'
}

const h = <span style={so}>STYLE</span>;
//ES6中使用class關鍵字 聲明了類
//對于一些關鍵字要進行轉換， class=>className  label的 for=>htmlFor
const i = <span className="cn"> Class 寫法</span>;
const j = [
    <h3 key="1"> 數(shù)組1 </h3>,
    <h3 key='2'> 數(shù)組2 </h3>,
    <h3 key='3'> 數(shù)組3 </h3>
];
const k = <div>
    <hr/>
    <h3>Hello</h3>
    {j}
</div>
const l = ['數(shù)組4','數(shù)組5','數(shù)組6']
ReactDOM.render(
    <div>
        {/*這是一段注釋*/}
        {a}
        
        {c}
        u0z1t8os
        {e}
        {g}
        {f}
        {h}
        {i}
        {j}
        {k}
        {l}
        {
            l.map((m,n)=>{
                return <h1 key={n}>{m}</h1>
            })
        }
    </div>,
    document.querySelector(".box")
)
// Array.map(function(item,index){})
map/forEach/for/filter

組件化

//ES5 的React.createClaa()終將被棄用，請盡量使用ES6的寫法創(chuàng)建組件
    // 由于繼承的子類沒有this，所以在ES6中需要使用constructor 得到 this
    // 而在 ES5 中，createClass 所創(chuàng)建的類將自動擁有 this，可直接使用this.props
    // this.props 將得到父級向下傳遞的數(shù)據(jù)
//this.props.children 得到組件的原始內容（子元素）
    //當有一個子元素時，返回對象
    //當有多個子元素時，返回數(shù)組
    //當沒有子元素時，返回 undefined
const Com1 = React.createClass({
    render(){
        return <div>
                <h1>Hello ES5 React Component!!!</h1>
                <h3>{this.props.msg}</h3>
            </div>
    }
}); 
//ES6
class Com2 extends React.Component{ //繼承的類不能使用this
    constructor(props){//props 接收 傳過來的值 
        super(props);
    }
    render(){
        return <div>
            <h1>Hello ES6 react component!!!</h1>
            <h3>{ this.props.msg }</h3>
         </div>
    }
}
ReactDOM.render(
    <div>
        <h1>Hello react</h1>
        <Com1 msg="你好"></Com1>
        <Com2 msg="你好"></Com2>
          {/*<Com2/>*/}
    </div>,
    document.querySelector(".box")
)