「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>JavaScript#s4081e43]] *目次 [#f787db65] #contents *概要 [#dff610b2] -Facebook社が開発しているSingle Page Application開発用の[[UIサブシステム>#y5519e45]]。 -[[コンポーネント指向>#m9350bfc]]に基づいて効率的にSPAを開発できる。 -下記の[[特徴>#d16b27fe]]を見ると、JSのMV*も[[XAML>https://techinfoofmicrosofttech.osscons.jp/index.php?XAML]]的になったなぁという感覚がある。 *特徴 [#d16b27fe] **Just the UI [#y5519e45] -View(UI)部分のみを管理する **コンポーネント指向 [#m9350bfc] -Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。 -なお、コンポーネントのインスタンスのことを「エレメント」と言う。 ***Virtual DOM [#b5a85f5b] -設計と速度が両立すると言われている。 -仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。 --最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。 --2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。 -JSXで記述する。JSXとは、 --XMLライクのシンタックスを追加する言語拡張(Razorの様な) --Webページ内でJSXを使用するには、 ---「[[Babel>JavaScript#f322ef90]]」([[ECMAScript]])を導入する方法が最も簡単。 ---また、「[[TypeScript>JavaScript#kf4fe370]]」でもサポートされている。 ***Data flow [#i6a6e2f6] コンポーネント中のデータの流れをProperty -> StateからUI要素へ一方向化している。 *ファースト・ステップ [#g5b3c794] **インストール [#qc29ece8] -[[npm]]([[Node.js>JavaScript#q9fc6e24]])をインストールしておく。 -create-react-app([[npm]] ,etc.の[[Node.js>JavaScript#q9fc6e24]]系のツール)のインストール npm install -g create-react-app -以下は、既定の構成 |#|カテゴリ|ツール/言語|備考|h |1|開発言語|EcmaScript6|-| |2|トランスパイラ|Babel|-| |3|パッケージング|Webpack|・webpack-dev-server&br;・html-webpack-plugin&br;・style-loader| |4|コード解析|ESLint|-| |5|テストツール|Jest|-| **サンプルの生成と実行 [#s2cc9cf9] ***生成 [#p6e8a8d3] サンプルを生成する。 create-react-app react-app ***実行 [#nd9d45b2] サンプルを実行する。 (サンプルのルートディレクトリで以下コマンドを実行) npm start **サンプルの実装 [#v5144bb8] 以下のように実装する。 ***App.jsを書換 [#y605f094] https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/react_app/src/App.js ***Menu.jsを追加 [#k3a1258b] https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/react_app/src/Menu.js *データおよびイベント連携 [#n8b8bac0] **ベストプラクティス [#w46ead0e] **その他 [#zfb27b06] ***Flux [#s9dbd4f8] ***Redux [#f382342b] ***SharedState [#s3316d0f] *Componentライブラリ [#k04fc76a] **CSS [#lfebe228] ***react-bootstrap [#va73ad58] BootstrapをReactから使いやすくしたライブラリ。 ***Material-UI [#vf8e9959] -[[マテリアルデザイン>https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3]]をReact.jsで実現するライブラリ。 -Bootstrapと提供機能はほとんど同じ。 **リサイズ・移動など [#y7cd5e1e] ***React-Resizable [#z0639cdb] Drag&Dropで画面項目をリサイズ ***React-Draggable [#w31b0555] Drag&Dropで画面項目を移動 **UIコンポーネント [#rfb0d19a] ***React Contextmenu [#u14123db] 右クリックでメニューを表示する ***React Tree Menu Component [#kcb92783] ツリーメニュー ***rc-calendar [#u805d6e9] カレンダーでの日付表示、日付入力機能 ***react-big-calendar [#g2a3e4d9] スケジューラ用途のカレンダー ***React Bootstrap Table [#s62d970a] 高機能テーブルコンポーネント(ソートやフィルタリング、ページジング)。 *参考 [#i144c1a1] **@IT [#cb9f8a95] -いまさら聞けないReact、Virtual DOM、JSX超入門 (1/3)~ http://www.atmarkit.co.jp/ait/articles/1607/26/news138.html **Qiita [#sd8946f9] -reactjsに関するxxxx件の投稿~ https://qiita.com/tags/reactjs -なぜ仮想DOMという概念が俺達の魂を震えさせるのか~ https://qiita.com/mizchi/items/4d25bc26def1719d52e6 **Schoo [#ybde9b1d] 学べる生放送コミュニケーションサービス -React.js入門~ https://schoo.jp/class/3437 -React.js実践入門~ https://schoo.jp/class/3628 **POSTD [#u16bf14e] -生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず…~ https://postd.cc/learn-raw-react-no-jsx-flux-es6-webpack/ -大規模Reactアプリケーションを構築するためのベストプラクティス~ https://postd.cc/best-practices-for-building-large-react-applications/ -Web開発の未来 – React、FalcorおよびES6~ https://postd.cc/future-of-the-web-react-falcor/ ***Flux [#v7718b51] -FacebookのFluxアーキテクチャの始め方 --Part 1~ https://postd.cc/introduction-to-facebooks-flux-architecture-1/ --Part 2~ https://postd.cc/introduction-to-facebooks-flux-architecture2/ -さらに多くのことが変化する – Fluxは新しい”WndProc”である~ https://postd.cc/the-more-things-change/ -Reactを用いたアプリケーションアーキテクチャ:Fluxを再考する~ https://postd.cc/application-architecture-with-react-rethinking-flux/ ***Redux [#g12d979f] -モバイル上のJSフレームワークの実行可能性 – ReactとRedux~ https://postd.cc/viability-of-js-frameworks-on-mobile/