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
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 MediaMSc 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 in Sustainable Global Supply Chain ManagementMSc 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 AdministrationMaster of Business AdministrationMaster of Business AdministrationMSc in International FinanceMSc in International Management and Global LeadershipMaster of Business AdministrationBachelor of BusinessMaster of Business Administration 60 ECTSMaster of Business Administration 90 ECTSMaster of Business Administration 90 ECTSBachelor of Business AnalyticsBachelor of Information TechnologyMaster of Business AdministrationMBA Business AnalyticsMSc in Marketing Analytics and Data IntelligenceMS Biotechnology Management and EntrepreneurshipMSc in Luxury and Fashion ManagementMaster of Business Administration (90 ECTS)Bachelor of Business Administration (180 ECTS)B.Sc. Computer Science (180 ECTS) MSc in International Corporate Finance MSc in Sustainable Luxury and Creative IndustriesMSc Digital Marketing
For College Students

Components in React - Explained

$$/$$

 

How does React provide reusability of code? This is done using components. Let's see how React does it and what these components are.

$$/$$

So far, you have learnt that components  are just the JavaScript way of writing independent, reusable, and dynamic code.

 

Let’s look at the types of components in the next video.

$$/$$

In the last video, you learned that there are two types of components in React — functional components and class components. As the names suggest, functional components are written in the form of functions whereas class components are written in the form of classes.

 

$$/$$

 

Let’s look at components in context of our Phone Directory application.

$$/$$

Going back to the Phone Directory application, let’s look at creating the header as a component, which can be utilised as a reusable entity across different pages in your application.

$$/$$

That was smooth progress towards building the first component in React. Good job!

 

Following is an example to recall how you wrote Header as a functional as well as class component inside the Phone Directory application.

 

Header:

 

Functional Component:

import React from 'react';

const Header = function() {
   return (
       <div className="header">
         Phone Directory
       </div>
   )
}

Class Component:

import React, { Component } from 'react';

class Header extends Component {
   render() {
       return (
           <div className="header">
               Phone Directory
           </div>
       )
   }
}

Notes:

  1. A component’s name must start with a capital letter in order to distinguish between the predefined HTML elements and the custom elements (components) created by users. An example can be:

    MyComponent
    

  2. A class component must extend from a base class named Component. For this, you also need to include Component as a named import from the ‘react’ library. A class component must always have a render() function.

    import React, {Component} from 'react';
    
    class MyComponent extends Component {
       render() {
          // code here
       }
    }
    

  3. A component must always return something.

    import React, {Component} from 'react';
    
    class MyComponent extends Component {
       render() {
          return (
             // code here
          )
       }
    }
    

    This returned value is the content that is actually rendered into the DOM; it replaces the name of the component. In case you miss the return statement in a functional component, you will get an error saying, “Nothing was returned from render. This usually means a return statement is missing.”. On the other hand, if you miss a return statement inside the render() function in a class component, you get an error saying, “Your render method should have return statement”.
    If you do not wish to return anything, you can return null from the component, as written below:

    return null;
    

    In any case, the return statement needs to be mandatorily written, no matter whether you wish to return anything or not.

     

  4. In order to reference a component written in a separate file, you need to first export the component from the file where it has been defined and then import the component in the required file where it needs to be used.
     

  5. A component can have a file extension as  .js  or  .jsx.
     

  6. In case of components where the file extension is .js or .jsx, the extension is not required to be explicitly mentioned while writing the import statement.
    For example, you can skip mentioning the file extension while writing the import statement when the Header file has the extension ‘.js’ or ‘.jsx’.

    import Header from './Header';
    

    However, for all other files, the extension should also be mentioned along with the file name while writing the import statement. Let’s say there’s a logo file with .svg extension, then you would need to mention the file extension when importing the logo file, as written below:

    import logo from './logo.svg';
    

In React, you ought to write reusable code snippets; this is one of the recommended coding guidelines in software development. Thus, using components saves you the trouble of rewriting redundant code at multiple places. This is why React is all about components.

 

 

You can commit your code at this stage with “Created ‘Header’ Component” as the commit message. You can view the diff here.

 

 

Additional Resources: