React從入門到放棄Day1

1.react的入口檔案為index.js

2.在index.js中，首先需要引入react等元件

import react from
'react'
import reactdom from
'react-dom'
//操作dom
//html
import xiaojiejie from
'./xiaojiejie'
//這裡是你需要自定義的元件
reactdom.
render
(< xiaojiejie /
>
, document.
getelementbyid
('root'
))

在vscode中安裝了外掛程式可使用快鍵鍵新增 imr imrd 依次import react和reactdom

root是在index.html中的id

注意，在react中所有的自定義元件開頭第乙個字母大寫

3.在自定義組建中需要引入react以及component

import react,
from
'react'

快捷鍵為imrc

4.在自定義組建中寫html以及js**。（jsx）

import react,
from
'react'
export
default
class
aaaextends
component
}

可以使用rcc快捷鍵快速建立這個模板

有時候需要使用flex布局的時候，不需要外層巢狀一層div的話，則需要額外引入fragment

import react,
from
"react"
;

解構如下

import react,
from
"react"
;export
default
class
aaaextends
component
}

類似於vue中的data則寫在render方法前

constructor
(props)
;}

自定義的方法寫在render後

在jsx中，為了方便自定義函式中獲取this，則需要使用箭頭函式或者bind繫結this


value=
onchange=
// 使用es6的箭頭函式或者es5的bind繫結this
// onchange=
>
<
/input>
>增加服務<
/button>
<
/div>
key=
>
<
/li>);
})}<
/ul>
<
/fragment>

在react中，oncilck等事件均使用駝峰命名，不是全部小寫

在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 樣式由選擇符和宣告組成，而宣告又由屬性和值組成。...

React從入門到放棄Day1

從零react從入門到放棄

C 從入門到放棄（1）

php從入門到放棄 Day5

相關推薦