JSX and React Elements and DOM Elements

(JavaScript XML | React.createElement | DOM)

React Element (JS Object)	JSX
React.createElement produces a JS object with all the necessary configurations to render it to the real DOM Click for Demo in code sandbox	JSX is an Extension Syntax that allows writing HTML and Javascript together easily in React. Each JSX element is a syntactic sugar for calling React.createElement()
return React.createElement( 'h1', null, 'Welcome dude!' )	return <h1>Welcome dude!</h1>
Syntax for React.createElement React.createElement( component, props, ...children ) React.createElement( elementName, attribute, ...children ) First parameter: The HTML element we want to create. Second parameter: HTML attributes or arbitrary inputs that are passed as parameters. Third parameter: Child Element	Syntax for JSX <Component props /> <element attribute> ...children </element>
From React Element to DOM tag HTML Tag If you provide a string, it will turn it into a DOM tag with that string as the value. Eg: We utilized the tags h1 and div, which are output to the DOM. React Component Function React.createElement creates a single instance of a component.
Elements return React.createElement( "div", null, React.createElement( "h1", { className: "green" }, `Welcome dude!`, ), ); React.createElement inside React.createElement	Elements return ( <div> <h1 className="green"> Welcome dude! </h1> </div> )
Component React.createElement works with both HTML elements and custom components Below code Creates an instance of the Component	Component JSX also works with both HTML elements and custom components Below code Creates an instance of the Component
App.js	App.js
MyComponent.js	MyComponent.js

className attribute

Because class is a reserved keyword in JS, className is essential

What about props?

Also, we can pass our props to our components.

React.createElement(
  Tag, 
  { name: 'Jhon', age: 31 }, 
  null
)

<Tag name="Jhon" age={31} />

Same vanilla JS has a createElement method, too: //document.createElement('div')

----------- Note: If you are a beginner - upto this is enough for now -----------

So, we've got these React elements that we made using React.createElement. But how does it rendered in the DOM?

• CreateRoot

  createRoot lets you create a root to display React components inside a browser DOM node.

  const root = ReactDOM.createRoot(document.getElementById('root'));
  

  Returns

  createRoot returns an object with two methods: render and unmount.

• createRoot.render()

  After you’ve created a root, you need to call .render() to display a React component inside of it:

  React Element (JS Object)	JSX
  root.render( React.createElement(App, null, null) )	root.render(<App />);

  render renders a piece of JSX (“React node”) into a browser DOM node.

  To render out, we'll need an instance of App. The app is a component Object, and we only need to render one instance of it. JSX -> React.createElement accomplishes exactly that: it creates an Object instance.

  Below example - Displays your React Component inside the HTML element containing the appropriate id

  

  takes our rendered App component (present in './index.js') and places it in the DOM (in our example, the root element - present in './public/index.html').

• CreateRoot.unmount()

  Call root.unmount to destroy a rendered tree inside a React root.

  root.unmount();
  

  Calling root.unmount will unmount all the components in the root and “detach” React from the root DOM node, including removing any event handlers or state in the tree.

For more information Refer createRoot in React Docs