在初識 react章節的最后，創建的第一個 react 項目里，App()方法里的代碼看起來有點兒奇怪。
明明長得像 HTML，卻能揉在 JS 代碼里不用轉義。
今天就來認識這個奇怪的代碼，也就是基于 JSX 語法寫的代碼。
什么是 JSX 語法
JSX 是 JavaScript 語法的擴展，即 JavaScript Extension。
React 使用 JSX 替代常規的 JavaScript。
它有很多優點，個人認為最好的一點，是提高了代碼的可讀性。特別是當需要使用 JavaScript 操作 DOM 的時候。
const element = <h1 className="myclass">Hello, world</h1>;
JSX 用來申明 react 中的元素。
與瀏覽器 DOM 元素不同，react 中的元素是普通的對象。
react DOM 可以確保瀏覽器 DOM 的數據內容與 react 元素保持一致。
通過 ReactDOM.render() 的方法，可以將 react 元素渲染到頁面上。
const element = <h1 className="myclass">Hello, world</h1>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render(element);
使用 JSX
那要如何使用 JSX 呢？一個一個來看。
多個 HTML 元素需要使用一個元素包裹
首先要記住的，是當有多個 HTML 元素要渲染的時候，一定要在最外層使用元素把所有的元素包裹起來。
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <h1>IT從業指北</h1> <h2>一起來學習 React</h2> </div> );
上面有<h1>和<h2>兩個元素，當需要渲染時，就需要在最外層使用<div>或其它元素將它們包裹起來。否則語法會有錯誤。
在 JSX 中使用 JavaScript
在 JSX 中使用 JavaScript 時，表達式寫在花括號 {} 中
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <h1>{2024 + 100}</h1> <h1>IT從業指北</h1> <h2>一起來學習 React</h2> </div> );
上面的第一個h1里，計算之后的值為 2124。
在 JSX 中不能使用條件判斷語句 if else，但可以使用三元運算表達式來替代。
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div>{i == 1 ? '成功' : '失敗'}</div> );
在 JSX 中使用數組
JSX 允許在模板中插入數組，且會自動展開數組中的所有成員。
var arr = [ <li>HTML教程</li>, <li>CSS教程</li>, <li>JavaScript教程</li>, ]; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <h1>IT從業指北有以下系列教程：</h1> <ul>{arr}</ul> </div> );
以上代碼渲染之后，頁面顯示內容如下：
在 JSX 中使用樣式
react 中推薦使用內聯樣式。
使用 camelCase 語法，也就是著名的駝峰語法來設置內聯樣式。
var myStyle = { fontSize: 16, color: '#FF6600' }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <div> <h1>IT從業指北有以下系列教程：</h1> <ul style= {myStyle}>{arr}</ul> </div> );
?
這里注意，react 會在特定元素值的數字后自動添加 px 。比如上述的fontSize值中的 16 表示的是 16px。
JSX 中的注釋
JSX 中的注釋分兩種場景：
在標簽內：注釋需要花括號
在標簽外：注釋不能使用花括號
var myStyle = { fontSize: 16, color: '#FF6600' }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( /*標簽外的注釋 */ <div> <h1>IT從業指北有以下系列教程：</h1> {/*標簽內的注釋.*/} <ul style= {myStyle}>{arr}</ul> </div> );
總結
?? JSX 是 JavaScript 語法的擴展，即 JavaScript Extension。
?? 當有多個 HTML 元素要渲染的時候，一定要在最外層使用元素把所有的元素包裹起來。
?? 在 JSX 使用樣式的時候，react 會在特定元素值的數字后自動添加 px
該文章在 2024/11/28 17:40:03 編輯過
400 186 1886
