Why does ReactJS component, which is a function, have to be put in inside tags at the ReactDom.rende-CodePudding

I am very very new to ReactJS and JavaScript in general, so I am having difficulty trying to make sense of the syntax.

I have the following very basic component:

import React from 'react'
import ReactDom from 'react-dom'

function Greetings()
{
  return <h1>Hello World</h1>
}

which I am trying to render using the below line:

ReactDom.render(<Greetings/>, document.getElementById('root'))

Now I am having difficulty trying to make sense of the syntax:

ReactDom.render(<Greetings/>, document.getElementById('root')), where Greetings() is a function.

So what does enclosing it in tags mean ?

CodePudding user response：

The syntax is called JSX. By using JSX, you are effectively calling React.createElement(). So, if you don't want to use JSX (<Component>), you can replace it with React.createElement(Component). In fact, this is what Babel does when you use React: replaces all JSX tags with calls to React.createElement.