day3: 程序码的命名 (component, className)

在 react 的命名原则中，除了 component 和 type 是 Pascal Case，其他大部分会多以 Camel Case 为主，当然有些例外譬如 customer Hook, 或是常数的命名就会有另外的原则，但大致上遵照
这样的原则。

• 使用 Camel Case 单词连接并不包含 _ - . 等符号

BAD

 const currency-token = '$'
 const country_code = 'US'

GOOD

 const currencyToken = '$'
 const countryCode = 'US'

注：有些 api 格式常会提供 _ 下底线的连接词(user_profile)，造成前端必须以下底线的变数去解构资料，这边强调的以前端的变数命名为主，详细资料的介接，还是需要考虑到後端的变数设计，或许可以统一写个 function
处理後端 - 的变数命名转成 Camel Case

• 有意义的命名

第一天我们提到以下的范例，这边会把范例中一项一项拆分讲解

BAD

const aaa = 234234234

// 在维续时根本不知道 aaa 是什麽

• [x] 变数具备语意化和名词为主
  GOOD

const orderId = 234234234

// 这样可以具体知道他是订单号码

BAD

const doJob = ()=>{
.........
}

// 当 do 的 function 一多，根本不知道 doJob 指的是什麽功能

• [x] function (方法)具备语意化和动词 + 名词为主

GOOD

const createOrder = ()=>{
.........
}

// 可以具体知道他是建立(动词)+订单(名词)

const fetchUserData = ()=>{
.........
}

BAD

<stickyButton></stickyButton>

// component 没有使用 Pascal Case

• [x] React component 和 React tag 需以 Pascal Case 为主

GOOD

//JSX tag

<StickyButton></StickyButton>