❶ 最新react棄用了jsxtransformer了那jsx還能用嗎
最新react棄用了jsxtransformer了那jsx還能用
這個確實是網路就能解決的問題 補充下樓上的回答
在react 0.14前,瀏覽器端實現對jsx的編譯依賴jsxtransformer.js
在react 0.14後,這個依賴的庫改為browser.js
頁面script標簽的type也由text/jsx改為text/babel
但是以上只能用來測試學習react
生產環境需要藉助編譯工具事先將jsx編譯成js
對應的這個工具也由react-tool更換為babel
❷ jsx是javascript的一種語法擴展嗎
對的,JSX就是Javascript和XML結合的一種格式。React發明了JSX,利用HTML語法來創建虛擬DOM。當遇到<,JSX就當HTML解析,遇到{就當JavaScript解析。
如下(JS寫法)
varchild1=React.createElement('li',null,'FirstTextContent');
varchild2=React.createElement('li',null,'SecondTextContent');
varroot=React.createElement('ul',{className:'my-list'},child1,child2);
等價於(JSX寫法)
varroot=(
<ulclassName="my-list">
<li>FirstTextContent</li>
<li>SecondTextContent</li>
</ul>
);
後者將XML語法直接加入JS中,通過代碼而非模板來高效的定義界面。之後JSX通過翻譯器轉換為純JS再由瀏覽器執行。在實際開發中,JSX在產品打包階段都已經編譯成純JavaScript,JSX的語法不會帶來任何性能影響。另外,由於JSX只是一種語法,因此JavaScript的關鍵字class, for等也不能出現在XML中,而要如例子中所示,使用className, htmlFor代替,這和原生DOM在JavaScript中的創建也是一致的。JSX只是創建虛擬DOM的一種語法格式而已,除了用JSX,我們也可以用JS代碼來創建虛擬DOM。
❸ 如何使用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文件。
❹ 如何用 Bower 編譯 jsx
1.安裝node,因為ts的編譯器是js/ts寫的; 安裝node後同時獲得npm命令,這是nodejs世界裡的包管理器(也可以看作node的app商店); 2.安裝vs 2015或者vs code,當然這不是必須的,但是這里強烈推薦寫ts的工具,vs第一,vsc第二; 3.vs自帶了Type...
❺ 怎麼在html5中直接編譯jsx
/newscodejs.asp?lm2=84&list=5&icon=/img/fk.gif&tj=0&font=9&hot=0&new=0&line=0&lmname=0&open=1&n=36&more=0&t=0&week=0&zzly=0&hit=0&pls=0
這個文件顯示的結果必須是js格式
如輸出<img src="1.jpg" />
需要寫成
document.write("<img src=\"1.jpg\" />")
❻ JavaScript在網頁中執行需要先編譯成可執行文件對嗎為什麼
JavaScript是腳本語言,由解釋器解釋執行,不算編譯。所以這句話不對
JavaScript也可以看成過程語言,順序執行。
❼ 原來Babel 能直接編譯 JSX.官方用的是哪個
習慣了WebStorm的話..我就假設題主會用Node.js和npm啦~一句話總結:用WebStorm自帶的FileWatcher功能+Babel實現自動轉換ECMAScript6代碼為ES5代碼我是這么配置的..就先新建一個EmptyProject,然後在src目錄下新建了一個main.js;//這一步不是必須的只是剛上手的話從空項目開始自己配置會少很多干擾Then..進入設置,把JavaScriptlanguageversion改成ECMAScript6;再Then..寫一段ES6代碼'usestrict';//node直接運行ES6代碼時,如使用了ES6的一些關鍵字,比如let,就需要嚴格模式,否則會報錯//這是沒有嚴格模式時候的錯誤提示//SyntaxError:Block-scopeddeclarations(let,const,function,class)*fibs(){//GeneratorFunctionleta=0;letb=1;while(true){yielda;//[a,b]=[b,a+b];b=a+b;a=b-a;}}let[first,second,third,fourth,fifth,sixth]=fibs();console.log(first,second,third,fourth,fifth,sixth);現在IDE會出現一個Filewatcher提示條先別點Addwatcher!我們要先去裝babel~首先在根目錄新建一個package.json{"name":"test-project","version":"1.0.0"}然後打開IDE的Terminal,安裝babel-clinpminstall--save-devbabel-cliGood!現在可以去點Addwatcher啦,點完之後會彈出一個框,其中大部分設置IDE都幫你搞定了下面第三行,Program那一項,填$ProjectFileDir$/node_moles/.bin/babel然後點OK,這個時候你就會發現左邊多出來一個main-compiled.js文件啦但是還沒搞定!現在只是搞定了自動轉換的功能,系統默認把ES6compile成了ES6..(你應該會發現compile出來的東西跟原來的一樣..Generator函數並沒有被轉換成ES5的格式)所以我們需要安裝Babel的preset以正確識別ES6代碼;和剛才一樣,在npm安裝babel的ES6的presetnpminstall--save-devbabel-preset-es2015在根目錄下新建一個.babelrc文件(就是babel在當前項目的配置文件),寫上{"presets":["es2015"]}OK搞定!保存再回去看一下main-compiled.js應該就變成這個樣子啦,現在你在main.js里直接寫ES6代碼,IDE都會自動compile成ES5的代碼在這里啦~注意:想直接用Node.js運行ES6代碼還是有些問題..因為這段代碼用的ES6的解構賦值Node.js還未完全支持,需要在運行的時候加入一些tags(以開啟Node.js的相關試驗特性),具體可以參考Node.js官網對ES6的說明:ECMAScript2015(ES6)。
❽ 如何使用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文件。
❾ jsx文件如何是什麼
JSX 文件,即帶有擴展的 JavaScript。其中可包含處理 XML 的 ECMAScript(過去稱為 JavaScript)。JSX 文件中的功能由 Web Service 進行 XML 映射時調用。WebLogic Workshop 擴展了 ECMAScript 語言,支持將 XML 作為本機類型,從而可以在腳本中直接處理 XML。