My heading 2 is not display in browser. Thanks you sir.

Question

Display <h2> in browser.
https://code.sololearn.com/WYSS1SIzfcpO/?ref=app

Answer 1

Try replacing your JavaScript and JSX with this:

//this is a functional component Person
const Person = () => {
return (
<div>
<h1>Its an image</h1>
<img src="https://mimo.app/i/kittles.png"/>
</div>
);
};
ReactDOM.render (<Person />,
document.getElementById ("root")
);

Your code when I looked at it had a problem where the h2 element was defined but not connected with your Person component's return value. If you calculate elements but don't return them, they won't be rendered. That's why your h2 didn't show with your original code.

Unrelated to ReactJS and much more related to HTML5, consider using figure and figcaption tags for more semantic HTML. More details are at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
Those tags express the meaning of the text and the text's relationship to the image better than your h2 tag and the div I gave in the example above.

Answer 2

Introduction to JSX

https://livebook.manning.com/book/react-quickly

https://livebook.manning.com/book/react-quickly/chapter-3/