When I make an h1 element in react going to the root div and try to add something else to the root div it doesn't add the h1 and adds the other thing. I have tried using another div but it did not work. I tried it outside and inside the root div but still no luck.
My Code(this is the react.html file, index.html has no react)
<html>
<body style="font-size: 2rem; font-family: 'Times New Roman', Times, serif;">
<div id="root"> <div id="linkdv"></div></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script>
const rootEl = document.getElementById('root')
const linkdv = document.getElementById("linkdiv")
const element = React.createElement('h1', { id:'header'}, 'Hey There This Is Using React')
const link = React.createElement('a', { href:'index.html'}, 'Second Page')
ReactDOM.render(element, rootEl)
ReactDOM.render(link, rootEl)
</script>
</html>
As per the React documentation:
ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
Because your linkdv element is a child of your root element, it gets wiped out when writing to your root element. That's why adding the second element didn't help. You're also not rendering to your linkdv right now anyway, you're rendering to root twice. Furthermore, you're not correctly selecting linkdv - you're using the wrong id. So if you change your code to this:
<html>
<body style="font-size: 2rem; font-family: 'Times New Roman', Times, serif;">
<div id="root"></div>
<div id="linkdv"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script>
const rootEl = document.getElementById('root')
const linkdv = document.getElementById("linkdv")
const element = React.createElement('h1', { id:'header'}, 'Hey There This Is Using React')
const link = React.createElement('a', { href:'index.html'}, 'Second Page')
ReactDOM.render(element, rootEl)
ReactDOM.render(link, linkdv)
</script>
</html>
Then your code will at least render your elements to the page. However, it's not usually advisable to call ReactDOM.render() multiple times, as the documentation states:
In practice, most React apps only call ReactDOM.render() once.
You likely only want to render a single time to the root element, and you'd define your element hierarchy/attributes in JSX (using Babel as a transpiler). That also allows you to easily nest elements you want to render, if that's what you're going for here. Take a look at Introducing JSX to get started with that.
If you're not using Node to manage your toolchain and build your project, you can get Babel from https://unpkg.com/babel-standalone@6.26.0/babel.min.js, which will allow you to use JSX in your code. Here's an example of how to use it.