- 追加された行はこの色です。
- 削除された行はこの色です。
「[[.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要素へ一方向化している。
コンポーネント中のデータの流れを[[Property>#dfd6902c]], 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]
以下のように実装する。
***参考 [#t98e3181]
-React初心者が環境構築でつまづかないためのCreate React Appの始め方 - WPJ~
https://www.webprofessional.jp/create-react-app/
***App.jsを書換 [#y605f094]
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/react_app/src/App.js
-Create React AppでReactアプリを開発する : エキサイト公式 エンジニアブログ~
https://blog.excite.co.jp/exdev/25487209/
***Menu.jsを追加 [#k3a1258b]
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/react_app/src/Menu.js
-create-react-app が裏で何をやっているか理解する - Qiita~
https://qiita.com/naohikowatanabe/items/71a8bf477216ef56a5b7
-npm run eject で create-react-app はアプリケーションの長寿を保証する - valid,invalid~
http://ohbarye.hatenablog.jp/entry/2016/11/20/141135
*基本的な事項 [#y42dffa0]
-ASP.NET Core React.jsテンプレート - マイクロソフト系技術情報 Wiki~
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
**react-hot-loader(AppContainer) [#uf49a267]
**react-router-dom(BrowserRouter) [#lb25a2fc]
**isomorphic-fetch(fetch) [#q7ff35d6]
*データおよびイベント連携 [#n8b8bac0]
**ベストプラクティス [#w46ead0e]
***親から子 [#dfd6902c]
-Property
--子側で定義
***親から子(Property) [#dfd6902c]
-子側で定義
this.props.XXXX
--親側
-親側
<子 XXXX={JavaScriptの値}>
***子から親 [#ubca9a39]
**その他 [#zfb27b06]
***Flux [#s9dbd4f8]
***Redux [#f382342b]
-ASP.NET Core React+Reduxテンプレート - マイクロソフト系技術情報 Wiki~
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React%2BRedux%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
***SharedState [#s3316d0f]
*セカンド・ステップ [#v0f1c00a]
**サンプルの実装 [#v5144bb8]
-「[[基本的な事項>#y42dffa0]]」
-「[[データおよびイベント連携>#n8b8bac0]]」
を考慮し、以下のように実装する。
***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
*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
-React初心者のまとめ
--(基本編:1/3)~
https://qiita.com/tomi_shinwatec/items/6563eacd88e63bda5de3
--(基本編:2/3)~
https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0
--(基本編:3/3)~
https://qiita.com/tomi_shinwatec/items/975eceda3d07b152547c
-react-router@v4を使ってみよう:シンプルなtutorial~
https://qiita.com/hoture/items/b4ca1773580317e7112e
**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/
**マイクロソフト系技術情報 Wiki [#yd21a2a3]
-ASP.NET Core SPAテンプレート~
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20SPA%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
--ASP.NET Core React.jsテンプレート~
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React.js%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
--ASP.NET Core React+Reduxテンプレート~
https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20Core%20React%2BRedux%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88