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

React Render HTML | ReactJS Tutorial #41 min read

React Render HTML

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!

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

Getting Started With ReactJS | ReactJS Tutorial #1Getting Started With ReactJS | ReactJS Tutorial #11 min read Introduction to ReactJSIntroduction to ReactJS | ReactJS Tutorial #22 min read JSX In ReactJS | ReactJS Tutorial #5JSX In ReactJS | ReactJS Tutorial #51 min read React vs AngularReact vs Angular | Which One You Should Go For?5 min read React vs React NativeReact vs React Native | What is the Difference?7 min read Password ValidationPassword Validation Using JavaScript3 min read 10 Web Development Projects With Source Codes10 Web Development Projects With Source Codes!7 min read Top 10 Web Development ToolsTop 10 Web Development Tools | Every Web Developer Should Know2 min read
Tags:

3 thoughts on “React Render HTML | ReactJS Tutorial #41 min read”

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

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

  3. Pingback: Props In ReactJS | ReactJS Tutorial #7 - Mr Programmer

Leave a Reply