React element is something that describes DOM nodes and properties virtually. It holds the component related information such as component type, child elements, color and other attributes. Take a look at the below code.
const App = () => {
return (
<
Hello React from localhost
Welcome to React, Best frontend Framework
>
);
};
console.log(App());
// {
// $$typeof: Symbol(react.element)
// "type": "h1",
// "key": null,
// "ref": null,
// "props": {
// "children": "Hello React from localhost"
// },
// "_owner": null,
// "_store": {}
// }
In the above code, type denotes the type of actual HTML element while Props represents the HTML attributes, and inner HTML content that will be passed to the HTML element. To learn more about Props and states, check out our complete guide on React fundamentals: Props and State.
From the above example, you might have noticed that no props are passed to the HTML element. Since React treats children as a pseudo attribute, inner HTML falls under children as well because it represents everything that is rendered between the HTML tags.
const App = () => {
returnHello React from localhost
;
};
console.log(App());
// {
// $$typeof: Symbol(react.element)
// "type": "p",
// "key": null,
// "ref": null,
// "props": {
// "children": "Hello React",
// "className": "danger"
// },
// "_owner": null,
// "_store": {}
// }
To put it simply here, all HTML attributes are considered as React props and inner content as a children property.
const App = () => {
// returnHello React from localhost
;
return React.createElement(
'h1',
{ className: 'danger' },
'Hello React from localhost'
);
};
This <h1> element internally calls this React.createElement under the hood. It takes element type, props, and children as its argument.