溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了react jsx是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
react jsx是一個看起來很像XML的JavaScript語法擴展，React使用JSX來替代常規的JavaScript，JSX的優勢有：1、JSX執行更快；2、它是類型安全的，在編譯過程中就能發現錯誤；3、使用JSX編寫模板更快。
React JSX
React 使用 JSX 來替代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。
我們不需要一定使用 JSX，但它有以下優點：
JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。
它是類型安全的，在編譯過程中就能發現錯誤。
使用 JSX 編寫模板更加簡單快速。
我們先看下以下代碼：
const element = <h2>Hello, world!</h2>;
這種看起來可能有些奇怪的標簽語法既不是字符串也不是 HTML。
它被稱為 JSX， 一種 JavaScript 的語法擴展。 我們推薦在 React 中使用 JSX 來描述用戶界面。
JSX 是在 JavaScript 內部實現的。
我們知道元素是構成 React 應用的最小單位，JSX 就是用來聲明 React 當中的元素。
與瀏覽器的 DOM 元素不同，React 當中的元素事實上是普通的對象，React DOM 可以確保 瀏覽器 DOM 的數據內容與 React 元素保持一致。
要將 React 元素渲染到根 DOM 節點中，我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上：
React 實例
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));注意:
由于 JSX 就是 JavaScript，一些標識符像 class 和 for 不建議作為 XML 屬性名。作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性。
使用 JSX
JSX 看起來類似 HTML ，我們可以看下實例:
ReactDOM.render(
<h2>Hello, world!</h2>,
document.getElementById('example')
);我們可以在以上代碼中嵌套多個 HTML 標簽，需要使用一個 div 元素包裹它，實例中的 p 元素添加了自定義屬性 data-myattribute，添加自定義屬性需要使用 data- 前綴。
React 實例
ReactDOM.render(
<div>
<h2>億速云</h2>
<h3>歡迎學習 React</h3>
<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
</div>
,
document.getElementById('example')
);獨立文件
你的 React JSX 代碼可以放在一個獨立文件上，例如我們創建一個 helloworld_react.js 文件，代碼如下：
ReactDOM.render(
<h2>Hello, world!</h2>,
document.getElementById('example')
);然后在 HTML 文件中引入該 JS 文件：
React 實例
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
JavaScript 表達式
我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下：
React 實例
ReactDOM.render(
<div>
<h2>{1+1}</h2>
</div>
,
document.getElementById('example')
);在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等于 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.
React 實例
ReactDOM.render(
<div>
<h2>{i == 1 ? 'True!' : 'False'}</h2>
</div>
,
document.getElementById('example')
);樣式
React 推薦使用內聯樣式。我們可以使用 camelCase 語法來設置內聯樣式. React 會在指定元素數字后自動添加 px 。以下實例演示了為 h2 元素添加 myStyle 內聯樣式：
React 實例
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h2 style = {myStyle}>億速云</h2>,
document.getElementById('example')
);注釋
注釋需要寫在花括號中，實例如下：
React 實例
ReactDOM.render(
<div>
<h2>億速云</h2>
{/*注釋...*/}
</div>,
document.getElementById('example')
);數組
JSX 允許在模板中插入數組，數組會自動展開所有成員：
React 實例
var arr = [
<h2>億速云</h2>,
<h3>學的不僅是技術，更是夢想！</h3>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);感謝你能夠認真閱讀完這篇文章，希望小編分享react jsx是什么內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
