React 入門 做乙個簡單todolist

第一步，看文件，不多說

npm start // or yarn start

npx 是乙個幫你執行檔案的工具

npx 會自動查詢當前依賴包中的可執行檔案，如果找不到，就會去 path 裡找。如果依然找不到，就會幫你安裝！

index.js是入口檔案，修改後index.js檔案如下:

import react from

'react'
;import reactdom from
'react-dom'
;import todolist from
'./todolist'
;reactdom.
render
(>
, document.
getelementbyid
('root'))
;

import react,

from
'react'
class
todolist
extends
component
}export
default todolist

用jsx語法寫頁面結構**，**經過優化

知識點：

todolist.js

import react,

from
'react'
import todoitem from
'./todoitem'
import
'./style.css'
class
todolist
extends
component
this
.handleinputchange =
this
.handleinputchange.
bind
(this
)this
.handlebtnclick =
this
.handlebtnclick.
bind
(this
)this
.handledelete =
this
.handledelete.
bind
(this)}
handleinputchange
(e))
}handlebtnclick()
)}handleitemclick
(index))}
// 父元件通過屬性的形式向子元件傳遞引數
// 子元件通過props接收父元件傳遞過來的引數
handledelete
(index))}
gettodoitem()
key=
content=
index=
/>)}
)}render()
onchange=
/>
"red-btn" onclick=
>add<
/button>
<
/ul>
<
/fragment>)}
}export
default todolist

import react from

'react'
class
todoitem
extends
react.component
// 子元件如果想和父元件通訊，子元件要呼叫父元件傳遞過來的方法
handledelete()
=this
.props
deleteitem
(index)
}render()
=this
.props
return
(>
<
/div>)}
}export
default todoitem

用過vue開發過專案，入門react，覺得react寫起來真的爽

不談技術 做乙個好人，乙個簡單的人

有時，我們往往會誤會一些人，一些事，這是正常的，因為每個人的想法不錯，思考問題的方式不同，產生的結果當然也就不同。有時，我們會犯一些錯誤，一些可笑的錯誤，但重要的是，如果你知道了你是錯誤的，一定要馬上改正，越快越好，因為只有這樣，所產生的負面影響才是最小的。人是很有意思的動物，他們有自己的思維，他們...

不談技術 做乙個好人，乙個簡單的人

有時，我們往往會誤會一些人，一些事，這是正常的，因為每個人的想法不錯，思考問題的方式不同，產生的結果當然也就不同。有時，我們會犯一些錯誤，一些可笑的錯誤，但重要的是，如果你知道了你是錯誤的，一定要馬上改正，越快越好，因為只有這樣，所產生的負面影響才是最小的。人是很有意思的動物，他們有自己的思維，他們...

做乙個programmer，而不做乙個coder

programmer是程式的思考者，而coder只是乙個執行者 勞心者製人，勞力者制於人 如果專案不緊的情況下，應該從需求做起，最好能夠窮盡所有的需求，遇到與別人模組互動的情況，規定好與別人互動的介面。然後才是開始設計，抓住需求當中的名詞，想想是否設計成為類，然後根據測試用例，來設計框架結構，至少要...