react jsx是什麼
react jsx是一個看起來很像XML的JavaScript語法擴展，React使用JSX來取代常規的JavaScript，JSX的優勢有：1、JSX執行更快；2、它是類型安全的，在編譯過程中就能發現錯誤；3.使用JSX編寫模板更快。
本教學操作環境：windows10系統、react16，本文適用於所有品牌的電腦。
推薦：《程式設計影片》
React JSX
React 使用 JSX 來取代常規的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴充。
我們不需要一定使用 JSX，但它有以下優點：
JSX 執行得更快，因為它在編譯為 JavaScript 程式碼後進行了最佳化。
它是型別安全的，在編譯過程中就能發現錯誤。
使用 JSX 寫模板更簡單快速。
我們先看以下程式碼：
const element = <h1>Hello, world!</h1>;
這個看起來可能有些奇怪的標籤語法既不是字串也不是 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(
<h1>Hello, world!</h1>,
document.getElementById('example')
);我們可以在上述程式碼中嵌套多個HTML 標籤，需要使用一個div元素包覆它，實例中的p 元素添加了自訂屬性data-myattribute，添加自訂屬性需要使用data- 前綴。
React 實例
ReactDOM.render(
<div>
<h1>PHP中文网</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);獨立檔案
你的React JSX 程式碼可以放在一個獨立檔案上，例如我們建立一個helloworld_react.js 文件，程式碼如下：
ReactDOM.render( <h1>Hello, world!</h1>, 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>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來取代。以下實例中如果變數i 等於1 瀏覽器會輸出true, 如果修改i 的值，則會輸出false.
React 實例
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);樣式
React 建議使用內聯樣式。我們可以使用 camelCase 語法來設定內聯樣式. React 會在指定元素數字後自動新增 px 。以下實例示範了為h1 元素新增myStyle 內嵌樣式：
React 實例
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>PHP中文网</h1>,
document.getElementById('example')
);註解
註解需要寫在花括號中，實例如下：
React 實例
ReactDOM.render(
<div>
<h1>PHP中文网</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);數組
JSX 允許在模板中插入數組，數組會自動展開所有成員：
React 實例
var arr = [
<h1>PHP中文网</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);以上是react jsx是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何利用React和WebSocket建立即時聊天應用
Sep 26, 2023 pm 07:46 PM
如何利用React和WebSocket建立即時聊天應用程式引言：隨著網路的快速發展，即時通訊越來越受到人們的關注。即時聊天應用程式已成為現代社交和工作生活中不可或缺的一部分。本文將介紹如何利用React和WebSocket建立一個簡單的即時聊天應用，並提供具體的程式碼範例。一、技術準備在開始建立即時聊天應用之前，我們需要準備以下技術和工具：React：一個用於構建
React前後端分離指南：如何實作前後端的解耦與獨立部署
Sep 28, 2023 am 10:48 AM
React前後端分離指南：如何實現前後端的解耦和獨立部署，需要具體程式碼範例在當今的Web開發環境中，前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開，可以讓開發工作更加靈活、高效，並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離，從而實現解耦和獨立部署的目標。首先，我們要先理解什麼是前後端分離。傳統的Web開發模式中，前端和後端是耦合在
如何利用React和Flask建構簡單易用的網路應用
Sep 27, 2023 am 11:09 AM
如何利用React和Flask建構簡單易用的網路應用引言：隨著網路的發展，網路應用的需求也越來越多樣化和複雜化。為了滿足使用者對於易用性和效能的要求，使用現代化的技術堆疊來建立網路應用變得越來越重要。 React和Flask是兩個在前端和後端開發中非常受歡迎的框架，它們可以很好的結合在一起，用來建立簡單易用的網路應用。本文將詳細介紹如何利用React和Flask
如何利用React和RabbitMQ建立可靠的訊息應用
Sep 28, 2023 pm 08:24 PM
如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言：現代化的應用程式需要支援可靠的訊息傳遞，以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫，用於建立使用者介面，而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用，並提供具體的程式碼範例。 RabbitMQ概述：
React響應式設計指南：如何實現自適應的前端佈局效果
Sep 26, 2023 am 11:34 AM
React響應式設計指南：如何實現自適應的前端佈局效果隨著行動裝置的普及和使用者對多螢幕體驗的需求增加，響應式設計成為了現代前端開發的重要考量之一。而React作為目前最受歡迎的前端框架之一，提供了豐富的工具和元件，能夠幫助開發人員實現自適應的佈局效果。本文將分享一些關於使用React實現響應式設計的指南和技巧，並提供具體的程式碼範例供參考。使用React的Fle
React程式碼偵錯指南：如何快速定位與解決前端bug
Sep 26, 2023 pm 02:25 PM
React程式碼偵錯指南：如何快速定位並解決前端bug引言：在開發React應用程式時，經常會遇到各種各樣的bug，這些bug可能會使應用程式崩潰或導致不正確的行為。因此，掌握調試技巧是每個React開發者必備的能力。本文將介紹一些定位和解決前端bug的實用技巧，並提供具體的程式碼範例，幫助讀者快速定位和解決React應用程式中的bug。一、調試工具的選擇：在Re
React Router使用指南：如何實現前端路由控制
Sep 29, 2023 pm 05:45 PM
ReactRouter使用指南：如何實現前端路由控制隨著單頁應用的流行，前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫，提供了豐富的功能和易用的API，使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範例。安裝ReactRouter首先，我們需要
如何利用React和Google BigQuery建立快速的資料分析應用
Sep 26, 2023 pm 06:12 PM
如何利用React和GoogleBigQuery建立快速的資料分析應用引言：在當今資訊爆炸的時代，資料分析已經成為了各產業中不可或缺的環節。而其中，建構快速、有效率的資料分析應用則成為了許多企業和個人追求的目標。本文將介紹如何利用React和GoogleBigQuery結合來建立快速的資料分析應用，並提供詳細的程式碼範例。一、概述React是用來構建
