建立一個 React Component 並發佈到 NPM 上

簡單記錄如何建立一個 React Component 並發佈到 NPM 上。

步驟

• Step 1：可下載樣版和閱讀說明。這個樣版已將環境設定好，說明也寫得很清楚，一步步跟著走完即可以將開發環境和 Demo 用的 Github Page 建立好。
• Step 2：開發元件，原始碼主要在 src/lib 撰寫，像我的 Newsticker 元件的原始碼就是放在這裡。每次修改都會自動重新刷新頁面。開發完後，記得修改 README 文件、Demo 用的 Github Page 頁面和 package.json 等。
• 發佈至 NPM：可參考這裡，主要是 npm publish，若要更新記得先修改版號（不改不能重新發佈），再做 npm publish。

成品 - Newsticker

• Repo：含安裝與使用說明。
• Demo
• npm - react-newsticker

後記

這個 Component 順便練習了 Styled Components。

相較於 OOCSS、SMACSS、BEM、CSS Modules，Styled Components 將樣式也併入元件了，React.js 可真是元件化到極致了呢。

歷史回顧…

• OOCSS
• SMACSS：Module Rules、State Rules、Theme Rules
• BEM
• CSS Modules
• 淺談 CSS 方法論與 Atomic CSS

更多關於 Styled Components 的資訊…

• 介紹撰寫 React CSS 的神套件 Styled Components
• CSS-in-JS，向 Web 組件化再邁一大步
• CSS In JS: It’s a Trap!
• The magic behind 💅 styled-components

將這些東西整理成一篇文章了，請見-CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS。

打完收工 d(`･∀･)b