再來會介紹一些我以前 React 沒寫好的地方跟改進的技巧，雖然功能不會有太大的差異但在閱讀上有點幫助的部分。

1. render時使用三元運算子 return null 或 react fragment

    <div>
		<button onClick={handleClick}>toggle</button>
		{showConditionalText ? <p>顯示文字</p> : <></>}
    </div>

我也不知道為甚麼當初會這樣寫，但可以選擇更乾淨的寫法 (用 &&)

<div>
		<button onClick={handleClick}>toggle</button>
		{showConditionalText && <p>顯示文字</p> }
</div>

這邊要補充 && 在某些狀況要注意，雖然好用但還是要注意一下 js 的邏輯，遇到得時候可能還是需要用到三元運算子 (ex: array.length)
0 && true // 0
true && 0 // 0
false && true // false
true && '' // ''

2. props 使用 boolean 的時候 true 可以不用寫

<Card showTitle={true}/>
<Card showTitle={false}/>

// false 再加上即可

<Card showTitle />
<Card showTitle={false}/>

3. props 使用 string 的時候不用大括號

<Card title={"title"}/>

<Card title="title" />

4. handle event 在監聽事件時可以把event省略

const handleClick = e =>{
	setInputValue(e.target.value)
}

<input id="name" value={inputValue} onChange={e => handleChange(e)} />

// 將 event 省略

<input id="name" value={inputValue} onChange={handleChange} />

5. 把沒有使用到的 import 、變數、 註解或是 function 刪除 :

字面上的意思，儘量保持整個專案的整潔。

6. 盡可能移除 inline style，如果有遇到需要判斷式的 style 改用 function 處理

<span style={ active ? {color : 'red'} : {color : 'blue'} }> text <span/>

const colorStyle = (active) => active ? 'red' : 'blue' ;

<span style={{color : colorStyle(active)}}> text <span/>

這些是我回顧一開始寫的 code ，發現可以更好的地方，歡迎大家分享更多技巧