React元件初識

示例demo

編寫函式元件

function

hello()

// 箭頭函式表示

const
hello=(
)=>
這是第乙個函式元件<
/div>
// 只有一句話，可不寫return利用reactdom.render()進行渲染
reactdom.

render
(>
,document.
getelementbyid
('root'
))

建立class類，繼承react.component，在裡面提供render方法，在return裡面返回內容

class

hello
extends
react.component
}

reactdom.

render
(>
,document.
getelementbyid
('root'
))

import react from

'react'
class
hello
extends
react.component
}export
default hello

import react from

'react'
export
default
class
extends react.component 
}

import hello from

'./js/hello'
reactdom.
render
(>
,document.
getelementbyid
('root'
))

類元件

export

extends react.component 
render()
>點我點我點我<
/button>
<
/div>)}
}

function()

return
(>點我點我點我<
/button>
<
/div>
)}小結示例demo
export

extends react.component

render()

>點我點我點我<

/button>

<

/div>)}

}compositionevent 復合事件

keyboard events 鍵盤事件

focus events 焦點事件 （這些焦點事件在 react dom 上的所有元素都有效，不只是表單元素）

form events 表單事件

mouse events 滑鼠事件

pointer events 指標事件

selection events 選擇事件

touch events 觸控事件

ui events ui 事件

wheel events 滾輪事件

media events **事件

image events 影象事件

animation events 動畫事件

transition events 過渡事件

other events 其他事件

示例demo

第一種初始化方式

export

extends react.component 
}render()
<
/div>
)}

export

extends react.component 
render()
<
/div>)}
}

export

default
class
extends react.component 
render()
<
/div>
}>+1
<
/button>
<
/div>)}
}

class

extends
react.component
// 通過bind方法改變了當前函式中this的指向
this
.onincrement =
this
.onincrement.
bind
(this)}
// 事件處理程式
onincrement()
render()
>
<
/button>)}
}

class

extends
react.component
// 事件處理程式
onincrement=(
)=>)}
render()
<
/div>
>
<
/button>)}
}

React元件開發（一）初識React

react不屬於mvc mvvm，只是單純的v層 react核心是元件 提高 復用率 降低測試難度 複雜度 自動dom操作，狀態對應內容。react核心js檔案 react.js和react dom.js，每乙個react元件開發都必須引用這兩個js檔案。browser.js用來將瀏覽器不識別的js...

React 4課 react初識元件

npm init y npm i babel standalone d npm i react react dom d 安裝完成後我們開始學習下面知識 react初識元件title head div src node modules babel standalone babel.js script ...

初識React 7 高階元件

高階元件，聽著好像很高大尚，但是其實高階元件就是乙個函式的引數是元件，返回的是乙個新的元件。那麼，高階元件有什麼好處呢，高階元件可以減少 冗餘，把共有的 提取出來，下面有個例子說明下 import react from react function newhigher componenttest r...