超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

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

前面在學(xué)習(xí)前端基礎(chǔ)知識的時(shí)候，有一個(gè)小小的練手項(xiàng)目，我的任務(wù)管理。

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

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

組件拆分

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

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

?

• CreateTask
• TaskList
• Task

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

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

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

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

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

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

創(chuàng)建 React 項(xiàng)目

來復(fù)習(xí)一下如何創(chuàng)建 React 項(xiàng)目。

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

切換到目錄 my-task-react 之后使用 npm start 運(yùn)行此項(xiàng)目。

明天來實(shí)現(xiàn)細(xì)節(jié)。

總結(jié)

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