doctype html
>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
script
src=""
>
script
>
<
script
src=""
>
script
>
<
script
src=""
>
script
>
head
>
<
body
>
<
div
id>
div>
<
script
type
="text/babel"
>
/*注意，原生 html元素名以小寫字母開頭，而自定義的 react類名以大寫字母開頭，
比如 hellomessage不能寫成 hellomessage;
除此之外還需要注意元件類只能包含乙個頂層標籤，否則也會報錯
*///
函式封裝元件
function
newcomponent(props)
//es6建立元件
class comfill extends react.component
}//向元件傳遞引數
function
hellomessage(props)
!<
/h1>;
}
//復合元件
function
return
(
<
div>
<
newcomponent
/>
<
comfill
/>
<
hellomessage name="
react
"/>
<
/div>
); }
//const element3 = ; /*使用者自定義的元件*/
reactdom.render(
<
/>,
document.getelementbyid(''
) );
script
>
body
>
html
>
React學習筆記（三）元件
元件 props 元件可以在它的輸出中引用其它元件，這就可以讓我們用同一元件來抽象出任意層次的細節。在react應用中，按鈕 表單 對話方塊 整個螢幕的內容等，這些通常都被表示為元件。react將作為props傳入並呼叫welcome元件。welcome元件將元素作為結果返回。functionwel...
React（三） 元件的生命週期
react元件的生命週期分為三大部分 1 掛載 mount 我們把元件渲染，並且構造dom元素插入到頁面的過程稱為元件的掛載。元件掛載的過程 元件掛載先關函式，只在元件掛載的時候呼叫，在元件更新時不會執行 import react from react class test extends reac...
React學習（四）元件
元件 上面 中，變數 hellomessage 就是乙個元件類。模板插入 時，會自動生成 hellomessage 的乙個例項 下文的 元件 都指元件類的例項 所有元件類都必須有自己的 render 方法，用於輸出元件。注意，元件類的第乙個字母必須大寫，否則會報錯，比如hellomessage不能寫...