JSX的註釋。

首先，JSX 程式碼，是在render 中 return 裡面的，然後，它的註釋寫法是下面這樣的。

render() {
    return (
      <React.Fragment>
        <div>
          {/*註釋*/}
          <label htmlFor="insertArea">輸入內容</label>
          <input
            id="insertArea"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }
 

元素的樣式 class 屬性，不要用，使用className 屬性。如下。

        return (
          <TodoItem className='red-btn' deleteItem={this.handleDelete} key={index} content={item} index={index} />
        )

不用轉義標籤，直接按html 顯示出來，如下。有實際需要時，可以這樣寫，但不推薦其他情況下這樣寫，因為可能有安全風險。

<li
  key = {index}
  dangerouslySetInnerHTML={{__html: item}}
>
</li>
 

label 標籤。在html 中，label 主要起擴大輸入內容的作用。

在React 中，我們想點選label 對應的input 獲得焦點，可以如下。(將html 的for 屬性，改為htmlFor屬性)

  render() {
    return (
      <React.Fragment>
        <div>
          <label htmlFor="insertArea">輸入內容</label>
          <input
            id="insertArea"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
          />
          <button style={{background: 'red',color: 'white'}} onClick={this.handleBtnClick}>add</button>
        </div>
        <ul>
          {this.getTodoItems()}
        </ul>
      </React.Fragment>
    );
  }