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

Summary on ReactJS concepts Part 1

$$/$$

 

In this session, you performed the following tasks:

 

  • Environment Setup
    You installed Node.js and create-react-app node package. Using this package, you created your React application viz. Phone Directory. You started your development server on your local machine to run this application.
    You also looked at what all files and folders are automatically created by the create-react-app package and what are they meant for.
     
  • Code Cleanup
    You deleted the unnecessary code from the auto-generated application folder.

 

After performing the aforementioned tasks, you learned the following concepts in React:

 

  1. JSX
    Though JSX is HTML-looking syntax, it is actually XML extension to ECMAScript specification. Thus, instead of using pure JavaScript for building DOM elements, you can use JSX, which offers flexibility to developers to use a familiar syntax, viz. HTML.
     
  2. Differences between JSX and HTML
    You looked at how the following points hold true for React but not for HTML:
  • Adjacent JSX elements must be wrapped in an enclosing tag
  • Closing tag required for all types of tags
  • JSX properties are not similar to HTML attributes
  •  Case sensitiveness
     
  1. Curly Braces
    These can be used in React to evaluate a JavaScript expression during compilation. The expression can be a variable, a function, an object, an arithmetic calculation, logical evaluation, or any code snippet that returns some value.
     
  2. React.createElement() method
    This method is used when an element needs to be created on DOM.
    React.createElement(element_name, element_properties, children);
    

    The first argument in this method is the name of the element that is to be rendered. The second argument is the object that consists of property-value pairs that can be provided as attributes to this component or element. After these two arguments, you can pass an infinite number of children elements, which will be nested inside this main component or element.The first argument is mandatory, while the rest of the arguments that follow are optional.

  3. ReactDOM.render() method
    This method is used to render an element into DOM in React. 
    ReactDOM.render(argument_1, argument_2);
    

    argument_1  tells WHAT to render.

    argument_2  tells WHERE to render.
     
  4. Components
    Components are just the JavaScript way of writing independent, reusable, and dynamic code. There are two types of components in React — functional components, which are written in the form of functions and class components, which are written in the form of classes. 
     
  5. Styling components
    React offers styling in two ways — inline and external.
    Inline Styling:
  • Style property is used.
  • Two curly braces are used with the style property — one to evaluate the expression inside the JSX code and the other to represent a JavaScript object, which is taken as input by the style  property.
  • The property names must be written in camelCase such as textTransform, fontSize, etc.
  • All the property values must map to a valid datatype such as ‘#000’ as the color code should be written within single/double quotes to make it a string value.
  • All property-value pairs are separated using the comma operator.

    External Styling:
  • You need to create an external stylesheet and define all the CSS styles inside this stylesheet. Then, you need to import this stylesheet inside the file where that component or element is defined on which this style is to be applied.
     
  1. Dynamically injecting data using map() method
    JavaScript’s map() method can be used to iterate over an array and inject data into the React components or elements dynamically. You don’t need to hard-code the data inside each component. This is one of the major reasons why React refers to its components as ‘reusable’ entities.

 

 

You have also built some portion of the Phone Directory application.