課程目標(biāo)
23 分鐘帶你學(xué)會(huì)現(xiàn)代化的組件樣式書寫方法：styled-components。
課程簡(jiǎn)介
通過(guò)將 ES6 中的模板字符串（template literals）特性創(chuàng)造性的運(yùn)用到 CSS 編碼上，styled-components 成了前端社區(qū)現(xiàn)象級(jí)的 CSS-IN-JS 解決方案，能讓我們?cè)诓挥脫?dān)心樣式和組件之間如何關(guān)聯(lián)的情況下用 CSS 書寫組件，讓樣式組件真正成為開(kāi)發(fā)的基本單元。
那么，如何在 React/React Native 項(xiàng)目中使用 styled-components？如何改造現(xiàn)有項(xiàng)目？如何提高代碼復(fù)用度和適應(yīng)變化的能力？共 8 小節(jié)，23 分鐘，本視頻教程將為你打開(kāi) styled-components 的大門，讓你熟知 styled-components 的主要特性，視頻演示用的源碼將會(huì)放在 Github 上供你調(diào)試。
適用人群
- [必須]具備前端基礎(chǔ)知識(shí)，了解 ES6；
- [必須]具備 React 基礎(chǔ)知識(shí)，有開(kāi)發(fā)經(jīng)驗(yàn)更好；
- [可選]期望跟上社區(qū)發(fā)展動(dòng)態(tài)，學(xué)習(xí)最新的開(kāi)發(fā)技術(shù)，如果滿足這點(diǎn)，前兩點(diǎn)可忽略；
- [可選]具備 React Native 基礎(chǔ)知識(shí)，有開(kāi)發(fā)經(jīng)驗(yàn)的更好；
內(nèi)容目錄
3. 用 attrs 封裝組件屬性，提高代碼復(fù)用
年年歲歲花相似，歲歲年年人不同，編寫代碼同樣會(huì)有這樣的問(wèn)題，使用 attrs 機(jī)制不僅讓我們?cè)诮M件中封裝樣式，也能封裝屬性，極大的提高代碼復(fù)用。視頻鏈接：https://pan.baidu.com/s/1pK97HMz
2. 用 props 調(diào)整組件樣式，真正發(fā)揮 JS 的威力
使用 styled-components 編寫組件的時(shí)候，可以在模板字符串中傳入函數(shù)，或者表達(dá)式，這樣就可以根據(jù)傳給組件的 props 來(lái)調(diào)整組件的樣式，讓你真正體會(huì)到 CSS-IN-JS 的樂(lè)趣和威力。視頻鏈接：https://pan.baidu.com/s/1o81c23S
1. 用 styled-components 編寫簡(jiǎn)單的 React 組件
實(shí)例演示使用 styled-components 編寫 React 組件基本步驟和語(yǔ)法，把要基于 classNames 才能實(shí)現(xiàn)的樣式關(guān)聯(lián)去掉，用純 CSS 的方式去書寫 React 組件。視頻鏈接：https://pan.baidu.com/s/1mhGzy56
源碼鏈接
代碼倉(cāng)庫(kù)：wangshijun/course-styled-components-fundamentals
運(yùn)行方法（建議安裝和使用 yarn）
git clone https://github.com/wangshijun/course-styled-components-fundamentals.git
cd course-styled-components-fundamentals
yarn
yarn start
# react-native 代碼的運(yùn)行直接參照 react-native 官網(wǎng)文檔即可
要運(yùn)行每節(jié)課的代碼，只需要將倉(cāng)庫(kù) checkout 下面對(duì)應(yīng)的版本。
運(yùn)行環(huán)境
- Node.js v8.6.0
- React v16
- React Native v0.49.0
- VSCode v1.17.1 + Vim
- Chrome v61
參考資料
視頻下載
關(guān)注《前端周刊》微信公眾號(hào)：fullstackacademy，回復(fù) course-styled-components 即可獲取高清視頻教程下載地址。
最后，可能你有同學(xué)會(huì)問(wèn)，我為什么要做這個(gè)公開(kāi)課？接下來(lái)的計(jì)劃是什么？請(qǐng)閱讀好久不見(jiàn)，我總感覺(jué)欠你點(diǎn)什么
