首頁(yè) 猿問(wèn) 如何在jsp頁(yè)面中使用react?

如何在jsp頁(yè)面中使用react?

React

胡說(shuō)叔叔 2018-09-04 14:10:15

如何在jsp頁(yè)面中使用react

查看完整描述

1 回答

湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

用reactjs構(gòu)建一個(gè)完整的前端頁(yè)面的步驟：
準(zhǔn)備：React 的安裝包，建議去安裝
1、使用 React 的網(wǎng)頁(yè)源碼，結(jié)構(gòu)大致如下：
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // **用戶代碼 ** </script> </body></html>
上面代碼有兩個(gè)地方需要注意。
首先，最后一個(gè) <script> 標(biāo)簽的 type 屬性為 text/babel 。這是因?yàn)?React 獨(dú)有的 JSX 語(yǔ)法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。
其次，上面代碼一共用了三個(gè)庫(kù)： react.js 、react-dom.js 和 Browser.js ，它們必須首先加載。其中，react.js 是 React 的核心庫(kù)，react-dom.js 是提供與 DOM 相關(guān)的功能，Browser.js 的作用是將 JSX 語(yǔ)法轉(zhuǎn)為 JavaScript 語(yǔ)法，這一步很消耗時(shí)間，實(shí)際上線的時(shí)候，應(yīng)該將它放到服務(wù)器完成。
2、將 src 子目錄的 js 文件進(jìn)行語(yǔ)法轉(zhuǎn)換，轉(zhuǎn)碼后的文件全部放在 build 子目錄。
$ babel src --out-dir build
3、渲染轉(zhuǎn)換成html節(jié)點(diǎn)，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于將模板轉(zhuǎn)為 HTML 語(yǔ)言，并插入指定的 DOM 節(jié)點(diǎn)。
這里以插入hello world為例來(lái)說(shuō)明
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));
4、運(yùn)行結(jié)果。