React-使用中報錯處理ERROR

React常見錯誤

①Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag
虛擬DOM中只能有一個根標籤

②Warning: Invalid DOM property `class`. Did you mean `className`?
    in div
在react的jsx語法中，class是一個類的關鍵詞，所以標籤的class屬性要改爲className

③Uncaught SyntaxError: Inline Babel script: Unterminated JSX contents
在jsx中，所有的標籤都要有閉合，比如input br img hr  要寫成`<input /> <br />`

④Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
    in label
    in div
在react的jsx語法中，for是循環的關鍵詞，所以標籤的for屬性要改爲htmlFor

1.Warning: The tag <home> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

在react中，組件名稱要以大寫字母開頭

2.Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

表單元素設置value屬性之後，默認就是隻讀屬性，如果想要讓它變成可以修改的控件需要設置onChange事件，讓這個控件變成受控組件。