[{"data":1,"prerenderedAt":469},["ShallowReactive",2],{"news-item-\u002Fja\u002Fnews\u002Freactjs-net":3},{"id":4,"title":5,"body":6,"category":456,"created by":457,"date":458,"description":459,"extension":460,"meta":461,"navigation":462,"path":463,"sections":464,"seo":465,"stem":466,"thumbnail":467,"__hash__":468},"content_ja\u002Fja\u002Fnews\u002Freactjs-net.md","ReactJs.NET",{"type":7,"value":8,"toc":436},"minimark",[9,17,21,24,30,39,42,48,70,76,79,85,92,97,104,109,112,115,129,134,141,146,156,161,167,172,178,184,190,195,200,214,219,224,229,234,240,245,251,256,262,267,272,278,292,298,301,307,312,316,322,333,339,342,348,351,357,360,366,369,375,379,382,386,389,393,398,415,420],[10,11,13],"h2",{"id":12},"reactjs",[14,15,16],"strong",{},"REACTJS",[18,19,20],"p",{},"Reactはユーザー・インターフェースを作るためのオープンソースのJavaScriptライブラリです。JSXという新しい実装方法を使ってWebを表示させる場合に素晴らしい応答速度を提供してくれます。Reactでは、ページをリロードせずにデータを切り替える大きいWebアプリを開発できます。",[18,22,23],{},"Reactの主な目的としては、応答が早い、拡張可能、簡単です。しかし、Reactはアプリのユーザー・インターフェースのみに機能します。ReactはMVCテンプレートのViewに相当します。また、MVCの Angular JSといったフレームワークと他のJavaScriptライブラリを組んで使うことができます。",[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],{},"Reactにおいては、テンプレートを作るには、純粋なJavaScriptの他に、JSXを使って応答速度を上げます。JSXはJavaScriptにHTMLのコードを作れる言語ですが、JavaScriptとは異なり、静的型付け、すなわち、実行前に、JavaやC++のようにコンパイルされるということです。そのため、不具合はコンパイル時に発現できます。",[10,43,45],{"id":44},"なぜreactjsを用いるか",[14,46,47],{},"なぜReactJsを用いるか",[49,50,51,58,64],"ul",{},[52,53,54,57],"li",{},[14,55,56],{},"簡単性："," ReactはJSXと呼ばれる特殊なシンタックスを用いて、HTMLとJavaScriptを組み合わせることができます。",[52,59,60,63],{},[14,61,62],{},"習得容易性："," プログラミング知識を持っている方はどなたでもReactのことを容易に理解できます。 Reactを学ぶにはCSS、JS、そしてHTMLの基礎知識さえ持っていればいいです。",[52,65,66,69],{},[14,67,68],{},"仮想DOMを導入したパフォーマンス向上："," JSXの要素をレンダリングした時、仮想DOMのオブジェクトは全て更新されます。",[10,71,73],{"id":72},"reactjsnet",[14,74,75],{},"REACTJS.NET",[18,77,78],{},"ReactJS.NETは、他の環境で動作しますが、C#および、特にASP.NET MVCをはじめとする他の.NET言語にReactを簡単に使うことをサポートしてくれます。ReactJS.NETはASP.NET 4 （MVC 4か5）と ASP.NET Core MVCをサポートしています。他に、ReactJS.NETはマルチプラットフォームであり、LinuxにてMonoあるいは.NET Coreを通して動作します。",[10,80,82],{"id":81},"aspnet-core-mvcを使ったreactjsnetアプリの開発",[14,83,84],{},"ASP.NET Core MVCを使ったReactJS.NETアプリの開発",[86,87,89],"h3",{"id":88},"aspnet-core-mvcのプロジェクトの作成",[14,90,91],{},"ASP.NET Core MVCのプロジェクトの作成",[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",[18,98,99,103],{},[31,100],{"className":101,"alt":36,"src":102,"style":38},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19161119\u002FMVC2.png"," ",[86,105,107],{"id":106},"パッケージインストール",[14,108,106],{},[18,110,111],{},"Solution Explorerにあるプロセスを右クリックして、Nuget Package Managerに辿ってから「Manage NuGet Packages...」を選択してください。",[18,113,114],{},"「Browse」タブを押下して、以下のパッケージを探してインストールしておいてください。",[49,116,117,120,123,126],{},[52,118,119],{},"JavaScriptEngineSwitcher.V8",[52,121,122],{},"React.AspNet",[52,124,125],{},"JavaScriptEngineSwitcher.V8.Native.win-x64",[52,127,128],{},"JavaScriptEngineSwitcher.Extensions.MsDependencyInjection",[86,130,132],{"id":131},"コンフィグ設定",[14,133,131],{},[135,136,138],"h4",{"id":137},"startupcs",[14,139,140],{},"Startup.cs",[18,142,143],{},[14,144,145],{},"Startup.csの一番上に以下のコードを追加してください。",[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],{},"ConfigureServices関数を以下のように修正してください。",[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],{},"Configure関数を以下のように修正してください。",[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 });\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},"views_viewimportscshtmlの一番上に以下のコードを追加してください",[14,182,183],{},"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},"特徴",[14,194,192],{},[86,196,198],{"id":197},"コンポーネント",[14,199,197],{},[49,201,202,205,208,211],{},[52,203,204],{},"Reactにおいて、コンポーネントはHTMLのコンポーネントを返却する関数として機能します。",[52,206,207],{},"コンポーネントは独立した再利用できる部品です。",[52,209,210],{},"関数コンポーネントとクラスコンポーネントがあります。",[52,212,213],{},"コンポーネントは JavaScript の関数と似ていますが、独立してHTMLへRender関数経由で返却します。",[135,215,217],{"id":216},"最初のコンポーネント作成",[14,218,216],{},[18,220,221],{},[14,222,223],{},"App.jsxの作成",[31,225],{"className":226,"alt":36,"src":227,"style":228},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F19165746\u002FComponent.png","width: 50%;",[18,230,231],{},[14,232,233],{},"App.jsxを以下のようなコードで作成してください。",[147,235,238],{"className":236,"code":237,"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,239,237],{"__ignoreMap":36},[18,241,242],{},[14,243,244],{},"index.cshtmlを以下のように修正してください。",[147,246,249],{"className":247,"code":248,"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,250,248],{"__ignoreMap":36},[18,252,253],{},[14,254,255],{},"startup.configのConfigure関数に以下の太い文字のコードを追加してください。",[147,257,260],{"className":258,"code":259,"language":152},[150],"app.UseReact(config =>\n{\n    config\n    .AddScript(\"~\u002Fjs\u002FApp.jsx\");\n});\n",[154,261,259],{"__ignoreMap":36},[18,263,264],{},[14,265,266],{},"プロジェクト実行",[31,268],{"className":269,"alt":36,"src":270,"style":271},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082927\u002FResult1.png","width: 70%;",[86,273,275],{"id":274},"props",[14,276,277],{},"Props",[49,279,280,283,286,289],{},[52,281,282],{},"Propsはコンポーネントへデータを送信するために使われます。",[52,284,285],{},"ReactにおいてPropsは引数としてReactコンポーネントに引き継がれます。",[52,287,288],{},"PropsはHTMLの属性でコンポーネントへ引き継がれます。",[52,290,291],{},"Propsは値が固定で変更不可です。",[135,293,295],{"id":294},"propsの使い方",[14,296,297],{},"Propsの使い方",[18,299,300],{},"以下のようにthis.propsを使ってPropsの値を取得してください。",[147,302,305],{"className":303,"code":304,"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,306,304],{"__ignoreMap":36},[18,308,309],{},[14,310,311],{},"結果",[31,313],{"className":314,"alt":36,"src":315,"style":271},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082948\u002FResult2.png",[86,317,319],{"id":318},"state",[14,320,321],{},"State",[49,323,324,327,330],{},[52,325,326],{},"Stateはコンポーネント・ツリーのロカール変数と似ています。親コンポーネントのStateを子コンポーネントが使えます。",[52,328,329],{},"Stateは可変です。",[52,331,332],{},"Stateは変更した時、コンポーネントが再描画されます。",[135,334,336],{"id":335},"stateの使い方",[14,337,338],{},"Stateの使い方",[18,340,341],{},"以下のようにStateの属性を作成します。",[147,343,346],{"className":344,"code":345,"language":152},[150],"constructor(props) {\n        super(props);\n        this.state = {\n            brand: \"Ford\",\n            color: \"Blue\",\n            year: 1994\n        };\n}\n",[154,347,345],{"__ignoreMap":36},[18,349,350],{},"以下のようにthis.setStateを使ってStateの値を設定します。",[147,352,355],{"className":353,"code":354,"language":152},[150],"this.setState({ color:\"Red\" })\n",[154,356,354],{"__ignoreMap":36},[18,358,359],{},"以下のようにstateの切り替えに使われるＯnclick関数を作成します。",[147,361,364],{"className":362,"code":363,"language":152},[150],"changeColor = () => { this.setState({ color:\"Red\" }) }\n",[154,365,363],{"__ignoreMap":36},[18,367,368],{},"以下のようにイベントをボタンに追加します。",[147,370,373],{"className":371,"code":372,"language":152},[150],"\u003Cbutton\n          type=\"button\"\n          onClick={this.changeColor}\n>Change Color\u003C\u002Fbutton>\n",[154,374,372],{"__ignoreMap":36},[18,376,377],{},[14,378,311],{},[18,380,381],{},"押下前",[31,383],{"className":384,"alt":36,"src":385,"style":228},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082718\u002FResult3.png",[18,387,388],{},"押下後",[31,390],{"className":391,"alt":36,"src":392,"style":228},[34,35],"https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F10\u002F20082742\u002FResult4.png",[86,394,396],{"id":395},"その他の特徴",[14,397,395],{},[49,399,400,405,410],{},[52,401,402],{},[14,403,404],{},"Hook",[52,406,407],{},[14,408,409],{},"Webpack",[52,411,412],{},[14,413,414],{},"ES6",[10,416,418],{"id":417},"参照元",[14,419,417],{},[49,421,422,430],{},[52,423,424],{},[425,426,427],"a",{"href":427,"rel":428},"https:\u002F\u002Freactjs.org\u002Fdocs\u002Fgetting-started.html",[429],"nofollow",[52,431,432],{},[425,433,434],{"href":434,"rel":435},"https:\u002F\u002Freactjs.net\u002Fgetting-started\u002Faspnetcore.html",[429],{"title":36,"searchDepth":437,"depth":437,"links":438},2,[439,440,441,442,443,449,455],{"id":12,"depth":437,"text":16},{"id":26,"depth":437,"text":29},{"id":44,"depth":437,"text":47},{"id":72,"depth":437,"text":75},{"id":81,"depth":437,"text":84,"children":444},[445,447,448],{"id":88,"depth":446,"text":91},3,{"id":106,"depth":446,"text":106},{"id":131,"depth":446,"text":131},{"id":192,"depth":437,"text":192,"children":450},[451,452,453,454],{"id":197,"depth":446,"text":197},{"id":274,"depth":446,"text":277},{"id":318,"depth":446,"text":321},{"id":395,"depth":446,"text":395},{"id":417,"depth":437,"text":417},"tech talk","Briswell Vietnam Co Ltd","2020-11-08","Reactはユーザー・インターフェースを作るためのオープンソースのJavaScriptライブラリです。JSXという新しい実装方法を使ってWebを表示させる場合に素晴らしい応答速度を提供してくれます。Reactでは、ページをリロードせずにデータを切り替える大きいWebアプリを開発できます。Reactの主な目的としては、応答が早い、拡張可能、簡単です。しかし、Reactはアプリのユーザー・インターフェースのみに機能します。","md",{},true,"\u002Fja\u002Fnews\u002Freactjs-net",null,{"title":5,"description":459},"ja\u002Fnews\u002Freactjs-net","https:\u002F\u002Fhomepage-media.s3.ap-southeast-1.amazonaws.com\u002Fwp-content\u002Fuploads\u002F2020\u002F11\u002F08163510\u002Freact-m.png","RghOa2Dbk5Wg6_tBoLY83VdYEsM7v0s85AmO6Vi8iXE",1785320532888]