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

React Environment - Role of Webpack and ESLint

$$/$$

 

Have you ever zipped all your files and folders into a single file? Why do you do that? A simple answer can be to bundle them together. Also, have you ever encountered that there are some places at web where you need to upload a file (let’s say your passport-sized photograph) and you are given a size limit that the uploaded file should not exceed (let’s say 2MB)? What do you do in case your file is larger than the given size limit? You reduce its size, don’t you?

 

You’ll see similar processes in this segment. You’ll learn about the processes of bundling and minification. Also, you’ll learn about the role that Webpack plays in a React application.

$$/$$

So far, you learned how bundling reduces the number of HTTP requests sent by the client to the server.

 

You looked at an example where a webpage references 10 stylesheets and 20 script files. This makes a total of 31 files (= 1 webpage + 10 stylesheets + 20 scripts) to be referenced.  A batch size is the number of files that a browser can reference in parallel. Considering this batch size to be 6, you need to make a total of 31/6 which is equal to 6 (ceil of 5.17) HTTP requests.

 

If you use the bundling technique, you can bundle all the stylesheets into one file and all the scripts into one file. Thus, after bundling, you need to reference 3 files which is equal to the sum of 1 webpage + 1 bundled stylesheet (containing all 10 stylesheets) + 1 bundled script (containing all 20 scripts). Now, with ideal batch size as 6, you need to make only 3/6 which is equal to 1 (ceil of 0.5) HTTP request. Thus, as seen in this example, bundling reduces the number of HTTP requests from 6 to 1.

 

You learned how minification helps in the process of shortening file’s contents, resulting in faster response time and lower bandwidth cost. You also saw how Webpack bundles your files into a single file in a React application.


In the next video, you’ll learn the importance of debugging your application beforehand. You’ll also learn what a Lint is and that ESLint is being popularly used in React applications.

$$/$$

ESLint, as explained in the last video, helps you to follow the coding guidelines and principles while making you commit fewer errors and mistakes.

 

For instance, consider a code snippet given below:

var name = "UpGrad";
var name = "UpGrad Education";
console.log(name);

When this is written in a React application that has ESLint configured in its environment, then one can see the message as given below:

 

'name' is already defined  no-redeclare

no-redeclare is one of the ESLint rules. Such rules are applied to a lot of different code style use cases. In order to see the list of all available rules provided by ESLint, click here.

 

In case you don’t want to specify your own set of rules every time, there are plenty of recommendations out there. One such recommendation is provided by Airbnb Style Guide. Airbnb provides a bunch of ESLint presets that cover ES6, JSX, etc., which makes it a great choice for React projects. It also helps by providing performance tips. Airbnb open sourced its own ESLint configuration so that it can be used by anyone. Check out this link to learn more about Airbnb JavaScript Style Guide.

 

Additional Resources: