[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-307717-105":3,"detail-sidebar-cat-1-en-105":81,"doc-detail-307717-en":126},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":74,"head_meta":76,"extra_data":78,"updated_unix":80},105,"en","chapter-1-understanding-the-aspnet-core-react-template","Chapter 1 - Understanding the ASP.NET Core React Template","","Chapter 1 explains how to start with the ASP.NET Core React project template in Visual Studio 2019. It walks through creating a new ASP.NET Core web application, listing available options such as gRPC, Blazor, Razor Class Library, Angular, React.js, and React.js with Redux, plus configuration choices like HTTPS and Docker. It then illustrates a running React-based single-page application, including the client app setup, navigation behavior, and integration with the development server. The chapter also shows debugging and diagnostic views such as browser network/console panels, request/response details, and a weather forecast example.",{"@graph":14,"@context":73},[15,34,56],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/template/","Template",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/template/presentations/","Presentations",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/chapter-1-understanding-the-aspnet-core-react-template/307717/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/chapter-1-understanding-the-aspnet-core-react-template/307717.png","ImageObject",442,249,{"name":42,"@type":43},"Sarah ","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-28","2026-09-19",true,{"@type":52,"interactionType":53,"userInteractionCount":55},"InteractionCounter",{"@type":54},"ViewAction",15,{"@type":57,"mainEntity":58},"FAQPage",[59,65,69],{"name":60,"@type":61,"acceptedAnswer":62},"How do you create a new ASP.NET Core Web Application using the React template in Visual Studio 2019?","Question",{"text":63,"@type":64},"Use “Create a new project,” choose an ASP.NET Core React.js (or React.js and Redux) project template, and proceed with the wizard to generate the application.","Answer",{"name":66,"@type":61,"acceptedAnswer":67},"What common template options are shown besides React?",{"text":68,"@type":64},"The chapter lists templates such as gRPC, Blazor (server-side), Razor Class Library, and Angular, along with authentication choices like “Authentication” and “No Authentication.”",{"name":70,"@type":61,"acceptedAnswer":71},"What is the purpose of the ClientApp subdirectory in the generated project?",{"text":72,"@type":64},"It contains the React application based on the create-react-app template, where npm commands like npm test or npm install can be run from that directory.","https://schema.org",{"og:url":32,"og:type":75,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":77,"canonical":32},"index,follow",{"doc_id":79,"site_id":7},307717,1791725578,{"code":4,"msg":82,"data":83},"success",[84,88,93,98,102,107,112,117,122],{"id":85,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":86,"slug":87},11,90,"presentations",{"id":89,"doc_module":22,"doc_module_name":25,"category_name":90,"show_sort_weight":91,"slug":92},12,"Resumes",80,"resumes",{"id":94,"doc_module":22,"doc_module_name":25,"category_name":95,"show_sort_weight":96,"slug":97},14,"Invoices",70,"invoices",{"id":55,"doc_module":22,"doc_module_name":25,"category_name":99,"show_sort_weight":100,"slug":101},"Posters",60,"posters",{"id":103,"doc_module":22,"doc_module_name":25,"category_name":104,"show_sort_weight":105,"slug":106},16,"Social Media",50,"social-media",{"id":108,"doc_module":22,"doc_module_name":25,"category_name":109,"show_sort_weight":110,"slug":111},17,"Forms",40,"forms",{"id":113,"doc_module":22,"doc_module_name":25,"category_name":114,"show_sort_weight":115,"slug":116},18,"Letters",30,"letters",{"id":118,"doc_module":22,"doc_module_name":25,"category_name":119,"show_sort_weight":120,"slug":121},21,"Paper Templates",5,"papers-templates",{"id":123,"doc_module":22,"doc_module_name":25,"category_name":124,"show_sort_weight":4,"slug":125},158,"General","general-158",{"code":4,"msg":82,"data":127},{"doc_id":79,"user_id":128,"nickname":42,"user_avatar":129,"doc_module":22,"category_id":85,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":55,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":135,"language":136,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":137,"faqs":138,"seo_title":139,"seo_description":12,"update_tm":140,"read_time":141},962085320529,"https://ap-avatar.wpscdn.com/davatar_9964176cb1d06d4a9deccf72a44ae3dc","# Chapter 1:Understanding the ASP.NET CoreReact Template\n\n# Visual Studio 2019\n\nOpen recent  \nClone or checkout code  \nGet code from an online code repository like GitHubor Azure DevOps  \nOpen a project or solutionOpen a local Visual Studio project or .sln fileOpen a local folderNavigate and edit code within any folderCreate a new project  \nChoose a project template with code scaffolding toget startedContinue without code  \n×  \n# Create a new ASP.NET Core Web Application\n\n.NET Core  \nASP.NET Core 3.0  \nA project template for creating a gRPC ASP.NET Core service.  \nAuthentication  \nNo Authentication  \nBlazor(server-side)  \n@  \nChange  \nA project template for creating a Blazor application that runs server-side inside an ASP.NET Core  \napplication.This template can be used for web applications with rich dynamic user interfaces (Uls).  \nRazor Class Library  \nAdvanced  \nA project template for creating a Razor class library.  \n☑Configure for HTTPS  \n□Enable Docker Suppot  \nAngular  \nA  \n(Requires Docker Desktop)  \nA project template for creating an ASP.NET Core application with Angular.  \nLinux  \nReact.js  \nA project template for creating an ASP.NET Core application with Reactjs.  \nReact.js and Redux  \nA project template for creating an ASP.NET Core application with Reactjs and Redux.  \nGet additional project templates  \nBack  \nCreate  \n\n| Home Counter Fetch data  \u003Cbr>WebApplication1   |  |\n| --- | --- |\n| Hello,world!   |  |\n| Welcome to your new single-page application,built with:   |  |\n| ·ASP.NET Core and C\\#for cross-platform server-side code   |  |\n| ·React for client-side code   |  |\n| ·Bootstrap for layout and styling   |  |\n| To help you get started,we have also set up:   |  |\n| ·Client-side navigation.For example,click Counter then Back to return here.   |  |\n| ·Development server integration.In development mode,the development server from create-react-app runs in the   |  |\n| background automatically,so your client-side resources are dynamically built on demand and the page refreshes when you   |  |\n| modify any file.   |  |\n| ·Efficient production builds.In production mode,development-time features are disabled,and your dotnet publish   |  |\n| configuration produces minified,efficiently bundled JavaScript files.   |  |\n| The ClientApp subdirectory is a standard React application based on the create-react-app template.If you open a command   |  |\n| prompt in that directory,you can run npm commands such as npm test or npm install.   |  |\n\n| Elements  \u003Cbr>Console  \u003Cbr>:×  \u003Cbr>Audits S  \u003Cbr>Memory Performance  \u003Cbr>Sources Network  \u003Cbr>Application ecurity React   |  |  |  |  |  |  |  |  |\n| --- | --- | --- | --- | --- | --- | --- | --- | --- |\n| ◎  \u003Cbr>□ offne No thottling  \u003Cbr>□Preserve log Disable cache  \u003Cbr>View.:  \u003Cbr>7  \u003Cbr>口Group by frame   |  |  |  |  |  |  |  |  |\n| AI  \u003Cbr>□Hide data URLs  \u003Cbr>Filter  \u003Cbr>XHR JS CSS Img Media Font Doc WS Manifest Other   |  |  |  |  |  |  |  |  |\n| 10ms  \u003Cbr>20ms  \u003Cbr>30ms   | 40ms   |  | 50m   | s  \u003Cbr>60ms   | 70ms   | 80ms   | 90ms   | 100 ms  \u003Cbr>110   |\n|  |  |  |  |  |  |  |  |  |\n| Name   |  | ×Headers Preview Response Timing   |  |  |  |  |  |  |\n| □ weatherforecast   |  | v General  \u003Cbr>Request URL:https://localhost:44339/weatherforecast  \u003Cbr>Request Method:GET  \u003Cbr>Status Code:208  \u003Cbr>Remote Address:[::1]:44339  \u003Cbr>Referrer Policy:no-referrer-uhen-downgrade   |  |  |  |  |  |  |\n|  |  |  |  |  |  |  |  |  |\n|  |  | ▶Response Headers (5)  \u003Cbr>▶ Request Headers(2)   |  |  |  |  |  |  |\n| 1 requests|553 B transferred|498 B resources   |  |  |  |  |  |  |  |  |\n\n\n| WebApplication   |  |  | Home Counter Fetch data   |  |\n| --- | --- | --- | --- | --- |\n| Weather forecast   |  |  |  |  |\n| This component demonstrates fetching data from the server.   |  |  |  |  |\n| Date   | Temp.(C)   | Temp.(F)   | Summary   |  |\n| 2019-07-28T09:53:01.1336185+01:00   | 42   | 107   | Freezing   |  |\n| 2019-07-29T09:53:01.1336185+01:00   | -1   | 31   | Cool   |  |\n| 2019-07-30T09:53:01.1336185","cbCaiiCeYBgTGFok","https://ap.wps.com/l/cbCaiiCeYBgTGFok","pdf",10419268,128,"English","# Create a new ASP.NET Core Web Application\n## Choose project templates\n## Configure options (HTTPS, Docker)\n# Run and inspect the single-page React app\n## ClientApp setup and npm commands\n## Browser developer tools examples","[{\"question\":\"How do you create a new ASP.NET Core Web Application using the React template in Visual Studio 2019?\",\"answer\":\"Use “Create a new project,” choose an ASP.NET Core React.js (or React.js and Redux) project template, and proceed with the wizard to generate the application.\"},{\"question\":\"What common template options are shown besides React?\",\"answer\":\"The chapter lists templates such as gRPC, Blazor (server-side), Razor Class Library, and Angular, along with authentication choices like “Authentication” and “No Authentication.”\"},{\"question\":\"What is the purpose of the ClientApp subdirectory in the generated project?\",\"answer\":\"It contains the React application based on the create-react-app template, where npm commands like npm test or npm install can be run from that directory.\"}]","Chapter 1 - Understanding the ASP.NET Core React Template | PDF",1789853768,45]