我想說的是
JSX 註解的寫法和一般的 HTML 不一樣

寫程式不寫註解，就像是大腸麵線沒加香菜
雖然能，但吃就是少一味；還有些人特別討厭加
寫註解還是有些好處的，畢竟你三個月後可能就忘了當初自己在寫什麼

註解的坑

第一次寫JSX註釋，直覺上來說會這樣寫，當然這樣寫是完全不對的

return  (
  <>
  // 這是個錯誤的註解寫法
    <div>
      <input 
        value={this.state.newServiceName}
        onChange={this.inputChange}
      />
      <button
        onClick={this.addService}
      >
        增加服務
      </button>
    </div>

在 JSX 中註解可以有兩種寫法
當然我最建議的還是利用編輯器內建的快捷鍵，一般是 ctrl+/ 或是 cmd+/

可以理解成，在 JSX 中加入 javascript 程式，所以用大括號來表示

return  (
  <>
  {/* 正確註釋的寫法 */}
  {
    //正確註釋的寫法 
  }
    <div>
      <input 
        value={this.state.newServiceName}
        onChange={this.inputChange}
      />
      <button
        onClick={this.addService}
      >
        增加服務
      </button>
    </div>

CSS 的坑

錯誤加入 class 範例

<input
  class="input_box"
  value={this.state.newServiceName}
  onChange={this.inputChange}
/>

雖然畫面是可以正常顯示結果的，但是如果打開開發者工具會看見 Warning 警告
index.js:1437 Warning: Invalid DOM property 'class'. Did you mean 'className'?

意思就是要把class換成className
為了防止 javascript 中 class 物件衝突，所以要求開發者換掉

html parser

一般來說為了避免使用者亂輸入，都會自動帶有一個 parser
把特殊字元轉碼，這個後端就很清楚是什麼東西
而 JSX 也有一樣的保護，但是我今天就是想插入的時候怎麼辦呢？
可以使用 dangerouslySetInnerHTML 就代表

我知道危險，但還是要插

<li 
  key={index+massageService}
  onClick={()=>this.deleteService(index)}
  dangerouslySetInnerHTML={{__html:massageService}}
>

label 標籤

使用 label 可以讓使用者不一定要點到輸入框，只要點到 label
就可以有點到輸入框一樣的效果

<div>
    <label for="serviceInput">加入服務：</label>
    <input
      id="serviceInput"
      className="input_box" 
      value={this.state.newServiceName}
      onChange={this.inputChange}
    />
    <button onClick={this.addService}> 增加服務 </button>
</div>

同樣的出現 console 警告
因為他會和 javascript 中的 for 迴圈混淆，所以提示使用 htmlfor

這些算是目前為止可能會遇到的坑，並且也算是常見的初學者地雷