Learn React JS in 5 minutes — A tutorial for beginners | Part 1

Venkatesan G

·

Follow

Mar 31, 2023

--

Listen

Share

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);