jsx及其语法.md

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.0.17/browser.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0-alpha.3174632/cjs/react-dom.production.min.js"></script>
<body>
  <div id="app"></div>  // 需要一个根容器
  <script type="text/babel">
    let oApp = document.getElementById('app'); // react接管的根组件
    ReactDom.render(<span keys='222'>hello world</span>,oApp)
    //React.creatElement(''span",{keys:222},"hello world")
  </script>
</body>
</html>

jsx 是通过js和xml实现的, 所以更偏向于js语言风格，有以下注意点

- jsx创建的组件，必须有且仅有一个父级
- 单标签必须闭合
- class要写成className
- label中for要写成htmlFor
空标签组件Fragement
dangerouslySetInnerHTML={{__html: item}}
{/* 注释 */}

jsx语法

jsx基本语法

ReactDOM

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

let content = <h1>jsx...</h1>

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

样式处理

// style样式要写成对象形式
let jsx = <div style={{fontSize: 14px;}}></div>

// 当是真实项目中还是使用className='jsx'

import './index.css'

数据逻辑处理

let name = 'Rosen'
let name = ['Rosen','Jack','xiaolong']

let flag = true
// 条件判断
let jsx = (
  <div>
    {/*  条件判断 */}
    {
       flag?<p>I am {name}</p>:<p> I am not {name}</p>
    }
    {/* 数组循环 */}
    {
      names.map((name,index)=><p key={index}>Hello I am {name}</p>)
    }
  </div>
)

jsx及其语法.md

jsx语法

jsx基本语法

ReactDOM

样式处理

数据逻辑处理

推荐阅读更多精彩内容