Why components in react are single closed tags

clipboard.png

import React, {Component} from "react"
import". / App.scss"
import NavBar from". / components/NavBar/NavBar"

export default class App extends Component {
render () {

return (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Listen Music</h1>
    </header>
    <NavBar />
  </div>
)

}
}

where < NavBar/ > is not written as < NavBar > < NavBar/ >

Mar.16,2021

if the tag doesn't need to wrap anything else, it can be written like this. The common thing is input :

   

Menu