1.react核心庫react.development.js
2.react_dom庫，用于支持react操作dom（react-dom.development.js）
3.引入bable，解析jsx語法的庫，用于將jsx轉換為js(babel.min.js)
上述三個庫是寫基礎react的基本庫
下面我將用一個例子來總結jsx語法規則
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title><style>.title {color: blue;background-color: aqua;}</style>
</head><body><!-- 引入react 核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom庫 ，用于支持react操作Dom --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel 解析jsx語法的庫，用于將jsx轉換為js --><script type="text/javascript" src="../js/babel.min.js"></script></script><!-- 準備一個容器用于渲染接收 --><div id="test"></div><script type="text/babel">const myId = 'aiXueXi'const myData = 'HeLLo,ReaCt'// 創建虛擬DOM// toLocaleLowerCase()轉換成小寫字母// toUpperCase()轉換成大寫字母const VDOM = (<div><h2 className='title' id={myId.toLocaleLowerCase()}><span>{myData.toLocaleLowerCase()}</span></h2><h3 className='title' id={myId.toUpperCase()}><span >{myData.toUpperCase()}</span></h3><input type="text" /><good>測試</good></div>)// 渲染虛擬DOM到頁面ReactDOM.render(VDOM, document.getElementById('test'))</script>
</body></html>上面一個例子我簡單利用react的jsx創建虛擬dom來進行渲染頁面
從而總結jsx語法規則如下
- 定義虛擬dom的時候不要寫引號
- 標簽中混入js表達式的時候要用花括號
- 樣式的類名不能用class，要用className
- 內聯樣式，style={{key:value}}的形式去寫
- 只有一個根標簽
- 標簽首字母分大小寫兩種情況
- 如果首字母小寫字母開頭，則將改標簽轉換為html中的同名元素，如果html中沒有該標簽對應的同名元素就會報錯
- 如果首字母是大寫字母開頭，react就會去渲染對應的組件，如果沒有該組件就會報錯
)
