如何在jsp頁面中使用react
1 回答
寶慕林4294392
TA貢獻2021條經驗 獲得超8個贊
用reactjs構建一個完整的前端頁面的步驟：
準備：React 的安裝包，建議去安裝
1、使用 React 的網頁源碼，結構大致如下：
<!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 相關的功能，Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
2、將 src 子目錄的 js 文件進行語法轉換，轉碼后的文件全部放在 build 子目錄。
$ babel src --out-dir build
3、渲染轉換成html節點，以方便操作dom：
ReactDOM.render 是 React 的最基本方法，用于將模板轉為 HTML 語言，并插入指定的 DOM 節點。
這里以插入hello world為例來說明
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));
4、運行結果。
添加回答
舉報
0/150
提交
取消