Skip to content
Home » Blog » React Render HTML | ReactJS Tutorial #4

React Render HTML | ReactJS Tutorial #4

ES6 In ReactJS ReactJS Tutorial #4

Hey Programmers, Welcome to the Fourth Part of React JS Tutorial Series In the Previous Parts We Learned About ES6 In React. And In this Post, We Will Be Learning About How to Render HTML In React. So Before Proceeding With Our Tutorial If you Have Missed the Previous Part of Our Series You Can Acess Them Here:

ReactJS Tutorial

What Is Render Function In React?

React Render Renders HTML Content to a Web Page Or Website Using a Function Called ReactDOM.render(). We Use Render to Show the HTML Code’s Content In a React JS Website.

You Might Have Noticed That When We Created Our First React App There Was a Folder Called index.html, In that Particular File We will be Rendering Our HTML Content to React.

We Don’t Directly Render Our HTML Content in that index.html File Instead We Use a <div> Tag, In this Div Container We Put Our HTML In Order to Render Our HTML Content Into React.

Using Render Function In React

      ReactDOM.render(<Hello />, document.getElementById('reactDiv'))
<body>
<div id="reactDiv"></div>
</body>

Creating an Element In React JS

HTML CODE:

const new_element = (
<h2> Hello this a React Element </h2>
);
 ReactDOM.render(new_element, document.getElementById('reactDiv'))

Root Node

Root Node is Used to Display the HTML element Where We are Going to Display the Result. We Don’t Use <div> For This.

<body>

  <header id="reactDiv"></header>

</body>

Displaying the Result

   ReactDOM.render(<Hello />, document.getElementById('reactDiv'))

So This Was It For this Post See you In the Next One Till Then Keep Coding Keep Exploring!

2 thoughts on “React Render HTML | ReactJS Tutorial #4”

  1. Pingback: JSX In ReactJS | ReactJS Tutorial #5 - Mr Programmer

  2. Pingback: What are Components In ReactJS | ReactJS Tutorial #6 - Mr Programmer

Leave a Reply

What are PWAs? All About PWAs Can ChatGPT Beat Google? Can ChatGPT Replace Web Developer? Is Maths Important for Programming? Top 10 Programming Languages to Learn In 2023!