Common mistakes to avoid while writing JSX

I have been writing React for a while now and while it is not a must to use JSX, I find that is is easier. JSX looks a lot like HTML so it was really easy for me to pick up the syntax not to mention it’s other advantages like the fact that it allows me to write my javascript code inside what looks like HTML, is type-safe and most of the errors are caught during compilation.

A girl with doing the ok sign
img_source
Warning: Invalid DOM property `class`. Did you mean `className`?
in div (at hello.js:6)
in Hello (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)
Warning: Unknown event handler property `onclick`. It will be ignored.
in div (at hello.js:6)
in Hello (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)
img_source
Parsing error: Unterminated JSX contents6 | <div class=’hello’ onclik = {()=> alert(‘hello’)}>
7 | <h1> Hello!
> 8 | </div>
| ^
9 | )
10 | }
11 | }
img_source
class Hello extends Component {
render(){
var hey = 2
return(
<div>
<h1> Hello! </h1>
{hey == 1 ? ‘Yes’: ‘No’}
</div>
)
}
}
img_source
class Hello extends Component {ifelseItis(){
let me = ‘precious’

if(me === ‘precious’){
return(<div> Yea!</div>)
}else{
return(<hi> Nah!</hi>)
}

}
render(){
let hey = 2
return(
<div>
<h1> Hello! </h1>
{hey === 1 ? ‘Yes’ : ‘No’}
{this.ifelseItis()}
</div>
)
}
}
<button onClick={console.log(‘Hello’)}> Click Me</button>,
<button onClick={()=>console.log(‘hello’)}> Click Me</button>
img_source

I eat. I read. I write. I code. Never in that order