React——JSX

JSX语法规则及使用：

• 创建虚拟DOM时，不要写引号；
• 标签中混入JS表达式要用{}；
• 样式的类名用className指定
• 内联样式，要用style = {{ key: value }},注意属性名转为小驼峰
• 只能有一个根标签
• 标签必须闭合
• 标签首字母
  • 若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素。则报错
  • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

// 使用

<div id="root"></div>

<script type="text/babel"> 
        const VDOM = （
            <div>
                <div className="App">
                <h1 className="title">I am the title</h1>
                <p className="content">I am the content</p>
              </div>
            </div>
        )
        ReactDOM.render(VDOM, document.getElementById('root'))
</script>

关于 JSX

jsx_1.png

     JSX是JavaScript的一种语法拓展。它和模版语言很接近，但是它充分具备JavaScript的能力。Facebook公司给JSX的定位是JavaScript的“扩展”。直接决定了浏览器并不会像天然支持JavaScript一样支持JSX。JSX会被编译为React.createElement(),React.createElement()将返回一个叫做"React Element"的js对象。

    **Babel**官网提出babel是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 

    关于JSX的功能模块

/*
* 创造一个元素需要知道哪些信息
* type 用于标识节点的类型
* config 以对象的形式传入，组件所有的属性都会以键值对的形式存储在config对象中
* children 以对象形式传入，它记录的是组件标签之间的嵌套内容
**/
export function createElement(type, config, children)

React.createElement('ul', {
  // 传入属性键值对
  className: "list"
},React.createElement("li", {
  key: '1'
},"1"),React.createElement("li", {
  key: '2'
}, '2'))

<ul>
  <li key="1">1</li>
    <li key="2">2</li>
</ul>


/*
* ReactElement
**/

const VDOM = (
    <div className="App">
    <h1 className="title">I am the title</h1>
    <p className="content">I am the content</p>
  </div>
)

console.log(VDOM) // 标准的ReactElement对象实例---对虚拟DOM的描述



ReactDOM.render(
    // 需要渲染的元素（ReactElement）
  element,
  // 元素挂载的目标容器（一个真实的DOM）
  conteiner,
  // 回调函数，可以用来处理渲染结束后的逻辑
  [callback]
)

ReactDOM.render(<VDOM />, document.getElementById('root'));