为什么 ReactJS 组件，它是一个 function，必须放在 ReactDom.render() 方法的内部标签中？

Question

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?

Answer 1

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 .