Understanding the React Frontend

Learn to inspect the React frontend code.

We'll cover the following

It’s time to turn our attention to the React frontend. In this chapter, we’ll inspect the frontend code, starting with the entry point, which is a single HTML page. We will explore how the frontend is executed in development mode and how it is built in preparation for deployment. We will then learn how the frontend dependencies are managed and also understand why it took over a minute to run the app for the first time. Finally, we will explore how React components fit together and how they access the ASP. NET Core backend.

Understanding the frontend entry point

In a typical .NET frontend application, such as an ASP.NET Core web application, the Program.cs file is responsible for configuring and starting the application.

If we look in the ClientApp folder, we’ll see a file called package.json. This is a file that is often used in React apps and contains information about the project, its npm dependencies, and the scripts that can be run to perform tasks.

Press the “Run” button to see the output.

   ¨& hÎ( @ €((()¯®­»¯­­¹®­¬¹®­¬¹®¬ª¹®«©¹­ª¨¹­©§¹­¨§¹¯©§·®©§·®¨¦·®¨¥·®¨¥·®¨¥·®¨¦·„€‹ÛÚÙÿÙÖÕÿØÖÕÿØÖÔÿØÖÔÿØÕÔÿØÕÔÿØÕÓÿØÕÓÿØÔÓÿ×ÔÓÿ×ÔÒÿ×ÔÒÿ×ÔÒÿ½º¹ÿåãâÿåãâÿäâáÿäáàÿãàÞÿãÞÝÿâÝÛÿâÝÚÿâÛÙÿâÚØÿáÚ×ÿáÙÖÿáÙÕÿáÙÕÿáÙÕÿáÙÕÿª¥£¿æäãÿýøöÿüøöÿüøõÿü÷õÿü÷ôÿûöôÿûõóÿûõòÿûõòÿúôñÿúôðÿúôðÿúóïÿÚÔÑÿþüûÿýûúÿýúùÿýùøÿüøöÿü÷ôÿûõóÿûôòÿúóðÿúòïÿúòîÿùñíÿùñíÿùñíÿùñíÿùñíÿ»µ³¿æäãÿüù÷ÿñâÍÿæÊ ÿæË¡ÿåʞÿåɞÿÞлÿÜÙØÿÙÖÕÿØÖÕÿØÖÔÿØÕÔÿØÕÔÿ¾¼ºÿþüûÿþûúÿýûùÿýúøÿüøöÿü÷õÿûöóÿûõòÿûôñÿúóðÿúòïÿúòîÿùñîÿùñíÿùñíÿúñîÿ»¶³¿æäãÿüù÷ÿæË¢ÿΘCÿϛGÿ͙Aÿ͙BÿÏ´Šÿýøöÿýøöÿüøõÿüøõÿü÷ôÿûöôÿÛ×ÕÿþüûÿþüûÿýûúÿýúùÿîëéÿîêèÿîéçÿíèæÿíçäÿíæäÿìåãÿåÞÜÿúòïÿúòîÿúòïÿúòïÿ»¶´¿æääÿýùùÿçÌ¥ÿЛJÿџPÿÓ¤XÿÓ¤XÿѺ”ÿüù÷ÿüù÷ÿüùöÿüøöÿüøõÿü÷ôÿÜØÕÿþüüÿþüûÿýûúÿýúùÿïëêÿõñðÿîêèÿôðíÿíèåÿíçäÿíæäÿìæãÿúóðÿúóðÿúóðÿúóðÿ»·µ¿æåäÿýúùÿçÍ¥ÿϛIÿÔ¦\ÿўNÿНKÿжŽÿüù÷ÿüù÷ÿüù÷ÿüùöÿüøõÿüøõÿÜØÕÿþýüÿþüûÿþûûÿýûúÿïìëÿõòðÿîêèÿõðîÿíéæÿíèåÿíçåÿíçäÿûôñÿûôñÿûôñÿûôñÿ¼¸¶¿æåäÿýûùÿèΧÿѝLÿÕ§^ÿўNÿМLÿжŽÿýùùÿýùùÿýùøÿôïìÿìåáÿëäàÿÎÈÄÿþýüÿþüüÿþüûÿýûúÿöóòÿïìêÿîëéÿîêèÿîêèÿîéçÿíèæÿíèæÿûõóÿûõóÿûõóÿûõóÿ¼¸·¿ææåÿýüúÿèϨÿўNÿÕ¨`ÿџPÿНMÿзÿýúùÿýúùÿýúùÿôïíÿìåâÿëåáÿÏÉÅÿþýýÿþýüÿþüûÿþüûÿýûúÿýúùÿýùøÿüù÷ÿüøöÿü÷õÿü÷õÿü÷ôÿüöôÿüöôÿüöôÿü÷ôÿ½¹¸¿ææåÿýüûÿèÏ©ÿѝMÿÖ¨`ÿџPÿНMÿжÿýûùÿýûùÿýúùÿôðíÿìæâÿìåáÿÎÉÆÿ÷ööÿ÷ööÿ÷öõÿ÷õôÿ÷ôóÿöôóÿöóòÿöóñÿöòñÿõòðÿõñïÿõñïÿõñïÿõñïÿõñïÿõñïÿ³±°¿ææåÿýýûÿéÑ«ÿÓ¡Uÿ׫fÿÓ¢VÿÒ SÿѸ’ÿýüúÿýüúÿýûúÿôñíÿìçâÿìæâÿÏÉÆÿððïÿðïïÿðïîÿðïîÿðîíÿðííÿïíìÿïíìÿïìëÿïìëÿïìêÿïëêÿîëêÿîëêÿîëêÿïëêÿ´²±¿çææÿþýýÿéѬÿҟQÿשcÿÓ SÿҟPÿѸÿýüûÿýüûÿýüúÿôñîÿìçâÿìæâÿÏÉÆÿÙØØÿÙØ×ÿØ××ÿØ××ÿØ×ÖÿØÖÕÿØÖÕÿØÕÕÿ×ÕÕÿ×ÕÕÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ×ÕÔÿ¥££¿çææÿþýýÿêÒ®ÿÕ£YÿÙ­jÿÕ¥ZÿÔ£XÿÒº”ÿýýûÿýýûÿýüûÿôñïÿìçãÿìçâÿÏÊÆÿåääÿÎÍÍÿØØ×ÿØ××ÿþýüÿþüüÿþüûÿþüûÿþûûÿýûúÿýüûÿýûúÿýûúÿýûùÿðîíÿãááÿ­««¿ççæÿÿþýÿëÒ®ÿÕ¢WÿÙ¬iÿÕ¤YÿÔ¢WÿÒ¹”ÿþýýÿþýýÿþýüÿôòñÿìçäÿìçäÿÎÊÇÿåääÿåääÿåääÿäääÿäääÿääãÿääãÿäããÿäããÿäããÿäääÿäããÿäããÿäããÿäããÿäããÿ®­­¿çççÿþþþÿëÓ°ÿÖ¤\ÿÚ®mÿצ^ÿÕ¤[ÿÒ»–ÿþýýÿþýýÿþýýÿõòñÿìèåÿìçåÿÎÊÈÿåååÿåååÿåååÿåååÿåååÿ²²²ÿÑÑÑÿÑÑÑÿÑÑÑÿÑÑÑÿ²­ªÿÔÏÌÿÛ×ÕÿÛ×ÔÿÛÖÔÿ“““›...#çççÿþþþÿëÓ±ÿÖ£[ÿÚ­kÿÖ¤\ÿÕ£YÿÓº•ÿÿþýÿÿþýÿþýýÿõòñÿìèæÿìèåÿ×ÓÑÿÎÍÌÿÎÍÌÿËÊÈÿËÉÈÿËÉÈÿº¸·ÿËÉÈÿËÉÈÿËÉÇÿËÈÇÿÍÇÃÿóíéÿûöôÿûöóÿûõòÿµµµ‡çççÿÿÿÿÿíÕ³ÿÙ§bÿÜ°rÿÙ§cÿئ`ÿÔ»˜ÿþþþÿþþþÿþýýÿõòñÿìèæÿìèæÿìèåÿôòðÿôòðÿìçäÿìçãÿìçâÿìæâÿìåâÿìåâÿëåáÿëäàÿëäßÿóíêÿü÷ôÿûöôÿûöôÿ···‡çççÿÿÿÿÿìÔ²ÿפ^ÿÛ®oÿØ¥`ÿפ]ÿÓº–ÿþþþÿþþþÿþþþÿõóñÿìèæÿìèæÿìèæÿõòñÿõòñÿìçäÿìçäÿìçãÿìçâÿìæâÿìæâÿìåâÿìåáÿëåáÿôîëÿüøõÿü÷ôÿûöôÿ¹¹¹‡çççÿÿÿÿÿíÕµÿÚ¨eÿÞ²wÿÞ´yÿÞ²wÿØĨÿÿÿÿÿÿÿÿÿÿÿþÿöôòÿíéæÿìèæÿìèæÿõòñÿõòñÿìèåÿìçäÿìçäÿìçãÿìçâÿìæâÿìæâÿìåâÿìåáÿôïëÿüøõÿüøõÿü÷ôÿ»¼»‡çççÿÿÿÿÿíÔ´ÿÙ¦aÿݯrÿÙ¦aÿØ¥_ÿÔº˜ÿÿÿÿÿÿÿÿÿÿÿþÿõóóÿìéæÿìéæÿìèæÿõòñÿõòñÿìèæÿìèåÿìèäÿìçäÿìçäÿìæãÿìæâÿìåáÿìåáÿôïìÿüù÷ÿüùöÿüøöÿ½½½‡çççÿÿÿÿÿíÕ¶ÿÛ©gÿÞ²wÿÛªiÿÚ©gÿÕ½œÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿìêæÿíéæÿìéæÿõóñÿõóñÿìèæÿìèåÿìçåÿìçãýìèäýìçãÿìæâÿìåáÿëäáÿôïìûüù÷ùüù÷ûüøöû¾¾¾‡çççÿÿÿÿÿíÕµÿÚ§dÿÞ±uÿÚ©fÿÚ§dÿÕ¼›ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíéæÿìéæÿìéæÿõôñÿõóñÿíêçÿíêçÿíêçÿíêçÿíêçÿìèåÿìçãýìæáÿëäáÿóïëÿüøõÿüøõÿü÷ôÿÀÀ¿‡çççÿÿÿÿÿîÕ·ÿÛ¨gÿÞ²wÿÛªjÿÛ©gÿÕ½œÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿìéçÿìéçÿõôòÿõôòÿíêçÿíêçÿíêçÿíêçÿíêçÿìêæÿìéåÿìèãýìèäÿôñîÿüù÷ÿüùöÿøöôÿÁÁÁ‡çççÿÿÿÿÿîÖ·ÿÛ©iÿß²yÿÜ«kÿÛªiÿÕ½ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýüüÿûúùÿøøøÿòòòÿ‡çççÿÿÿÿÿîÕ·ÿÛ¨iÿß²yÿݬnÿÜ«mÿ×Â¥ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿìéæÿëèåÿéæãÿêçäÿòñïÿùùùÿóóóÿëëëÿÃÃÇçççÿÿÿÿÿîÖ¸ÿܪlÿÞ®rÿß²yÿàµ~ÿÛ˵ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿìéæÿêçäÿêçäÿãàÝÿàÝÚÿéçæÿíííÿãããÿÏÏÏÿÚÚÚÿÿÿçççÿÿÿÿÿîÖ·ÿܨiÿÝ«lÿÜ©iÿÜ©jÿÕ½ÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿëèåÿêçäÿêçäÿêçäÿÂÀ¿ÿ¾¾¾ÿ¿¿¿ÿºººÿ¾¾¾ÿÛÛÛ¿ÿÿÿÿÿÿçççÿÿÿÿÿöëÜÿîÕ·ÿîÖ¸ÿîÖ·ÿîÖ¸ÿßÓÄÿÿÿÿÿÿÿÿÿÿÿÿÿöôóÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿíêçÿëçåÿêçäÿëçåÿëçåÿÀ¾½ÿþþþÿ÷÷÷ÿáââÿâââ¿ÿÿÿÿÿÿÿÿÿçççÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿçççÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿüüüÿüüüÿüüüÿúúúÿÅÅÅÿöööÿàààÿâââ¿ÿÿÿÿÿÿÿÿÿÿÿÿâââÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿßßßÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿýýýÿúúúÿõõõÿÃÃÃÿâââÿååå¿ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÐÐÐÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿþþþÿûûûÿõõõÿíííÿÊÊÊÿäää¿ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÔÔÔïïïÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿîîîÿíííÿêêêÿæææÿáááÿÜÜÜ¿ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ(  @ÔÒуÏÍ̅ÏÌ˅ÏÌ˅ÏÌʅÎËʅÎËɅ¿½¼¹ÎÌËÝÍÊÉÝÌÈÆÝËÆÄÝÌÅÃÛËÅÁÛËÄÁÛ¶°®ÁñîìÿôçÖÿñáÊÿîáÐÿêæäÿéåãÿéäâÿåâàÿýûúÿüù÷ÿûöôÿúôñÿúòïÿùñíÿùñíÿß×ÔßñîîÿÛ³uÿНLÿЫnÿüøöÿüøõÿü÷ôÿìêèÿýûúÿõóñÿïëéÿîéçÿìæäÿñêçÿúòïÿßÙÖßñðîÿܵxÿÒ¢VÿЩmÿüùøÿúöôÿôîëÿéæäÿþüûÿøõôÿðíëÿïëéÿíèæÿôîëÿûõòÿàÛÙßññïÿܶ{ÿÓ£XÿЪnÿýúùÿøõóÿëåáÿäáßÿúùøÿúø÷ÿùöõÿùõôÿøôòÿøôòÿøóñÿÝÙ×ßòññÿÞ¸ÿÕ¥\ÿѬqÿýüúÿøöôÿìæâÿÚÖÕÿäããÿäââÿäááÿãáàÿãàßÿãàßÿãàßÿËÉÈßòòñÿ຃ÿרaÿÓ®uÿýýüÿù÷öÿìçãÿÙ×ÕÿÜÛÛÿçççÿñðïÿñïïÿñïïÿðïîÿíëëÿÌËËßòòòÿỆÿØ©dÿÔ¯xÿþýýÿù÷÷ÿìçåÿÖÔÒÿÙØ×ÿØ×ÖÿÂÁÀÿÎÍÌÿÇÃÁÿçâßÿëæãÿ”•”Sóóóÿ⽉ÿÚ«iÿÕ°{ÿþþþÿùø÷ÿìèæÿðíëÿðìêÿìçãÿìæâÿëåáÿëäàÿøòïÿûöôÿ³³³Eóóóÿ㾌ÿܯqÿص…ÿÿÿÿÿúùøÿìéæÿðíëÿðíëÿìçäÿìçãÿìæâÿìåáÿøôñÿüøõÿ¶·¶Eóóóÿ侎ÿÜ­oÿײ€ÿÿÿÿÿúùùÿìéæÿñîëÿñîìÿìèæÿìèåýìçãÿëåáÿøôñýüøöýºº¹Eóóóÿ俏ÿÝ®qÿس‚ÿÿÿÿÿüüüÿõôóÿøöõÿø÷õÿöôóÿöôóÿõôòÿõóñÿúøöÿøöõÿ¼¼¼Eóóóÿ忑ÿÞ¯uÿÜ»‘ÿÿÿÿÿúùùÿíêçÿíêçÿíêçÿíêçÿìéæÿêçäÿåâßÿðïïÿäääÿÌÌÌCóóóÿëÏ­ÿåÀ‘ÿßÄ¡ÿÿÿÿÿúùùÿíêçÿíêçÿíêçÿíêçÿêçäÿêçäÿÏÏÎÿÔÔÔÿÒÒҟÿÿÿíííÿöööÿöööÿíííÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿüüüÿùùùÿØØØÿâââŸÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÒÒÒAöööÿöööÿöööÿöööÿöööÿöööÿôôôÿêêêÿ××ןÿÿÿÿÿÿÿÿÿ
Implementing the frontend in React

Note: npm is a popular package manager for JavaScript. The dependencies in package.json reference the packages in the npm registry.

If we open the package.json file, we will see react listed as a dependency:

Press + to interact
"dependencies": {
  "react": "^18.2.0",
...
  "react-scripts": "^5.0.1",
... },

A version is specified against each package name. The versions in your package.json file may be different to the ones shown in the preceding code snippet. The ^ symbol in front of the version means that the latest minor version can be safely installed, according to semantic versioning.

Note: A semantic version has three parts: Major.Minor.Patch. A major version increment happens when an API breaking change is made. A minor version increment happens when backward-compatible features are added. Finally, a patch version happens when backward-compatible bug fixes are added.

So, React 18.2.0 can be safely installed because this is the latest minor version of React 18 at the time of creating this course.

The react-scripts dependency gives us a big clue as to how React was scaffolded. react-scripts is a set of scripts from the popular Create React App (CRA) tool that was built by the developers at Facebook. This tool has done a huge amount of configuration for us, including creating a development server, bundling, linting, and unit testing. We’ll learn more about CRA in the next chapter.

The root HTML page for an app scaffolded by CRA is index.html, which can be found in the public folder in the ClientApp folder. It is this page that hosts the React app. The root JavaScript file that is executed for an app scaffolded by CRA is index.js, which is in the ClientApp folder. We’ll examine both the index.html and index.js files later in this chapter.