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:
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!
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 #11 min read
Introduction to ReactJS | ReactJS Tutorial #22 min read
JSX In ReactJS | ReactJS Tutorial #51 min read
React vs Angular | Which One You Should Go For?5 min read
React vs React Native | What is the Difference?7 min read
Password Validation Using JavaScript3 min read
10 Web Development Projects With Source Codes!7 min read
Top 10 Web Development Tools | Every Web Developer Should Know2 min read
Pingback: JSX In ReactJS | ReactJS Tutorial #5 - Mr Programmer
Pingback: What are Components In ReactJS | ReactJS Tutorial #6 - Mr Programmer
Pingback: Props In ReactJS | ReactJS Tutorial #7 - Mr Programmer