DEV Community

Cover image for JSX and Rendering elements
Aditya Sharan
Aditya Sharan

Posted on

JSX and Rendering elements

Alt Text
This is neither a string nor HTML,it's JSX.

JSX or Javascript XML, is an XML/HTML-like syntax used by react that extends ECMAScript(ES) so that XML/HTML-like-text can co-exist with Javascript/React code.


Since JSX is closer to Javascript than to HTML,ReactDOM uses camelCase property naming convention instead of HTML attribute names.
For eg :
class becomes className
tabindex becomes tabIndex


Let's say there is a somewhere in your HTML file :

Alt Text

# This is the 'root' DOM node because everything inside it will be managed by ReactDOM.

To render a React element into a root DOM node, pass both to ReactDOM.render() :
Alt Text
Running you react app after this will give the following output :
Alt Text

That's all folks.
Thanks for reading!

Top comments (0)