iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

寫出好維護又簡潔的 react 程式碼 feat: Function Programming 系列

主要是簡介好維護的 react 寫法和 FP 的使用

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊Web 實驗室
DAY 1

day1:參加的動機及大綱

這次的參賽是為了寫讓自己更多學習 react 更多更好的寫法,會從 Javascript 和 React 好的寫法開始, 加上許多好用的 CSS 套件使用,並在...

2021-09-16 ‧ 由 joseph wu 分享
DAY 2

day2: 程式碼風格的重要性

對於程式碼的風格,不管是初學者或是有經驗的開發者,當一個專案執行時, 在規劃程式碼的寫法,若沒有考慮到程式碼的可讀性和可維護性,在若干天後或是當別人接手程式時,...

2021-09-17 ‧ 由 joseph wu 分享
DAY 3

day3: 程式碼的命名 (component, className)

在 react 的命名原則中,除了 component 和 type 是 Pascal Case,其他大部分會多以 Camel Case 為主,當然有些例外譬如...

2021-09-18 ‧ 由 joseph wu 分享
DAY 4

day4: 程式碼的命名 (function, event, customer hook)

在 function 的命名上時常犯的錯會以過度簡單的命名,造成無法理解該 function 做的事 function - 通常以動詞 + 名詞組成 BAD...

2021-09-19 ‧ 由 joseph wu 分享
DAY 5

day5: CSS style 規劃 CSS module (global CSS, CSS module)

在 react 當中有提供了不同的 css 方法,除了常見的 css in css 外, 另外現在前端主流使用的 style system, css in js...

2021-09-20 ‧ 由 joseph wu 分享
DAY 6

day6: CSS style 規劃 - CSS in js

在經歷了傳統 CSS 後,發現了一些 CSS 的缺點 全域污染 - CSS class name 會全域會覆蓋,譬如有個叫 card 的 classnam...

2021-09-21 ‧ 由 joseph wu 分享
DAY 7

day7: CSS style 規劃 - CSS in JS(emotion 使用 - 1)

在上一篇我們介紹的 CSS in JS, 那這次我們來使用 CSS in JS 的框架 emotion, 目前 css in js 主流的框架大概有 css m...

2021-09-22 ‧ 由 joseph wu 分享
DAY 8

day8: CSS style 規劃 - CSS in JS(emotion 使用 - 2)

使用 react 作法 npm i @emotion/react import { css, jsx } from '@emotion/react' con...

2021-09-23 ‧ 由 joseph wu 分享
DAY 9

day9: CSS style 規劃 - CSS in JS(emotion 使用 - 3)

使用 styled 方式 這個方式其實是 emotion 參考 styled-component, 寫法是 `styled.` 任一 html ele...

2021-09-24 ‧ 由 joseph wu 分享
DAY 10

day10: CSS style 規劃 - utility CSS(Tailwind)-1

在前面章節我們介紹過 純 CSS, CSS in JS 那接下來我們要來介紹 utility CSS。什麼是 utility CSS 就如其意思,他是以功能為優...

2021-09-25 ‧ 由 joseph wu 分享