[{"data":1,"prerenderedAt":468},["ShallowReactive",2],{"news-item-\u002Fvi\u002Fnews\u002Freactjs-net":3},{"id":4,"title":5,"body":6,"category":455,"created by":456,"date":457,"description":458,"extension":459,"meta":460,"navigation":461,"path":462,"sections":463,"seo":464,"stem":465,"thumbnail":466,"__hash__":467},"content_vi\u002Fvi\u002Fnews\u002Freactjs-net.md","ReactJs.NET",{"type":7,"value":8,"toc":435},"minimark",[9,17,21,24,30,39,42,48,70,76,79,85,92,97,101,104,107,121,127,134,139,149,154,160,165,171,177,183,189,196,210,216,221,226,231,237,242,248,253,259,264,269,275,289,295,298,304,309,313,319,330,336,339,345,348,354,357,363,366,372,376,379,383,386,390,396,413,419],[10,11,13],"h2",{"id":12},"reactjs",[14,15,16],"strong",{},"REACTJS",[18,19,20],"p",{},"React là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng giao diện người dùng. React cho tốc độ phản hồi tuyệt vời khi người dùng nhập bằng phương pháp mới ( JSX) để hiển thị trang web. React cho phép các nhà phát triển tạo các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang.",[18,22,23],{},"Mục đích chính của React là nhanh, có thể mở rộng và đơn giản. Tuy nhiên, React chỉ hoạt động trên giao diện người dùng trong ứng dụng.React tương ứng với View trong mẫu MVC. Ngoài ra, nó có thể được sử dụng với các thư viện JavaScript khác hoặc các framework như: Angular JS trong 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],{},"Trong React, ngoài việc sử dụng JavaScript thuần để tạo mẫu, nó còn sử dụng JSX để tốc độ nhanh hơn. JSX là một ngôn ngữ cho phép viết mã HTML trong JavaScript. Khác với JavaScript, JSX là một statically-typed, có nghĩa là nó được biên dịch trước khi chạy,giống như Java, C++ . Vì thế lỗi được phát hiện ngay trong quá trình biên dịch.",[10,43,45],{"id":44},"tại-sao-sử-dụng-reactjs",[14,46,47],{},"Tại sao sử dụng ReactJs?",[49,50,51,58,64],"ul",{},[52,53,54,57],"li",{},[14,55,56],{},"Sự đơn giản :"," React sử dụng một cú pháp đặc biệt được gọi là JSX cho phép kết hợp HTML với JavaScript.",[52,59,60,63],{},[14,61,62],{},"Dễ học :"," Bất cứ ai có kiến thức cơ bản về lập trình đều có thể dễ dàng hiểu được React. Với React, bạn chỉ cần có kiến thức cơ bản về CSS, JS và HTML.",[52,65,66,69],{},[14,67,68],{},"Hiệu suất cùng với Virtual DOM :"," Khi bạn hiển thị một phần tử của JSX, mọi đối tượng virtual DOM đều được cập nhập.",[10,71,73],{"id":72},"reactjsnet",[14,74,75],{},"REACTJS.NET",[18,77,78],{},"ReactJS.NET giúp việc sử dụng React cho C ## và các ngôn ngữ .NET khác trở nên dễ dàng hơn, đặc biệt là cho  ASP.NET MVC (mặc dù nó cũng hoạt động với các môi trường khác). ReactJS.NET hỗ trợ cả ASP.NET 4 (với MVC 4 hoặc 5) và ASP.NET Core MVC. Ngoài ra, ReactJS.NET là nền tảng đa nền tảng nên nó có thể chạy trên Linux thông qua Mono hoặc .NET Core.",[10,80,82],{"id":81},"bắt-đầu-ứng-dụng-reactjsnet-với-aspnet-core-mvc",[14,83,84],{},"Bắt đầu ứng dụng ReactJS.NET với ASP.NET Core MVC",[86,87,89],"h3",{"id":88},"tạo-một-dự-án-aspnet-core-mvc-mới",[14,90,91],{},"Tạo một dự án ASP.NET Core MVC mới",[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",[18,102,103],{},"Đi đến Nuget Package Manager bằng cách nhấn chuột phải vào dự án ở trong Solution Explorer and chọn \"Manage NuGet Packages...\".",[18,105,106],{},"Nhấn \"Browse\" sau đó tìm và cài đặt các gói :",[49,108,109,112,115,118],{},[52,110,111],{},"JavaScriptEngineSwitcher.V8",[52,113,114],{},"React.AspNet",[52,116,117],{},"JavaScriptEngineSwitcher.V8.Native.win-x64",[52,119,120],{},"JavaScriptEngineSwitcher.Extensions.MsDependencyInjection",[86,122,124],{"id":123},"cài-đặt-cấu-hình",[14,125,126],{},"Cài đặt cấu hình",[128,129,131],"h4",{"id":130},"tại-file-startupcs",[14,132,133],{},"Tại file Startup.cs",[18,135,136],{},[14,137,138],{},"Ở trên cùng của file Startup.cs thêm đoạn code phía dưới",[140,141,146],"pre",{"className":142,"code":144,"language":145},[143],"language-text","using Microsoft.AspNetCore.Http;\n\nusing JavaScriptEngineSwitcher.V8;\n\nusing JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;\n\nusing React.AspNet;\n","text",[147,148,144],"code",{"__ignoreMap":36},[18,150,151],{},[14,152,153],{},"Thay đổi hàm ConfigureServices bằng đoạn code bên dưới",[140,155,158],{"className":156,"code":157,"language":145},[143],"\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",[147,159,157],{"__ignoreMap":36},[18,161,162],{},[14,163,164],{},"Thay đổi hàm Configure bằng đoạn code bên dưới",[140,166,169],{"className":167,"code":168,"language":145},[143],"\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 });\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",[147,170,168],{"__ignoreMap":36},[128,172,174],{"id":173},"thêm-vào-trên-cùng-của-file-views_viewimportscshtml",[14,175,176],{},"Thêm vào trên cùng của file Views\\_ViewImports.cshtml",[140,178,181],{"className":179,"code":180,"language":145},[143],"@using React.AspNet\n",[147,182,180],{"__ignoreMap":36},[10,184,186],{"id":185},"các-đặc-trưng",[14,187,188],{},"Các đặc trưng",[86,190,192,195],{"id":191},"component",[14,193,194],{},"Component"," ",[49,197,198,201,204,207],{},[52,199,200],{},"Trong React, các Component hoạt động giống như các hàm trả về các Component HTML.",[52,202,203],{},"Các Component là các Component độc lập và có thể tái sử dụng.",[52,205,206],{},"Có hai loại Component: Component Function và Component Class.",[52,208,209],{},"Các Component thực hiện các công việc tương tự như các hàm trong Javascript, nhưng chúng độc lập và trả về HTML thông qua hàm render.",[128,211,213],{"id":212},"tạo-component-đầu-tiên",[14,214,215],{},"Tạo component đầu tiên",[18,217,218,195],{},[14,219,220],{},"Tạo file App.jsx",[31,222],{"className":223,"alt":36,"src":224,"style":225},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19165746\u002FComponent.png","width: 50%;",[18,227,228,195],{},[14,229,230],{},"Tạo file App.jsx với đoạn code phía dưới",[140,232,235],{"className":233,"code":234,"language":145},[143],"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",[147,236,234],{"__ignoreMap":36},[18,238,239],{},[14,240,241],{},"Thay thế mã code của file index.cshtml bằng đoạn code bên dưới",[140,243,246],{"className":244,"code":245,"language":145},[143],"@{\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",[147,247,245],{"__ignoreMap":36},[18,249,250],{},[14,251,252],{},"Tại hàm Configure trong file startup.config thêm đoạn code được in đậm bên dưới",[140,254,257],{"className":255,"code":256,"language":145},[143],"app.UseReact(config =>\n{\n    config\n    .AddScript(\"~\u002Fjs\u002FApp.jsx\");\n});\n",[147,258,256],{"__ignoreMap":36},[18,260,261],{},[14,262,263],{},"Chạy dự án",[31,265],{"className":266,"alt":36,"src":267,"style":268},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082927\u002FResult1.png","width: 70%;",[86,270,272],{"id":271},"props",[14,273,274],{},"Props",[49,276,277,280,283,286],{},[52,278,279],{},"Props được sử dụng để truyền dữ liệu vào component.",[52,281,282],{},"Trong React, Props là các đối số được truyền vào các component React.",[52,284,285],{},"Props được chuyển đến các component thông qua các thuộc tính HTML.",[52,287,288],{},"Props có giá trị cố định không thể thay đổi.",[128,290,292],{"id":291},"sử-dụng-props",[14,293,294],{},"Sử dụng props",[18,296,297],{},"Sử dụng props bằng cách sử dụng this.props để lấy giá trị của props giống với đoạn code bên dưới",[140,299,302],{"className":300,"code":301,"language":145},[143],"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",[147,303,301],{"__ignoreMap":36},[18,305,306],{},[14,307,308],{},"Kết quả",[31,310],{"className":311,"alt":36,"src":312,"style":268},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082948\u002FResult2.png",[86,314,316],{"id":315},"state",[14,317,318],{},"State",[49,320,321,324,327],{},[52,322,323],{},"Các state giống như các biến cục bộ trong một cây component và các component con có thể sử dụng state của component mẹ.",[52,325,326],{},"Các state có thể thay đổi.",[52,328,329],{},"Khi đối tượng state thay đổi, component sẽ hiển thị lại.",[128,331,333],{"id":332},"sử-dụng-state",[14,334,335],{},"Sử dụng State",[18,337,338],{},"Tạo các thuộc tính của state",[140,340,343],{"className":341,"code":342,"language":145},[143],"constructor(props) {\n        super(props);\n        this.state = {\n            brand: \"Ford\",\n            color: \"Blue\",\n            year: 1994\n        };\n}\n",[147,344,342],{"__ignoreMap":36},[18,346,347],{},"Sử dụng this.setState để set giá trị cho những state này",[140,349,352],{"className":350,"code":351,"language":145},[143],"this.setState({ color:\"Red\" })\n",[147,353,351],{"__ignoreMap":36},[18,355,356],{},"Tạo hàm onclick để thay đổi state",[140,358,361],{"className":359,"code":360,"language":145},[143],"changeColor = () => { this.setState({ color:\"Red\" }) }\n",[147,362,360],{"__ignoreMap":36},[18,364,365],{},"Thêm sự kiện cho nút nhấn",[140,367,370],{"className":368,"code":369,"language":145},[143],"\u003Cbutton\n          type=\"button\"\n          onClick={this.changeColor}\n>Change Color\u003C\u002Fbutton>\n",[147,371,369],{"__ignoreMap":36},[18,373,374],{},[14,375,308],{},[18,377,378],{},"Trước khi nhấn nút",[31,380],{"className":381,"alt":36,"src":382,"style":225},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082718\u002FResult3.png",[18,384,385],{},"Sau khi nhấn nút",[31,387],{"className":388,"alt":36,"src":389,"style":225},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082742\u002FResult4.png",[86,391,393],{"id":392},"các-đặc-trưng-khác",[14,394,395],{},"Các đặc trưng khác",[49,397,398,403,408],{},[52,399,400],{},[14,401,402],{},"Hook",[52,404,405],{},[14,406,407],{},"Webpack",[52,409,410],{},[14,411,412],{},"ES6",[10,414,416],{"id":415},"tài-liệu-tham-khảo",[14,417,418],{},"Tài liệu tham khảo",[49,420,421,429],{},[52,422,423],{},[424,425,426],"a",{"href":426,"rel":427},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fgetting-started.html",[428],"nofollow",[52,430,431],{},[424,432,433],{"href":433,"rel":434},"https:\u002F\u002Freactjs.net\u002Fgetting-started\u002Faspnetcore.html",[428],{"title":36,"searchDepth":436,"depth":436,"links":437},2,[438,439,440,441,442,447,454],{"id":12,"depth":436,"text":16},{"id":26,"depth":436,"text":29},{"id":44,"depth":436,"text":47},{"id":72,"depth":436,"text":75},{"id":81,"depth":436,"text":84,"children":443},[444,446],{"id":88,"depth":445,"text":91},3,{"id":123,"depth":445,"text":126},{"id":185,"depth":436,"text":188,"children":448},[449,451,452,453],{"id":191,"depth":445,"text":450},"Component ",{"id":271,"depth":445,"text":274},{"id":315,"depth":445,"text":318},{"id":392,"depth":445,"text":395},{"id":415,"depth":436,"text":418},"tech talk","Briswell Vietnam Co Ltd","2020-11-08","React là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng giao diện người dùng. React cho tốc độ phản hồi tuyệt vời khi người dùng nhập bằng phương pháp mới ( JSX) để hiển thị trang web. React cho phép các nhà phát triển tạo các ứng dụng web lớn có thể thay đổi dữ liệu mà không cần tải lại trang. Mục đích chính của React là nhanh, có thể mở rộng và đơn giản.","md",{},true,"\u002Fvi\u002Fnews\u002Freactjs-net",null,{"title":5,"description":458},"vi\u002Fnews\u002Freactjs-net","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F08163510\u002Freact-m.png","1VXMSotlwz8Gl_qdM-4X7WPa2DhJPKjM5WbkUSxDCGI",1785320527314]