COURSES
MBAData Science & AnalyticsDoctorate Software & Tech AI | ML MarketingManagement
Professional Certificate Programme in HR Management and AnalyticsPost Graduate Certificate in Product ManagementExecutive Post Graduate Program in Healthcare ManagementExecutive PG Programme in Human Resource ManagementMBA in International Finance (integrated with ACCA, UK)Global Master Certificate in Integrated Supply Chain ManagementAdvanced General Management ProgramManagement EssentialsLeadership and Management in New Age BusinessProduct Management Online Certificate ProgramStrategic Human Resources Leadership Cornell Certificate ProgramHuman Resources Management Certificate Program for Indian ExecutivesGlobal Professional Certificate in Effective Leadership and ManagementCSM® Certification TrainingCSPO® Certification TrainingLeading SAFe® 5.1 Training (SAFe® Agilist Certification)SAFe® 5.1 POPM CertificationSAFe® 5.1 Scrum Master Certification (SSM)Implementing SAFe® 5.1 with SPC CertificationSAFe® 5 Release Train Engineer (RTE) CertificationPMP® Certification TrainingPRINCE2® Foundation and Practitioner Certification
Law
Job Linked
Bootcamps
Study Abroad
Master of Business Administration (90 ECTS)Master in International Management (120 ECTS)Bachelor of Business Administration (180 ECTS)B.Sc. Computer Science (180 ECTS)MS in Data AnalyticsMS in Project ManagementMS in Information TechnologyMasters Degree in Data Analytics and VisualizationMasters Degree in Artificial IntelligenceMBS in Entrepreneurship and MarketingMSc in Data AnalyticsMS in Data AnalyticsMS in Computer ScienceMaster of Science in Business AnalyticsMaster of Business Administration MS in Data ScienceMS in Information TechnologyMaster of Business AdministrationMS in Applied Data ScienceMaster of Business Administration | STEMMS in Data AnalyticsM.Sc. Data Science (60 ECTS)Master of Business AdministrationMS in Information Technology and Administrative Management MS in Computer Science Master of Business Administration MBA General Management-90 ECTSMSc International Business ManagementMS Data Science Master of Business Administration MSc Business Intelligence and Data ScienceMS Data Analytics MS in Management Information SystemsMSc International Business and ManagementMS Engineering ManagementMS in Machine Learning EngineeringMS in Engineering ManagementMSc Data EngineeringMSc Artificial Intelligence EngineeringMPS in InformaticsMPS in Applied Machine IntelligenceMS in Project ManagementMPS in AnalyticsMS in Project ManagementMS in Organizational LeadershipMPS in Analytics - NEU CanadaMBA with specializationMPS in Informatics - NEU Canada Master in Business AdministrationMS in Digital Marketing and MediaMS in Project ManagementMSc Sustainable Tourism and Event ManagementMSc in Circular Economy and Sustainable InnovationMSc in Impact Finance and Fintech ManagementMS Computer ScienceMS in Applied StatisticsMaster in Computer Information SystemsMBA in Technology, Innovation and EntrepreneurshipMSc Data Science with Work PlacementMSc Global Business Management with Work Placement MBA with Work PlacementMS in Robotics and Autonomous SystemsMS in Civil EngineeringMS in Internet of ThingsMSc International Logistics and Supply Chain ManagementMBA- Business InformaticsMSc International ManagementMBA in Strategic Data Driven ManagementMSc Digital MarketingMBA Business and MarketingMaster of Business AdministrationMSc Digital MarketingMSc in Sustainable Luxury and Creative IndustriesMSc in Sustainable Global Supply Chain ManagementMSc in International Corporate FinanceMSc Digital Business Analytics MSc in International HospitalityMSc Luxury and Innovation ManagementMaster of Business Administration-International Business ManagementMS in Computer EngineeringMS in Industrial and Systems EngineeringMSc International Business ManagementMaster in ManagementMSc MarketingMSc Business ManagementMSc Global Supply Chain ManagementMS in Information Systems and Technology with Business Intelligence and Analytics ConcentrationMSc Corporate FinanceMSc Data Analytics for BusinessMaster of Business AdministrationBachelors in International ManagementMS Computer Science with Artificial Intelligence and Machine Learning ConcentrationMaster of Business AdministrationMaster of Business AdministrationMSc in International FinanceMSc in International Management and Global LeadershipMaster of Business AdministrationBachelor of Business
For College Students

Rendering Elements into the DOM in React - Comple Guide

$$/$$

 

You know that you have one root node inside your application that contains all of the React code. Can you have multiple root nodes inside one application? Let’s find out the answer to this in the next video.

$$/$$

As you saw in the video above, you can have as many root nodes inside your application as you want. One root node suffices in a small application, but you can have multiple root nodes depending upon the needs of your application.

 

When do you need to have multiple root nodes inside an application?

Can you recall that one of the advantages of using React is that it doesn’t make any assumption about your technology stack? Imagine that you want to ship only some features in React in an application, which is not primarily built using React. These features are spread across your entire application and are written at multiple places inside the application. Now, how will you achieve this without touching the rest of your independently existing code? This can be possible only when you are able to choose selective pieces of your existing code to be shipped, convert them into React, and then plug these new React code pieces back into different places inside your application. Having multiple root elements help you achieve this and, thus, redefine your application using React. As seen in the last video, each root node can contain multiple React components, and these root nodes can be plugged into different places inside your application.

 

The next question that arises is, “How do you render elements into DOM in React?”. You can use the ReactDOM.render() method for this purpose. Watch the next video to learn more about this method.

$$/$$

 

Syntax of the ReactDOM.render()  method:

 

ReactDOM.render(argument_1, argument_2);

argument_1  tells WHAT to render.

argument_2  tells WHERE to render.

 

Let’s look at another interesting fact about this method in the next video.

$$/$$

Notes:

  1. There must be two arguments in the ReactDOM.render() method.

  2. The first argument of the ReactDOM.render() method tells you what is to be rendered. This does not mean that only one element can be rendered in the first argument. Multiple elements can be rendered by enclosing them inside a parent div container. Also, this argument does not necessarily have to be a component. This argument can also take JSX code directly.

  3. The second argument of the ReactDOM.render() method can be anything that specifies a location on the DOM, where the element(s) in the first argument need to be rendered.