Following this question, i got confused. I saw people saying that react uses html, and people saying it uses jsx, but people dont mention which type of html it uses.
Here is the question i followed:
Does ids must start with a letter in react?
Could somebody clarify?
JSX stands for JavaScript XML, which you could say is a more powered up version of Vanilla Javascript. In the end JSX is compiled by preprocessors to Javascript (ES5). React uses JSX for rendering html and performing other actions, but you don't need to use JSX if you're not too comfortable with it. You may use vanilla JS as well.
As for whether it mimics HTML4 or HTML5, it depends on what you code, React itself is not limited to any HTML version and it is the browser that needs to worry about which HTML version you are using.
If your document has
<!DOCTYPE html>
browsers would recognise your document as HTML5. If you instead use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
browsers would recognize the document as HTML4 (strict in this case)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> in a NextJS project?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> and <table><tr><td></td></tr></table> without body.React is just a library, and JSX is a syntax extension to JavaScript. If you setup a boiler plate project using CRA or even without, you can see, react just renders your components into a <div id="root"></div> which exists in an HTML page probably located in the public folder.
ReactDOM.render(
element,
document.getElementById('root')
);
Whether that HTML page is HTML4 or HTML5 is controlled by that HTML page you create or if its CRA, you can modify it to be HTML4.
What happens to the JSX you write in react is:
consider this React element
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
This is equivalent to writing
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
which outputs something like this, which is actually what a react element looks like. This is rendered into the HTML page.
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
