Learn React JS in 5 minutes — A tutorial for beginners | Part 1
Mar 31, 2023
IMPORT REACT FROM CDN
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
3 Things to Render a React Element
CreateElement A React Element
// <h1 class="Tag">Hello World</h1>
const ReactElement = React.createElement("h1",{class:"Tag"},"hello world")
React a createRoot
const root = ReactDOM.createRoot(document.getElementById("root"));
Render a React Element
root.render(ReactElement);
How to Render a Nested React Element
Example Code
<div id="parent">
<div id="child">
<h1>Hello World</h1>
<h2>Hello World</h2>
</div>
</div>
We Have to Use [] wrap up the element and render it
const ReactElement = React.createElement(
"div",
{id:"parent"},
React.createElement(
"div",
{id:"child"},
[
React.createElement("h1",{id:"h1"},"h1 tag 1"),
React.createElement("h1",{id:"h2"},"h1 tag 2"),
]
)
)
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(ReactElement);