React Render HTML

React Render HTML | ReactJS Tutorial #41 min read

JavaScript, Programming

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)

Author

  • Tanmay Sinha

    Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users! We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners. We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace. If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

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 Emoji-Picker-React-JSHow to Create Emoji-Picker React JS | React JS Projects2 min read Top 10 Web Development ToolsTop 10 Web Development Tools | Every Web Developer Should Know2 min read