包含jsx中的javascript的詞條

本文目錄一覽：

• 1、jsx，就是一個js語法的擴展嗎？
• 2、jsx文件如何是什麼
• 3、如何使用react-tools將jsx編譯成JavaScript
• 4、js 和 jsx 有什麼區別
• 5、jsx是javascript的一種語法擴展嗎

jsx，就是一個js語法的擴展嗎？

JSX是一種JavaScript的語法擴展，運用於React架構中，其格式比較像是模版語言，但事實上完全是在JavaScript內部實現的。元素是構成React應用的最小單位，JSX就是用來聲明React當中的元素，React使用JSX來描述用戶界面

jsx文件如何是什麼

JSX 文件，即帶有擴展的 JavaScript。其中可包含處理 XML 的 ECMAScript（過去稱為 JavaScript）。JSX 文件中的功能由 Web Service 進行 XML 映射時調用。WebLogic Workshop 擴展了 ECMAScript 語言，支持將 XML 作為本機類型，從而可以在腳本中直接處理 XML。

如何使用react-tools將jsx編譯成JavaScript

使用react-tools將jsx編譯成JavaScript方法：

1,通過npm安裝react-tools

npm –g react-tools

2,通過cmd進入項目根目錄執行watch命令 jsx –watch src/ build/

src路徑下存放的是jsx文件，編譯後的js存放到build路徑下

3,當目標文件變化以後，自動構建生成新的js文件。

js 和 jsx 有什麼區別

js就是前端開發語言，jsx是React框架下用的，要在React框架中的編譯器編譯成js語言才能使用的

jsx是javascript的一種語法擴展嗎

對的，JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來創建虛擬DOM。當遇到，JSX就當HTML解析，遇到{就當JavaScript解析。

如下(JS寫法)

var child1 = React.createElement(‘li’, null, ‘First Text Content’);

var child2 = React.createElement(‘li’, null, ‘Second Text Content’);

var root = React.createElement(‘ul’, { className: ‘my-list’ }, child1, child2);

等價於(JSX寫法)

var root =(

  ul className=”my-list”

    liFirst Text Content/li

    liSecond Text Content/li

  /ul

);

後者將XML語法直接加入JS中,通過代碼而非模板來高效的定義界面。之後JSX通過翻譯器轉換為純JS再由瀏覽器執行。在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，JSX的語法不會帶來任何性能影響。另外，由於JSX只是一種語法，因此JavaScript的關鍵字class, for等也不能出現在XML中，而要如例子中所示，使用className, htmlFor代替，這和原生DOM在JavaScript中的創建也是一致的。JSX只是創建虛擬DOM的一種語法格式而已,除了用JSX,我們也可以用JS代碼來創建虛擬DOM。