# 【React】JSX 開發常見問題

<div id="bkmrk-1.-%E5%AE%9A%E7%BE%A9%E5%85%83%E4%BB%B6%E4%B8%80%E5%AE%9A%E6%98%AF%E6%89%8B%E5%AD%97%E5%A4%A7%E5%AF%AB">1. 定義元件一定是手字大寫</div>```JavaScript
/** wrong*/
function app(){
}
/** correct*/
function App(){
}
```

<div id="bkmrk-2.-%E5%A4%9A%E5%80%8B%E5%85%83%E7%B4%A0%E5%A4%96%E5%B1%A4%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E6%A8%99%E7%B1%A4%E5%8C%85%E8%A6%86%EF%BC%8C%E6%88%96%E4%BD%BF">2. 多個元素外層需要使用標籤包覆，或使用 React.Fragment</div>```JavaScript
// wrong 
function App(){
   // return 後沒有東西預設會補; => 顯示錯誤
	return 
  	<div>
      .....
    </div>
}
// correct
function App(){
	return <div>
      ......
    </div>
}

```

```JavaScript
// 不想包div 用 React.Fragment
function App(){
	return <React.Fragment>
      ......
    </React.Fragment>
}
    
// 同上    
function App(){
	return <>
      ......
    </>
}


```

<div id="bkmrk-3.-%E6%B2%92%E6%9C%89%E6%AD%A3%E7%A2%BA%E7%B5%90%E5%B0%BE%EF%BC%8C%E7%B5%90%E5%B0%BE%E4%B8%8D%E6%AD%A3%E7%A2%BA">3. 沒有正確結尾，結尾不正確</div>```HTML
<!-- wrong --> 
<input class="form-control" list="datalistOptions" 
       id="exampleDataList" placeholder="Type to search...">

<!-- correct --> 
<input className="form-control" list="datalistOptions" 
       id="exampleDataList" placeholder="Type to search..." />

```

<div id="bkmrk-4.-%E5%B1%AC%E6%80%A7%E8%BD%89%E6%8F%9B%E5%90%8D%E7%A8%B1%E9%81%8B%E7%94%A8%E8%A6%81%E6%AD%A3%E7%A2%BA">4. 屬性轉換名稱運用要正確</div>```HTML
<!-- wrong-->
<label htmlFor="exampleDataList" className="form-label" style="color: var(--bs-blue)">
  Datalist example
</label>
<!-- correct-->
<label htmlFor="exampleDataList" className="form-label" style={{color: 'var(--bs-blue)'}}>
  Datalist example
</label>
```

<div id="bkmrk-"></div><div id="bkmrk-5.-return-%E5%BB%BA%E8%AD%B0%E5%8A%A0%E5%85%A5%E6%8B%AC%E8%99%9F">5. return 建議加入括號</div>```JavaScript
// wrong 
function App(){
   // return 後沒有東西預設會補; => 顯示錯誤
	return 
  	<div>
      .....
    </div>
}
// correct
function App(){
	return (<div>
      ......
    </div>)
}

```