react的基礎用法(1)

2022-06-07 08:24:09 字數 1655 閱讀 2535

首先需要先安裝: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 去編譯,如果遇到了 ...