一文知晓JSX原理（推荐）-js教程-PHP中文网

要明白jsx的原理，需要先明白如何使用javascript对象来表现一个dom元素的结构。
看下面的dom结构：


  欢迎进入React的世界
  
    React.js 是一个帮助你构建页面 UI 的库

上面这个HTML所有的信息我们都可以使用JavaScript对象来表示：

{
  tag: 'p',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

但是这样用JavaScript写起来太长了，而且结构也不清晰，使用HTML的方式就很方便。
于是React.js就把JavaScript的语法扩展了一下，允许在JavaScript代码中编写类似HTML标签结构的语法，这样就方便多了，编译的过程会把类似HTML的JSX结构转换为JavaScript的对象结构。

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      
        
欢迎进入React的世界
        
          React.js 是一个构建页面 UI 的库
        
      
    )
  }
}

ReactDOM.render(
    ,
  document.getElementById('root')
)

转换为

无忧淘宝客系统(集成jssdk)

老版本已经不能使用新版本集成了jssdk 可以正常使用了 2012、5、19修复部分已知BUG 增加TXT文章管理系统，测试火车头等采集器可以成功发布文章修改模板调用函数，让模板打造更简单新增单页推广模块：目前整站模板1套，单页模板2个建立文章分类》建立单页模块填写文章ID 》添加广告语》添加分类商品（原添加商品位置新增了下拉框，选择分类，设置关键词或分类一键获取

下载

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "p",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),
  document.getElementById('root')
)

React.createElement会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等, 语法为

React.createElement(
  type,
  [props],
  [...children]
)

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程

JSX — 使用react构造组件，bable进行编译 —> JavaScript对象 — ReactDOM.render() —> DOM元素 —> 插入页面