<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> // 需要一個(gè)根容器
<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實(shí)現(xiàn)的, 所以更偏向于js語言風(fēng)格宪赶，有以下注意點(diǎn)
- jsx創(chuàng)建的組件辅甥，必須有且僅有一個(gè)父級(jí)
- 單標(biāo)簽必須閉合
- class要寫成className
- label中for要寫成htmlFor
空標(biāo)簽組件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樣式要寫成對(duì)象形式
let jsx = <div style={{fontSize: 14px;}}></div>
// 當(dāng)是真實(shí)項(xiàng)目中還是使用className='jsx'
import './index.css'
數(shù)據(jù)邏輯處理
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>
}
{/* 數(shù)組循環(huán) */}
{
names.map((name,index)=><p key={index}>Hello I am {name}</p>)
}
</div>
)
