首先需要先安裝:npm init -y
(react/umd/react.development.js)
(react-dom/umd/react-dom.development.js)
(babel-standalone/babel.min.js)
在寫**的時候要把上面三個js檔案引入(每個專案都需要加),
書寫的格式reactdom.render()固定格式
const a = 我是p標籤
jsx內部的編譯原理: babel會把jsx**轉譯成乙個名字react.createelement()方法進行呼叫
上面一行**為例:
const a = react.createelement(
'div',
{},react.createelement('h2',,"我是h2"),
react.createelement('p',{},"我是p"),
);也就相當於:
在jsx**模式新增style屬性的時候,
// 注意這裡的兩個括號,第乙個表示我們在要jsx裡插入js了,第二個是物件的括號
hello world
還可以使用這種方法
const style =
hello world
react推薦我們使用行內樣式,因為react覺得每乙個元件都是乙個獨立的整體
其實我們大多數情況下還是大量的在為元素新增類名,但是需要注意的是,class
需要寫成classname
(因為畢竟是在寫類js**,會收到js規則的現在,而class
是關鍵字)
hello world
const a = 10
reactdom.render(
//react中通過{}來渲染變數 (只要寫js**了,就需要通過引入{}語法)
11//陣列會渲染成字串
}*/} jsx中注釋需要
()}
繫結事件 遵從駝峰式寫法 onclick>onclick onkeyup>onkeyup
console.log(1111)}/>
// 下述寫法麻煩,謹記寫在render下面!
// document.getelementbyid("p1").onclick = function()
在react裡,沒有像vue裡面v-for= v-if v-show v-once v-model v-on v-bind 這些方法,在react裡我們可以寫內部執行原理的類似於原生js的**,下面我們舉例寫遍歷的**:
const arr = ["a","b","c","d"]
reactdom.render(
如果僅僅是這樣寫的話,會報沒有新增key值的錯。所以我們需要新增key值,作用為:
**改為
}) }
此時加上key值,報錯就會消失。 Updatepanel的基礎用法(1)
1.conditional 該updatepanel內的內容只會在該updatepanel內部有回發時更新 always 會在本頁面有回發時更新,而不管這個回發是不是在其updatepanel內部發生 盡量避免使用always,因為它會在每次頁面有回發時都會進行更新 datetime.now dat...
React 初級用法
作為乙個開發人員,如今我們大多數都會沉迷於專案的業務開發,很少花時間進行技術或問題梳理。以至於我們每次遇到相同的問題或障礙,都會再次陷入。總結和思考應該是我們每乙個人所要掌握的軟技能。react作為乙個主流的js庫,使我們的開發變得更加簡單。react是facebook開發的一款js庫。react便...
React 基本用法
元素 用 classname 來代替 class htmlfor 替換 lable 的 for 屬性 標籤 標籤必須成對出現,如果是單標籤,則必須自閉和 注釋推薦使用 也可也用 這是注釋 這是注釋 這是注釋當編譯引擎,在編譯 jsx 的時候,如果遇到了 那麼會把它當作 html 去編譯,如果遇到了 ...