前端三大主流框架之一 React
React
React是Facebook開發的一款JS庫,其更注重於檢視層。
React不是一個MVC框架,它是一個構造可組合式使用者介面的庫。它鼓勵建立可重用的UI元件顯示會隨著時間而改變的資料。
如果你是一個新手,你可以選擇直接引入方法
安裝步驟
1、下載需要引入的檔案
第一步:建立一個資料夾(名字必須是英文),開啟cmd 輸入全域性命令 npm install bower -g
第二步:輸入 bower install react 如果你需要指定的版本 可輸入 bower install react #15.6.1
第三步:輸入 bower install babel
2、引入檔案
建立一個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> <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> </head> <body> <div id="app"> </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 語法。
ReactDOM.render()
ReactDOM.render 是 React 的最基本方法,用於將模板轉為 HTML 語言,並插入指定的 DOM 節點。
ReactDOM.render(
<div>
<h1>i love you !</h1>
</div>,
document.getElementById("app")
)
JSX 語法(以下程式碼包含jsx語法)
HTML 語言直接寫在 JavaScript 語言之中,不加任何引號,它允許 HTML 與 JavaScript 的混寫。
JSX 的基本語法規則:遇到 HTML 標籤(以 <
開頭),就用 HTML 規則解析;遇到程式碼塊(以 {
開頭),就用 JavaScript 規則解析
可用let宣告程式碼如下
let tag = <div><div>hollo</div><span>word</span></div>
ReactDOM.render(
<div>
<h2>{tag}</h2>
</div>,
document.getElementById("app")
)
多選框單選框預設選中且可以更改 input框書寫預設值可更改
ReactDOM.render(
<div>
<input type='text' defaultValue='pug'/>
<input type='radio' name='s' defaultChecked />
<input type='radio' name='s' defaultChecked />
<input type='checkbox' defaultChecked />
</div>,
document.getElementById("app")
)
以上程式碼需注意 在預設選中或更改時需新增default 且後面的屬性第一個字母要大寫 其遵循小駝峰命名規則
如果想要了解駝峰命名規則,點選我