1.react的入口檔案為index.js
2.在index.js中,首先需要引入react等元件
在vscode中安裝了外掛程式可使用快鍵鍵新增 imr imrd 依次import react和reactdomimport react from
'react'
import reactdom from
'react-dom'
//操作dom
//html
import xiaojiejie from
'./xiaojiejie'
//這裡是你需要自定義的元件
reactdom.
render
(< xiaojiejie /
>
, document.
getelementbyid
('root'
))
root是在index.html中的id
注意,在react中所有的自定義元件開頭第乙個字母大寫
3.在自定義組建中需要引入react以及component
快捷鍵為imrcimport react,
from
'react'
4.在自定義組建中寫html以及js**。(jsx)
可以使用rcc快捷鍵快速建立這個模板import react,
from
'react'
export
default
class
aaaextends
component
}
有時候需要使用flex布局的時候,不需要外層巢狀一層div的話,則需要額外引入fragment
解構如下import react,
from
"react"
;
類似於vue中的data則寫在render方法前import react,
from
"react"
;export
default
class
aaaextends
component
}
自定義的方法寫在render後constructor
(props)
;}
在jsx中,為了方便自定義函式中獲取this,則需要使用箭頭函式或者bind繫結this
在react中,oncilck等事件均使用駝峰命名,不是全部小寫
value=
onchange=
// 使用es6的箭頭函式或者es5的bind繫結this
// onchange=
>
<
/input>
>增加服務<
/button>
<
/div>
key=
>
<
/li>);
})}<
/ul>
<
/fragment>
在react中無法雙向繫結資料,只有單項,而且使用的是資料驅動,所以如下方式進行繫結
//獲取input框裡的值只能從e中獲取,然後繫結到類data裡
inputchange
(e));}
addlist()
);}}
//這裡不能直接處理this.state的資料,需要先複製再賦值
delitem
(index));
}
從零react從入門到放棄
簡介 react是facebook出的一款針對view視層圖的library 庫 主要使用單向資料流的方式進行資料展示。react擁有較高的效能,邏輯非常簡單,越來越多的人已經開始關注和使用他 src script src script src script 通過npm或yarn使用react 國內...
C 從入門到放棄(1)
c 從入門到放棄 1 以字母或下劃線開始,由字母 數字 下劃線組成 大小寫有區別 不能與關鍵字 裝置字衝突 系統預留字元 單目運算子 雙目運算子 三目運算子 空格符 用來做單詞之間的分隔,可解決特殊場景下的操作時序 逗號 變數之間 函式的多個引數之間分隔符 分號 僅用作for語句後的分隔符 冒號 s...
php從入門到放棄 Day5
2016 9 16 22 57 14 day5.php html css基礎 css全稱 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。p 標籤文字塊 css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成。...