[{"data":1,"prerenderedAt":475},["ShallowReactive",2],{"news-item-\u002Fnews\u002Freactjs-net":3},{"id":4,"title":5,"body":6,"category":463,"created by":464,"date":465,"description":20,"extension":466,"meta":467,"navigation":468,"path":469,"sections":470,"seo":471,"stem":472,"thumbnail":473,"__hash__":474},"content_en\u002Fnews\u002Freactjs-net.md","ReactJs.NET",{"type":7,"value":8,"toc":441},"minimark",[9,17,21,24,30,39,42,48,70,76,79,85,92,97,101,108,111,114,128,134,141,146,156,161,167,172,178,184,190,196,202,216,222,227,232,237,243,248,254,259,265,270,275,281,295,301,304,310,315,319,325,336,342,345,351,354,360,363,369,372,378,382,385,389,392,396,402,419,425],[10,11,13],"h2",{"id":12},"reactjs",[14,15,16],"strong",{},"REACTJS",[18,19,20],"p",{},"React is an open-source JavaScript library that is used for building user interface. It gives excellent response speed when user inputting using the new method (JSX) to render web page. React allows developers to create large web applications that can change data, without reloading the page.",[18,22,23],{},"The main purpose of React is to be fast, scalable, and simple. However, React works only on user interfaces in the application. React corresponds to the view in the MVC template. In addition to it can be used with another JavaScript libraries or frameworks such as : Angular JS in MVC.",[10,25,27],{"id":26},"jsx",[14,28,29],{},"JSX",[31,32],"img",{"className":33,"alt":36,"src":37,"style":38},[34,35],"block","mx-auto","","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19153616\u002Fimage002.jpg","width: 100%;",[18,40,41],{},"In React, in addition to using regular JavaScript for templating, it uses JSX to be faster. JSX is a language that allows to write HTML code in JavaScript. Contrary to JavaScript, JSX is statically-typed, meaning it is compiled before running, just like Java, C ++. So errors are detected right away during compilation.",[10,43,45],{"id":44},"why-use-reactjs",[14,46,47],{},"Why use ReactJs ?",[49,50,51,58,64],"ul",{},[52,53,54,57],"li",{},[14,55,56],{},"Simplicity :"," React uses a special syntax called JSX which allows you to mix HTML with JavaScript.",[52,59,60,63],{},[14,61,62],{},"Easy to learn :"," Anyone with a basic previous knowledge in programming can easily understand React .To react, you just need basic knowledge of CSS , JS and HTML.",[52,65,66,69],{},[14,67,68],{},"Performance with Virtual DOM :"," When you render a JSX element, every single virtual DOM object gets updated.",[10,71,73],{"id":72},"reactjsnet",[14,74,75],{},"REACTJS.NET",[18,77,78],{},"ReactJS.NET makes it easier to use React for C## and other.NET languages, especially for ASP.NET MVC ( although it also works with in other environments). It supports both ASP.NET 4 ( with MVC 4 or 5 ), and ASP.NET Core MVC. In addition to, ReactJS.NET is cross-platform so it can run on Linux via Mono or .NET Core.",[10,80,82],{"id":81},"getting-started-a-reactjsnet-application-with-aspnet-core-mvc",[14,83,84],{},"GETTING STARTED A REACTJS.NET APPLICATION WITH ASP.NET CORE MVC",[86,87,89],"h3",{"id":88},"start-by-creating-a-new-aspnet-core-mvc-project",[14,90,91],{},"Start by creating a new ASP.NET Core MVC project",[31,93],{"className":94,"alt":36,"src":96,"style":38},[34,35,95],"mb-4","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19161121\u002FMVC.png",[31,98],{"className":99,"alt":36,"src":100,"style":38},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19161119\u002FMVC2.png",[86,102,104,107],{"id":103},"install-packages",[14,105,106],{},"Install packages"," ",[18,109,110],{},"Go to the Nuget Package Manager by right-click on the project in the Solution Explorer and select \"Manage NuGet Packages...\".",[18,112,113],{},"Click the \"Browse\" tab then search and install packages :",[49,115,116,119,122,125],{},[52,117,118],{},"JavaScriptEngineSwitcher.V8",[52,120,121],{},"React.AspNet",[52,123,124],{},"JavaScriptEngineSwitcher.V8.Native.win-x64",[52,126,127],{},"JavaScriptEngineSwitcher.Extensions.MsDependencyInjection",[86,129,131],{"id":130},"set-up-config",[14,132,133],{},"Set up config",[135,136,138,107],"h4",{"id":137},"in-file-startupcs",[14,139,140],{},"In file Startup.cs",[18,142,143],{},[14,144,145],{},"On the top of this file add the code below",[147,148,153],"pre",{"className":149,"code":151,"language":152},[150],"language-text","using Microsoft.AspNetCore.Http;\n\nusing JavaScriptEngineSwitcher.V8;\n\nusing JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;\n\nusing React.AspNet;\n","text",[154,155,151],"code",{"__ignoreMap":36},[18,157,158],{},[14,159,160],{},"Replace function ConfigureServices with the code below",[147,162,165],{"className":163,"code":164,"language":152},[150],"\u002F\u002F This method gets called by the runtime. Use this method to add services to the container.\npublic void ConfigureServices(IServiceCollection services)\n{\n       services.AddSingleton\u003CIHttpContextAccessor, HttpContextAccessor>();\n       services.AddReact();\n       \u002F\u002F Make sure a JS engine is registered, or you will get an error!\n       services.AddJsEngineSwitcher(options => options.DefaultEngineName =V8JsEngine.EngineName)\n          .AddV8();\n       services.AddControllersWithViews();\n}\n",[154,166,164],{"__ignoreMap":36},[18,168,169],{},[14,170,171],{},"Replace function Configure with the code below",[147,173,176],{"className":174,"code":175,"language":152},[150],"\u002F\u002F This method gets called by the runtime. Use this method to configure the HTTP request pipeline.\npublic void Configure(IApplicationBuilder app, IWebHostEnvironment env)\n{\nif (env.IsDevelopment())\n{\n    app.UseDeveloperExceptionPage();\n}\nelse\n{\n    app.UseExceptionHandler(\"\u002FHome\u002FError\");\n    \u002F\u002F The default HSTS value is 30 days. You may want to change this for production scenarios, see        https:\u002F\u002Faka.ms\u002Faspnetcore-hsts.\n    app.UseHsts();\n }\n app.UseHttpsRedirection();\n app.UseReact(config =>\n {\n });\n app.UseStaticFiles();\n app.UseRouting();\n app.UseAuthorization();\n app.UseEndpoints(endpoints =\n {\n    endpoints.MapControllerRoute(\n    name: \"default\",\n    pattern: \"{controller=Home}\u002F{action=Index}\u002F{id?}\");\n });\n}\n",[154,177,175],{"__ignoreMap":36},[135,179,181],{"id":180},"add-this-to-the-top-of-views_viewimportscshtml",[14,182,183],{},"Add this to the top of Views\\_ViewImports.cshtml",[147,185,188],{"className":186,"code":187,"language":152},[150],"@using React.AspNet\n",[154,189,187],{"__ignoreMap":36},[10,191,193],{"id":192},"features",[14,194,195],{},"Features",[86,197,199,107],{"id":198},"component",[14,200,201],{},"Component",[49,203,204,207,210,213],{},[52,205,206],{},"In React, components act like functions that return HTML components.",[52,208,209],{},"Components are independent and reusable components.",[52,211,212],{},"There are two types of components : Function Component and Class Component.",[52,214,215],{},"Components do the same jobs as functions in JavaScript, but they are independent and return HTML via render function.",[135,217,219],{"id":218},"create-first-component",[14,220,221],{},"Create first component",[18,223,224,107],{},[14,225,226],{},"Create file App.jsx",[31,228],{"className":229,"alt":36,"src":230,"style":231},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19165746\u002FComponent.png","width: 50%;",[18,233,234],{},[14,235,236],{},"Create file App.jsx with the code below",[147,238,241],{"className":239,"code":240,"language":152},[150],"class FisrtComponent extends React.Component {\nrender() {\n     return (\n              \u003Cdiv className=\"component\">\n              Hello, world! This is a component.\n              \u003C\u002Fdiv>\n             );\n         }\n}\n\nReactDOM.render(\u003CFisrtComponent \u002F>, document.getElementById('content'))\n",[154,242,240],{"__ignoreMap":36},[18,244,245],{},[14,246,247],{},"Replace the code of the file index.cshtml with the code below",[147,249,252],{"className":250,"code":251,"language":152},[150],"@{\nLayout = null;\n}\n\n\u003Chtml>\n\u003Chead>\n    \u003Ctitle>Hello React\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n \u003Cdiv id=\"content\">\u003C\u002Fdiv>\n \u003Cscript  src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Freact\u002F16.13.0\u002Fumd\u002Freact.development.js\">       \u003C\u002Fscript>\n \u003Cscript  src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Freact-dom\u002F16.13.0\u002Fumd\u002Freact-dom.development.js\">\u003C\u002Fscript>\n \u003Cscript src=\"https:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fremarkable\u002F1.7.1\u002Fremarkable.min.js\">\u003C\u002Fscript>\n \u003Cscript src=\"@Url.Content(\"~\u002Fjs\u002FApp.jsx\")\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[154,253,251],{"__ignoreMap":36},[18,255,256],{},[14,257,258],{},"At Function Configure in startup.config add the code shown in bold below",[147,260,263],{"className":261,"code":262,"language":152},[150],"app.UseReact(config =>\n{\n    config\n    .AddScript(\"~\u002Fjs\u002FApp.jsx\");\n});\n",[154,264,262],{"__ignoreMap":36},[18,266,267],{},[14,268,269],{},"Run project",[31,271],{"className":272,"alt":36,"src":273,"style":274},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082927\u002FResult1.png","width: 70%;",[86,276,278],{"id":277},"props",[14,279,280],{},"Props",[49,282,283,286,289,292],{},[52,284,285],{},"Props are used to send data to component.",[52,287,288],{},"In React, Props are arguments passed into React components.",[52,290,291],{},"Props are passed to components via HTML attributes.",[52,293,294],{},"Props are constant.",[135,296,298],{"id":297},"using-props",[14,299,300],{},"Using props",[18,302,303],{},"Use props by using this.props to get value of props as the code below",[147,305,308],{"className":306,"code":307,"language":152},[150],"class FisrtComponent extends React.Component {\nrender() {\n        return (\n            \u003Cdiv className=\"Component\">\n                \u003Ch1> Hello, world! This is a component. \u003C\u002Fh1>\n                \u003Ch2> This is data from props : {this.props.value}\u003C\u002Fh2>\n            \u003C\u002Fdiv>\n        );\n    }\n}\n\nReactDOM.render(\u003CFisrtComponent value = \"Props test\" \u002F>, document.getElementById('content'))\n",[154,309,307],{"__ignoreMap":36},[18,311,312],{},[14,313,314],{},"Result",[31,316],{"className":317,"alt":36,"src":318,"style":274},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082948\u002FResult2.png",[86,320,322],{"id":321},"state",[14,323,324],{},"State",[49,326,327,330,333],{},[52,328,329],{},"States same as local variables in a tree component and child components can use the state of the parent component.",[52,331,332],{},"States can make change.",[52,334,335],{},"When the state object changes, the component re-renders.",[135,337,339],{"id":338},"using-state",[14,340,341],{},"Using State",[18,343,344],{},"Create properties of state",[147,346,349],{"className":347,"code":348,"language":152},[150],"constructor(props) {\n        super(props);\n        this.state = {\n            brand: \"Ford\",\n            color: \"Blue\",\n            year: 1994\n        };\n}\n",[154,350,348],{"__ignoreMap":36},[18,352,353],{},"Use this.setState to set value for this state",[147,355,358],{"className":356,"code":357,"language":152},[150],"this.setState({ color:\"Red\" })\n",[154,359,357],{"__ignoreMap":36},[18,361,362],{},"Create function onclick to change state",[147,364,367],{"className":365,"code":366,"language":152},[150],"changeColor = () => { this.setState({ color:\"Red\" }) }\n",[154,368,366],{"__ignoreMap":36},[18,370,371],{},"Add event to button",[147,373,376],{"className":374,"code":375,"language":152},[150],"\u003Cbutton\n          type=\"button\"\n          onClick={this.changeColor}\n>Change Color\u003C\u002Fbutton>\n",[154,377,375],{"__ignoreMap":36},[18,379,380],{},[14,381,314],{},[18,383,384],{},"Before clicked",[31,386],{"className":387,"alt":36,"src":388,"style":231},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082718\u002FResult3.png",[18,390,391],{},"After clicked",[31,393],{"className":394,"alt":36,"src":395,"style":231},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082742\u002FResult4.png",[86,397,399],{"id":398},"more-features",[14,400,401],{},"More features",[49,403,404,409,414],{},[52,405,406],{},[14,407,408],{},"Hook",[52,410,411],{},[14,412,413],{},"Webpack",[52,415,416],{},[14,417,418],{},"ES6",[10,420,422],{"id":421},"references",[14,423,424],{},"References",[49,426,427,435],{},[52,428,429],{},[430,431,432],"a",{"href":432,"rel":433},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fgetting-started.html",[434],"nofollow",[52,436,437],{},[430,438,439],{"href":439,"rel":440},"https:\u002F\u002Freactjs.net\u002Fgetting-started\u002Faspnetcore.html",[434],{"title":36,"searchDepth":442,"depth":442,"links":443},2,[444,445,446,447,448,455,462],{"id":12,"depth":442,"text":16},{"id":26,"depth":442,"text":29},{"id":44,"depth":442,"text":47},{"id":72,"depth":442,"text":75},{"id":81,"depth":442,"text":84,"children":449},[450,452,454],{"id":88,"depth":451,"text":91},3,{"id":103,"depth":451,"text":453},"Install packages ",{"id":130,"depth":451,"text":133},{"id":192,"depth":442,"text":195,"children":456},[457,459,460,461],{"id":198,"depth":451,"text":458},"Component ",{"id":277,"depth":451,"text":280},{"id":321,"depth":451,"text":324},{"id":398,"depth":451,"text":401},{"id":421,"depth":442,"text":424},"tech talk","Briswell Vietnam Co Ltd","2020-11-08","md",{},true,"\u002Fnews\u002Freactjs-net",null,{"title":5,"description":20},"news\u002Freactjs-net","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F08163510\u002Freact-m.png","xW6WWQq1IGagIdvQ6zlul0e9xICDb3CrmPHMXOeTf7A",1785320521510]