50天用react.js重寫50個(gè)web項(xiàng)目，我學(xué)到了什么？
點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
來(lái)自：SegmentFault，作者：夕水
鏈接：https://segmentfault.com/a/1190000040813435
1.Expanding Cards
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
React的函數(shù)組件中建立數(shù)據(jù)通信，我們通常使用 useState方法。它的使用方式采用數(shù)組解構(gòu)的方式，如下:
const?[state,setState]?=?React.useState(false);//useState方法的參數(shù)可以是任意的JavaScript數(shù)據(jù)類型
解構(gòu)的第一個(gè)參數(shù)是我們定義并且訪問(wèn)的數(shù)據(jù)狀態(tài)，第二個(gè)參數(shù)則是當(dāng)我們需要變動(dòng)數(shù)據(jù)狀態(tài)時(shí)所調(diào)用的方法，其作用類似類組件中的this.setState。
更詳細(xì)的使用方式參考文檔 useState API。
2.與類組件類似的鉤子函數(shù)，或者也可以理解為是函數(shù)組件的生命周期useEffect。它接收一個(gè)副作用函數(shù)effect作為參數(shù)，如下所示:
useEffect(()?=>?{});//里面的箭頭函數(shù)即副作用函數(shù)
以上示例只是做了一個(gè)簡(jiǎn)單的更換文檔標(biāo)題，事實(shí)上在這個(gè)副作用函數(shù)中，我們可以做很多事情，詳情參考文檔 useEffect API。
3.React內(nèi)部有自己的一套事件機(jī)制，我們稱之為合成事件。它與正常的JavaScript綁定事件很類似，但是它將事件命名方式采用了駝峰式寫法，并且它也對(duì)事件對(duì)象做了一層包裝，其名為SyntheticEvent。注意，這是一種跨瀏覽器端的包裝器，我們?nèi)绻胍褂迷氖录?duì)象，可以使用nativeEvent屬性，這在后面的示例中可能會(huì)涉及到。比如我們以上的事件綁定:
onClick={?onChangeHandler.bind(this,index)?}
注意這里，我們通常需要調(diào)用bind方法來(lái)將this綁定到該組件實(shí)例上，為什么要使用bind方法來(lái)綁定this呢，這是因?yàn)榻壎ㄊ录幕卣{(diào)函數(shù)(如這里的:onChangeHandler),它是作為一個(gè)中間變量的，在調(diào)用該回調(diào)函數(shù)的時(shí)候this指向會(huì)丟失，所以需要顯示的綁定this,這也是受JavaScript自身特性所限制的。詳情可參考React綁定this的原因中的解釋。與之類似的是在類組件中綁定合成事件，我們也一樣需要顯示的綁定this指向。
4.map方法的原理。map方法迭代一個(gè)數(shù)組，然后根據(jù)返回值來(lái)對(duì)數(shù)組項(xiàng)做處理，并返回處理后的數(shù)組,請(qǐng)注意該方法不會(huì)改變?cè)瓟?shù)組。比如:
[1,2,3].map(i?=>?i?<=?1);//返回[1]
jsx中渲染列表也正是利用了map方法的這一特性，并且我們需要注意的是渲染列表的時(shí)候必須要指定一個(gè)key,這是為了方便DIFF算法更好的比對(duì)虛擬DOM。
5.React中給標(biāo)簽添加類名，我們是寫成className的，這是因?yàn)?code style="margin: 3px;padding: 3px;font-size: 14px;border-radius: 4px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(155, 110, 35);background-color: rgb(255, 245, 227);">class被JavaScript當(dāng)做關(guān)鍵字。而如果我們需要?jiǎng)討B(tài)綁定類名，可以看到，我們使用了模板字符串，在這里更像是寫JavaScript，比如我們可以利用三元表達(dá)式做判斷。
6.React中給標(biāo)簽綁定style樣式，我們通常可以綁定一個(gè)對(duì)象，在React中，我們綁定動(dòng)態(tài)數(shù)據(jù)就是寫一對(duì){}花括號(hào)，然后style里面的樣式我們通常聲明成對(duì)象來(lái)表示，比如:
{
????background:"#fff"
}
這代表它是一個(gè)樣式對(duì)象，然后React會(huì)在內(nèi)部去將樣式對(duì)象轉(zhuǎn)換成樣式字符串，然后添加到DOM的style對(duì)象中。
2.Progress Steps
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
與第一個(gè)示例所用到的知識(shí)點(diǎn)很類似，相關(guān)的不必做說(shuō)明。接下來(lái)我們來(lái)看不一樣的。
父組件向子組件傳遞數(shù)據(jù)，我們通常都是使用 props。可以看到以上的示例，我們暴露了4個(gè)props，即:
width
stepItems
currentActive?
onClickItem
width就是設(shè)置步驟條的容器寬度，這個(gè)沒什么可說(shuō)的,stepItems就是步驟條的子組件，是一個(gè)數(shù)組，也可以在數(shù)組項(xiàng)中寫jsx。而currentActive則是傳入的當(dāng)前是哪一步，是一個(gè)索引值，通常應(yīng)該是數(shù)值。至于onClickItem則是子組件暴露給父組件的方法。
類組件的生命周期。在這個(gè)類組件當(dāng)中，我們使用到了 constructor,componentDidMount,render的生命周期鉤子函數(shù)。我們可以根據(jù)語(yǔ)義來(lái)推測(cè)，當(dāng)一個(gè)類組件被初始化時(shí)所經(jīng)歷的生命周期鉤子函數(shù)執(zhí)行順序一定是constructor => render => componentDidMount。從語(yǔ)義上來(lái)將constructor是一個(gè)構(gòu)造函數(shù)，用于初始化狀態(tài)，然后初始化完成之后，我們就會(huì)渲染組件，然后才是準(zhǔn)備掛載組件。
額外的，我們擴(kuò)展一下，根據(jù)文檔說(shuō)明，我們可以知道詳細(xì)的生命周期。React組件生命周期包含3個(gè)階段:
掛載 => 更新 => 卸載
在組件掛載之前執(zhí)行的有:
constructor?=>?static?getDerivedStateFromProps?=>?render?=>?componentWillMount(即將過(guò)時(shí))?=>?componentDidMount
在組件state變更之后,也就是更新之后，執(zhí)行的有:
static?getDerivedStateFromProps?=>?shouldComponentUpdate?=>?render?=>?getSnapshotBeforeUpdate?=>?componentWillReceiveProps(即將過(guò)時(shí))?=>?componentWillUpdate(即將過(guò)時(shí))?=>?componentDidUpdate
在組件卸載之后，執(zhí)行的有:
componentWillUnmount
另還有錯(cuò)誤處理的生命周期，也就是在渲染過(guò)程，生命周期，或子組件的構(gòu)造函數(shù)發(fā)生錯(cuò)誤時(shí)，會(huì)執(zhí)行的鉤子函數(shù):
static?getDerivedFromStateError?=>?componentDidCatch
這里面有些生命周期我們并沒有用到，有些則是幾乎涵蓋了我們后續(xù)的所有示例，所以我們一定要牢記組件的生命周期的順序。
但是就這個(gè)示例而言，我們學(xué)會(huì)的應(yīng)該是如何封裝一個(gè)組件。
3.Rotating Navigation Animation
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
一些相同同前面示例相同的知識(shí)點(diǎn)自不必說(shuō)，我們來(lái)看不一樣的知識(shí)點(diǎn)。
1.模塊組合導(dǎo)出
//components目錄下的index.js文件
export?{?default?as?Content?}?from?'./Content';
export?{?default?as?LeftMenu?}?from?'./LeftMenu';
export?{?default?as?NavList?}?from?"./NavList";
可以看到，我們可以將組件如上面那樣導(dǎo)出，然后我們就可以單獨(dú)引入一個(gè)js文件，再引入相關(guān)的組件即可使用。如下:
import?{?Content,?NavList,?LeftMenu?}?from?'./components/index';
2.react組件如何渲染html字符串
react提供了一個(gè)dangerouslySetInnerHTML屬性，這個(gè)屬性的屬性值是一個(gè)以__html作為屬性，值是html字符串的對(duì)象，然后，我們就可以將html字符串渲染成真實(shí)的DOM元素。如下所示:
測(cè)試代碼"?}}></p>
//測(cè)試代碼span></p>
4.hidden-search-widget
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
本示例同樣的與前面的示例有一樣的知識(shí)點(diǎn)，相關(guān)的不會(huì)做說(shuō)明，只會(huì)做不同的知識(shí)點(diǎn)介紹，后續(xù)的同理。
1.判斷數(shù)據(jù)的類型。利用對(duì)象原型鏈上的toString方法，我們可以得到一個(gè)字符串值，這個(gè)字符串值的格式類似[object Object]這樣，也就是說(shuō)我們可以通過(guò)這個(gè)字符串值來(lái)判斷一個(gè)數(shù)據(jù)的類型。例如:
const?getType?=?v?=>?Object.prototype.toString.call(v).slice(8,-1).toLowerCase();
const?isArray?=?v?=>?getType(v)?===?"array";
isArray([1,2,3]);//true
isArray("");//false
這里我們應(yīng)該知道Object.prototype.toString.call(v)返回的就是類似[object Object]這樣的值。所以我們通過(guò)截取開始索引為8,結(jié)束索引為該字符串長(zhǎng)度減1，也就是這里的-1,我們就可以獲取到第二個(gè)值Object,然后再調(diào)用toLowerCase()方法來(lái)將全部字母轉(zhuǎn)換成小寫，然后，我們就可以知道數(shù)據(jù)的類型了。比如這里的判斷是否是數(shù)組，那么只需要判斷該值是否等于"array"即可。
2.React.createRef API
有時(shí)候，我們恰恰需要操作一些原生DOM元素的API，例如這個(gè)示例的輸入框的關(guān)注焦點(diǎn)事件。這時(shí)候這個(gè)API就有了用武之地，我們相當(dāng)于使用這個(gè)API創(chuàng)建一個(gè)與DOM元素通信的橋梁，通過(guò)這個(gè)訪問(wèn)這個(gè)API的實(shí)例的current屬性，我們就可以訪問(wèn)到相應(yīng)的DOM元素。
更詳細(xì)的可以參考文檔createRef API。
3.如何封裝一個(gè)input組件。
這個(gè)示例也教會(huì)了我們?nèi)绾畏庋b一個(gè)input組件。
5.Blurry Loading
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
在 componentDidMount生命周期中創(chuàng)建定時(shí)器以及在componentWillUnmount中清除定時(shí)器。類組件中的 this.setState更新狀態(tài)。該方法接收2個(gè)參數(shù),第一個(gè)參數(shù)則是我們的react狀態(tài)，它可以是一個(gè)函數(shù)，也可以是一個(gè)對(duì)象。第二個(gè)參數(shù)則是一個(gè)回調(diào)函數(shù)。談到這里，可能就會(huì)提到一個(gè)問(wèn)題，那就是setState到底是異步還是同步? 答案如下:
答:react中的setState在合成事件和鉤子函數(shù)中是"異步"的，而在原生事件和setTimeout中則是同步的。
之所以是"異步"，并不代表在react內(nèi)部中是"異步"代碼實(shí)現(xiàn)的，事實(shí)上，它仍然是同步執(zhí)行的一個(gè)過(guò)程。
只是合成事件和鉤子函數(shù)的調(diào)用順序在更新之前，導(dǎo)致在合成函數(shù)和鉤子函數(shù)中沒法立即拿到更新后的值，所以就形成了所謂的"異步"。
事實(shí)上，我們可以通過(guò)制定第二個(gè)參數(shù)即callback(回調(diào)函數(shù))來(lái)獲取到更新后的值。
react.js對(duì)setState的源碼實(shí)現(xiàn)也不是很復(fù)雜，它將傳入的參數(shù)作為值添加到updater也就是更新器的一個(gè)定義好的隊(duì)列（即:enqueueSetState）中。
react中的批量更新優(yōu)化也是建立在合成事件和鉤子函數(shù)(也就是"異步")之上的，在原生事件和setTimeout中則不會(huì)進(jìn)行批量更新。
比如在"異步"中對(duì)同一個(gè)值進(jìn)行多次setState,依據(jù)批量更新則會(huì)對(duì)其進(jìn)行策略覆蓋，而如果是對(duì)不同的多個(gè)值setState,則會(huì)利用批量更新策略對(duì)其進(jìn)行合并然后批量更新。
更詳細(xì)的可以參考文檔 setState 。
除此之外，這里也有一個(gè)非常重要的工具函數(shù)(這在js的實(shí)現(xiàn)中也提及過(guò))，如下所示:
const?scale?=?(n,inMin,inMax,outerMin,outerMax)?=>?(n?-?inMin)?*?(outerMax?-?outerMin)?/?(inMax?-?inMin)?+?outerMin;
這個(gè)工具函數(shù)的作用就是將一個(gè)范圍數(shù)字映射到另一個(gè)數(shù)字范圍。比方說(shuō)，將1 ~ 100的數(shù)字范圍映射到0 ~ 1之間。
詳情。
6.Scroll Animation
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
1.動(dòng)態(tài)組件
我們通過(guò)props傳遞一個(gè)值用來(lái)確定組件名。這里以Title組件為例，如下所示:
import?React?from?"react";
const?TitleComponent?=?(props)?=>?{
????let?TagName?=?`h${?props.level?}`;
????return?(
????????<React.Fragment>
????????????<TagName>{?props.children?}TagName>
????????React.Fragment>
????)
}
export?default?TitleComponent;
雖然核心代碼十分簡(jiǎn)單，這里需要注意，React組件需要首字母大寫，這算是一個(gè)約定的規(guī)則，其次我們通過(guò)props傳遞一個(gè)level用來(lái)確定我們使用的是h1~h6哪個(gè)來(lái)做標(biāo)簽，事實(shí)上這里我們應(yīng)該對(duì)level做一個(gè)限制，只允許值為1~6。
2.Fragment元素
這個(gè)元素類似于一個(gè)占位符節(jié)點(diǎn)，我們知道，當(dāng)兩個(gè)元素并列在一個(gè)React組件中，是不被允許的，React組件需要提供一個(gè)根節(jié)點(diǎn)，但有時(shí)候，我們不需要一個(gè)實(shí)際的元素作為根節(jié)點(diǎn)包裹它們，所以我們就可以使用Fragment元素來(lái)包裹它們。該元素還有一個(gè)簡(jiǎn)寫<>,事實(shí)上在Vue2.x中也有這個(gè)限制，這是受虛擬DOM DIFF算法所限制的。
更詳細(xì)的可以見文檔Fragment。
3.函數(shù)防抖
export?const?throttle?=?(fn,?time?=?1000)?=>?{
????let?done?=?false;
????return?(...args)?=>?{
????????if?(!done)?{
????????????fn.call(this,?...args);
????????????done?=?true;
????????}
????????setTimeout(()?=>?{
????????????done?=?false;
????????},?time)
????}
}
函數(shù)防抖與節(jié)流可參考 這篇文章 。
4.監(jiān)聽滾動(dòng)事件，事實(shí)上這里的實(shí)現(xiàn)原理同JavaScript實(shí)現(xiàn)版本一致，只不過(guò)稍微轉(zhuǎn)換一下思維即可。
7. Split Landing Page
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
8.Form Wave
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
setState更新對(duì)象，如果state是一個(gè)對(duì)象，我們有2種方式來(lái)更新。
1.1 利用Object.assign方法來(lái)更新。
1.2 直接覆蓋整個(gè)對(duì)象。
以上2種方式偽代碼如下:
//??第1種方式
const?loginInfo?=?Object.assign({},this.state.loginInfo,{
???[key]:updateValue
})
this.setState({
???loginInfo
});
//?第2種方式
let?{?loginInfo?}?=?this.state;
loginInfo[key]?=?updateValue;
this.setState({?loginInfo?});
9.Sound Board
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
10. Dad Jokes
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
Suspense組件的使用。該組件可以指定一個(gè)加載指示器組件，用來(lái)實(shí)現(xiàn)組件的懶加載。更詳細(xì)的文檔見 Suspense 。 接口請(qǐng)求通常都是在componentDidMount鉤子函數(shù)中完成的。由于不能直接在該鉤子函數(shù)中更改狀態(tài)(react.js會(huì)給出一個(gè)警告)。所以我們需要讓接口請(qǐng)求變成異步。
11. Event Keycodes
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
12. Faq Collapse
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
13. Random Choice Picker
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
14. Animated Navigation
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
15. Incrementing Counter
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
react.js如何更新數(shù)組的某一項(xiàng)？在這里我是更新整個(gè)數(shù)組的，或許這不是一種好的方式。也希望有大佬能提供思路。我的代碼如下:
startCounter()?{
????const?counterList?=?[...this.state.counterList];
????//?https://stackoverflow.com/questions/29537299/react-how-to-update-state-item1-in-state-using-setstate
????//?https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js
????counterList.forEach(counter?=>?{
??????const?updateCounter?=?()?=>?{
??????????const?value?=?counter.value;
??????????const?increment?=?value?/?100;
??????????if?(counter.initValue?????????????counter.initValue?=?Math.ceil(counter.initValue?+?increment);
????????????//?use?setTimeout?or?setInterval??
????????????counter.timer?=?setTimeout(updateCounter,?60);
??????????}?else?{
????????????counter.initValue?=?value;
????????????clearTimeout(counter.timer);
??????????}
??????????//?update?the?array,maybe?it's?not?a?best?way,is?there?any?other?way?
??????????this.setState({?counterList?});
??????}
??????updateCounter();
????})
}
16. Drink Water
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這里踩了一個(gè)坑，如果使用new Array().fill()來(lái)初始化狀態(tài)，會(huì)導(dǎo)致意想不到的渲染效果。所以這里直接初始化了所有的數(shù)組項(xiàng)。
詳見源碼 。
17. movie-app
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
PS:這個(gè)示例效果由于接口訪問(wèn)受限，需要你懂的訪問(wèn)。
18. background-slider
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
19. theme-clock
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
中英文切換是通過(guò)定義一個(gè)對(duì)象來(lái)完成的。其它的沒什么好說(shuō)的，都是前面提及過(guò)的知識(shí)點(diǎn)。
PS:本示例也用到了與示例5一樣的工具函數(shù)
scale函數(shù)
20. button-ripple-effect
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
可以通過(guò)調(diào)用函數(shù)來(lái)渲染一個(gè)組件。
21. drawing-app
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
在react.js中使用 ew-color-picker。這里踩了一個(gè)坑，也就是說(shuō)必須要設(shè)置線條的樣式。
this.ctx.lineCap?=?"round";
否則線條的樣式不對(duì)勁，雖然我也沒有搞清楚這里面的原因。畢竟js版本的實(shí)現(xiàn)也沒有需要顯示的設(shè)置這個(gè)線條的樣式。
22. drag-n-drop
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這里也踩了一個(gè)坑， 詳見源碼注釋 。
23. content-placeholder
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
一些判斷react組件的工具函數(shù)。如下:
import?React?from?"react";
export?function?isString(value){
????return?typeof?value?===?"string";
}
export?function?isClassComponent(component)?{
????return?typeof?component?===?'function'?&&?!!component.prototype.isReactComponent;
}
export?function?isFunctionComponent(component)?{
????return?typeof?component?===?'function'?&&?String(component).indexOf('return?React.createElement')?>?-1;
}
export?function?isReactComponent(component)?{
????return?isClassComponent(component)?||?isFunctionComponent(component);
}
export?function?isElement(element)?{
????return?React.isValidElement(element);
}
export?function?isDOMTypeElement(element)?{
????return?isElement(element)?&&?typeof?element.type?===?'string';
}
export?function?isCompositeTypeElement(element)?{
????return?isElement(element)?&&?typeof?element.type?===?'function';
}
如何封裝一個(gè)卡片組件。
24. kinetic-loader
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
25. sticky-navbar
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)除了一個(gè)工具函數(shù)，其它的知識(shí)點(diǎn)前面的示例都提及過(guò)，所以這里不必贅述。
export?function?marked(template){
????return?template.replace(/.+?[\s]/g,v?=>?`${v}
`);
}
這個(gè)工具函數(shù)的作用就是匹配以空格結(jié)束的任意字符，然后替換成p標(biāo)簽包裹這些內(nèi)容。
PS:這里也做了移動(dòng)端的布局。
26. double-slider
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
27. toast-notification
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
可以利用 ReactDOM.render來(lái)封裝一個(gè)函數(shù)調(diào)用的toast組件。ReactDOM.unmountComponentAtNode API的用法這個(gè)方法會(huì)將從DOM中卸載組件，包括事件處理器和state。詳見 文檔 。getDerivedStateFromProps 靜態(tài)函數(shù)。詳見 文檔。
28. github-profiles
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
29. double-click-heart
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
從合成事件對(duì)象中讀取原生的事件對(duì)象。即 nativeEvent屬性。
30. auto-text-effect
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
31. password generator
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
32. good-cheap-fast
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
如何封裝一個(gè)switch組件，即開關(guān)小組件。
33. notes-app
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
34. animated-countdown
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
35. image-carousel
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
36. hover board
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
react.js合成事件中的setState是同步的，所以這里使用原生的監(jiān)聽事件來(lái)實(shí)現(xiàn)。詳見源碼 。
37. pokedex
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
38. mobile-tab-navigation
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
39. password-strength-background
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
照著 文檔 一步步將 tailwindcss添加到create-react-app腳手架中。
40. 3D-background-boxes
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
41. Verify Your Account
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
42. live-user-filter
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
43. feedback-ui-design
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
44. custom-range-slider
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
45. netflix-mobile-navigation
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
為如何實(shí)現(xiàn)一個(gè)遞歸組件提供了思路。
46. quiz-app
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
47. testimonial-box-switcher
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
48. random-image-feed
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
實(shí)現(xiàn)一個(gè)簡(jiǎn)易版本的預(yù)覽圖片。
49. todo-list
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
50. insect-catch-game
效果如圖所示:
源碼 在線示例
學(xué)到了什么?
這個(gè)示例涉及到的知識(shí)點(diǎn)，前面的示例都提及過(guò)，所以這里不必贅述。
特別說(shuō)明:這個(gè)示例算是一個(gè)比較綜合的示例了。