Jsx 入门

使用 ReactDOM.render 在指定的节点渲染 模板内容

        这里说的模板 指的是一个jsx 内容

        因为直接使用字符串会有一系列的不方便 比如说拼接 还有一些逻辑的使用等等

        jsx 的本质  就是一个表达式！！！ 表达式！！！ 表达式！！！

        使用jsx的第一目的就是 让我们能更像写html一样写模板

        jsx的语法特征

        1.jsx 只能有一个根节点   error: Adjacent JSX elements must be wrapped in an enclosing tag

        2.jsx 当中的注释方式  { /* 我是注释内容 */ } babel默认不会把这个注释显示到最后的结果当中

        3.jsx 使用 {} 来引入一个 表达式！  

        4.{ }  如果引入的表达式是  undefine 布尔值  null 是不会渲染内容的

        5.{ } 在子节点当中不能使用{} 引入对象  error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

        6.{ } 引入数组 那么数组里面的内容会依次渲染出来 ,如果数组当中的成员是jsx的话那么每个jsx最外层都要绑定一个唯一的key(尽可能的不要用索引值作为key)

        7.jsx当中 节点可以使用 on+事件名 驼峰的写法（onClick）来绑定事件， 事件等于的值一定要是一个函数,触发的函数得到的第一个参数就是event对象

        8.jsx 节点当中 class属性 要写成 className (因为会跟 类组件当中的class有混淆)

        9.jsx 的style的绑定 的值是一个对象

let a;  // undefine
        let a1 = true;  
        let a2 = null;
        let a3 = NaN; // 数字 所以会直接渲染出来
        let a4 = 'abcdefg'
        let a5 = {}
        let a6 = [1,3,4,5,6,true,'abc']

        

        // 给每个jsx都设置一个唯一的key  如果key有重复的话会有报错 Warning:Encountered two children with the same key
        // 没有key Warning:  Each child in a list should have a unique "key" prop.
        let a7 = [
          <div key="1">1</div>,
          <div key="2">2</div>,
          <div key="3">3</div>
        ]

        let a8 = [
          { id: 1, title: '我是标题1'},
          { id: 2, title: '我是标题2' },
          { id: 3, title: '我是标题3' },
        ]

        let a9 ='c1'
        let a10 = 'c2'
        let a11 = false

        const fn1 = (ev)=>{
          console.log('fn1 fired',ev)
        }

        const ct = (
                     <span>
                        <h1>1</h1>
                        <h1>2</h1>
                        { /* 单行注释  */}
                        <h1> { a } </h1>
                        <h1> { a1 } </h1>
                        <h1> { a2 } </h1>
                        <h1> { a3 } </h1>
                        <h1> { a4 } </h1>
                        {/*  列表渲染（渲染数组）  */}
                        { a6 }
                        { a7 }
                        
                        { a8.map( (item,index)=> <div key={item.id}> {item.title} </div> ) }
                        <button onClick={ fn1 }>事件的绑定</button>

                        {/*  属性的绑定  */}
                        <div className={a9} id={a10}>   属性的绑定  </div>
                        {/*  条件渲染  */}
                         { a11 && <div>是否渲染</div> }
                         { 0 && <div>是否渲染</div> }
                         { a11 ? <div>左边</div> : <div>右边</div>  }

                        {/*  样式的绑定  样式使用一个对象来表示 */}
                        <div style={ {fontSize:'20px',color:'red'} }> 样式的绑定  </div>
      
                     </span>
                    )
  
         ReactDOM.render( ct ,document.querySelector('#app') );