狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

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

當時是、使用 HTML + CSS + JavaScript 開發的。

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

組件拆分

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

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

?

• CreateTask
• TaskList
• Task

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

數據傳遞

與此同時，要考慮數據在組件之間的傳遞。

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

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

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

創建 React 項目

來復習一下如何創建 React 項目。

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

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

明天來實現細節。

總結

最后來總結一下今天的內容要點：