首頁猿問如何在jsp頁面中使用react

如何在jsp頁面中使用react

React.JS

縹緲止盈 2018-07-03 09:09:05

如何在jsp頁面中使用react

查看完整描述

1 回答

寶慕林4294392

TA貢獻2021條經(jīng)驗獲得超8個贊

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