bower 的使用及react腳手架的搭建
阿新 • • 發佈：2018-12-16
- 安裝 npm install bower -g
- bower 的方法
- info (資訊) -->如 bower info react //用bower查react框架 的資訊 可以看到版本的資訊
- install (下載)
- bower install react -->預設下載最高版本
- 指定版本 如: ---> #15.6.1
- 返回資料夾會看到生成的檔案
- 下載babel 依賴 用於書寫jsx語法
- bower install babel
- 如果你引用的是指令碼一定不要引錯序號,
- 第一個react.js相當於juery.js
- 第二個 react-dom.js 為虛擬DOM用於jsx中寫標籤的時候不需要用字串 var a = <div>hello react</div>
- 第三個browser.js 只有引用了它才能有JSX語法.
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./bower_components/react/react.js"></script> <script src="./bower_components/react/react-dom.js"></script> <script src="./bower_components/babel/browser.js"></script> </body> </html>
-
正式渲染HTML
-
<script type="text/babel"> 裡的type一定要是babel;不然不識別jsx語法
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./bower_components/react/react.js"></script> <script src="./bower_components/react/react-dom.js"></script> <script src="./bower_components/babel/browser.js"></script> <div id="app"></div> <script type="text/babel"> ReactDOM.render( <h1> hellow react !</h1>,//寫入內容元素 document.getElementById('app')//放到哪個模組 ) </script> </body> </html> -
多標籤的定義方法
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./bower_components/react/react.js"></script> <script src="./bower_components/react/react-dom.js"></script> <script src="./bower_components/babel/browser.js"></script> <div id="app"></div> <script type="text/babel"> //如果多標籤可以在外面定義 var a = (<div><div> hellow react !</div><span>dsfsdf</span></div>) ReactDOM.render( a,//寫入內容元素 document.getElementById('app')//插入那個模組 ) </script> </body> </html>