1. JSX介紹
- React 使用 JSX 來替代常規的 JavaScript，
- JSX：是 JavaScript XML的縮寫，
- JSX， 一種 JavaScript 的語法擴展，腳手架中內置了 @babel/plugin-transform-react-jsx 包，用來決議該語法，
- JSX 用于在 React 中描述用戶界面，
- JSX 是在 JavaScript 內部實作的，
示例代碼：
// 匯入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// jsx創建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))2. JSX基本使用
1. JSX 中可以使用 JavaScript 運算式，運算式寫在花括號 {} 中，
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('root')
);2. 在JSX 中不能使用 if else 陳述句，可以使用三元運算運算式來替代，
<h1>{i === 1 ? 'True!' : 'False'}</h1>3. React 推薦使用行內樣式，可以使用 camelCase 語法來設定行內樣式. React 會在指定元素數字后自動添加 px ，
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>我的樣式</h1>,
document.getElementById('root')
);
4. 注釋需要寫在花括號中
{/*注釋...*/}5. JSX 允許在模板中插入陣列，陣列會自動展開所有成員
var arr = [
<h1>呵呵</h1>,
<h2>哈哈</h2>,
]
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('root')
)注意事項:
1. 由于 JSX 就是 JavaScript，一些識別符號像 class 和 for 不建議作為 XML 屬性名，作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性，
2. jsx必須要有一個根節點 （虛擬根節點 1.<></>2.<React.Fragment> </React.Fragment> ）
3. 單標簽要閉合 （<input> === <input />）
4. 換行建議使用( )包裹
5. 老版本(16.8)先引入react才能使用jsx （老版本中不引入就會報錯React must be in scope when using JSX）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/352241.html
標籤：其他
上一篇：開發一個全堆疊網頁的步驟
下一篇：vue隨筆(2)