react

引入 jsx 语法内容时，需要指定 type为 text/babel
<script src="./jsx.js" type="text/babel"></script>
或者
<script type="text/babel">
...jxs
</script>
ReactDOM.render(html,target[,callback])将内容和渲染到指定的节点
变量用法
{ }代表进入了JavaScript执行环境

//基础用法
const a = <h1>Hello React</h1>;
// 变量用法
//{ }代表进入了JavaScript执行环境
let msg = "Hello React";
let href  = "http://www.baidu.com";
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*将内容和渲染到指定的节点
ReactDOM.render(
    <div>
        {a}
        {b}
    </div>,
    document.querySelector(".box")
)

jsx 标签必须要有结束标签。<a></a><input/>
jsx 中注释必须用{ 包裹}
只有一个根节点

//基础用法
const a = <h1>Hello React</h1>;
// 变量用法
//{ }代表进入了JavaScript执行环境
let msg = "Hello React";
let href  = "http://www.baidu.com";
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*将内容和渲染到指定的节点
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> 数据</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"> 数组1 </h3>,
    <h3 key='2'> 数组2 </h3>,
    <h3 key='3'> 数组3 </h3>
];
const k = <div>
    <hr/>
    <h3>Hello</h3>
    {j}
</div>
const l = ['数组4','数组5','数组6']
ReactDOM.render(
    <div>
        {/*这是一段注释*/}
        {a}
        {b}
        {c}
        {d}
        {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的写法创建组件
    // 由于继承的子类没有this，所以在ES6中需要使用constructor 得到 this
    // 而在 ES5 中，createClass 所创建的类将自动拥有 this，可直接使用this.props
    // this.props 将得到父级向下传递的数据
//this.props.children 得到组件的原始内容（子元素）
    //当有一个子元素时，返回对象
    //当有多个子元素时，返回数组
    //当没有子元素时，返回 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")
)