React學習筆記5 快速建立乙個TODO App

2021-10-03 05:58:11 字數 832 閱讀 1953

三人行,必有我師焉。擇其善者而從之,其不善者而改之。 ——孔子

主要包含三個部分: 輸入部分,未完成的事項,已經完成事項。

function input()  />

addname(name)}>add todo

);}

輸入部分包含乙個輸入框和乙個按鈕。

function todolist()
未完成部分是乙個列表每一行包含了乙個核取方塊和內容。

function completelist()
已經完成部分也是乙個列表,每一行包含乙個輸入框和內容。

const todos = [,,

,];

const [list, setlist] = usestate(todos);

const add = name => ;

const newlist = [...list];

newlist.push(item);

setlist(newlist);

};const change = name =>

newlist.push(item);

}setlist(newlist);

}return (

!u.completed)} change= />

u.completed)} change= />

);}react的設計思想非常棒。先寫好每個元件的內容,然後增加事件的**。

通過function component,可以讓**看起來更加簡潔,bug也會更少。

React 學習筆記(一)

the api via extends react.component is similar to react.createclass with the exception of getinitialstate.instead of providing a separate getinitialst...

React 學習筆記(一) JSX

jsx 本質上來說,jsx只是react.createelement component,prop,children 方法的語法糖 header content 等價於 react.createelement myheader type props header content children j...

React 菜鳥學習筆記(一)

新公司的專案前端架構用的是react.js 之前孤陋寡聞並沒聽說過,想著後期開發和維護多少要會點前端的東西,就簡單研究一下。個人的學習習慣能寫 的就不寫文字,必要的地方加兩行注釋,一行行敲下去,執行過有問題及時發現,存檔當作日後小問題備查的工具。感覺前端尤如玄學,標點啥的處處要留心,乙個後台的多少懂...