user-defined component in React

Question

Why does 'element' define what looks like an HTML tag that call's a function. Why would i not set element to something like: Welcome('Sara')

function Welcome(props) {  
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Its because you're writing React using jsx; which is the suggested way. If you want to learn what is going on in the background, here's a link: https://reactjs.org/docs/react-without-jsx.html. — Quentin Gibson, Jul 22 '20 at 18:41

score 0 · Answer 1 · answered Jul 22 '20 at 18:46

The format resembling HTML is called JSX:

it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like

Technically (in this simple case) you could replace the JSX with Welcome({ name: 'Sara' }), but that is not the standard way to render components in React - and it has some technical implications because it is not the same as using JSX (which calls React.createElement).

user-defined component in React

1 Answers1