欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。

前面在學習前端基礎知識的時候，有一個小小的練手項目，我的任務管理。

當時是、使用 HTML + CSS + JavaScript 開發(fā)的。

現(xiàn)在我們使用 React 對它進行改造，來看看有哪些不同。

組件拆分

在進行 React 開發(fā)的第一件事，是要清楚我們要開發(fā)哪些組件。

不要忘了 React 是基于組件的。

?

• CreateTask
• TaskList
• Task

其中子組件 Task 在組件 TaskList 里面，展示所有的 Task。

數(shù)據(jù)傳遞

與此同時，要考慮數(shù)據(jù)在組件之間的傳遞。

基于上述的組件劃分和功能，可以比較清楚地得到這里有兩個主要的數(shù)據(jù)傳輸。

• 在最頂層的父組件 App 里，維護任務列表。
• 組件 CreateTask 通過回調(diào)函數(shù)，在每次新增 Task 里把數(shù)據(jù)傳遞回父組件。
• 組件 TaskList 從父組件 App 獲得任務列表。
• 組件 Task 從父組件 TaskList 獲得單個任務數(shù)據(jù)。

基于這樣的設計，每個組件的實現(xiàn)部分就相對明確了。

創(chuàng)建 React 項目

來復習一下如何創(chuàng)建 React 項目。

在本地某個工作目錄中，使用 create-react-app my-task-react 創(chuàng)建一個新的 react 項目。

切換到目錄 my-task-react 之后使用 npm start 運行此項目。

明天來實現(xiàn)細節(jié)。

總結(jié)

最后來總結(jié)一下今天的內(nèi)容要點：