「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
- Facebook社が開発しているSingle Page Application開発用のUIサブシステム。
- コンポーネント指向に基づいて効率的にSPAを開発できる。
- 下記の特徴を見ると、JSのMV*もXAML的になったなぁという感覚がある。
特徴 †
Just the UI †
コンポーネント指向 †
- Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。
- なお、コンポーネントのインスタンスのことを「エレメント」と言う。
Virtual DOM †
- 仮想DOMの構造体表現と、それを用いたdiff/patchアルゴリズム。
- 最終的に生成されるHTMLの複雑なDOMではなく、仮想的なDOMを記述する。
- 2つのツリー構造のdiffを算出して、それをDOMにpatchするアクションを作る。
- JSXで記述する。JSXとは、
- XMLライクのシンタックスを追加する言語拡張（Razorの様な）
- Webページ内でJSXを使用するには、
Data flow †
コンポーネント中のデータの流れをState, Props -> UI要素へ一方向化している。
ファースト・ステップ †
インストール †
npm install -g create-react-app
- 以下は、既定の構成
| # | カテゴリ | ツール/言語 | 備考 |
| 1 | 開発言語 | EcmaScript6 | - |
| 2 | トランスパイラ | Babel | - |
| 3 | パッケージング | Webpack | ・webpack-dev-server
・html-webpack-plugin
・style-loader |
| 4 | コード解析 | ESLint | - |
| 5 | テストツール | Jest | - |
サンプルの生成と実行 †
生成 †
サンプルを生成する。
create-react-app react-app
実行 †
サンプルを実行する。
（サンプルのルートディレクトリで以下コマンドを実行）
npm start
基本的な事項 †
react-hot-loader（AppContainer?） †
react-router-dom（BrowserRouter?） †
isomorphic-fetch（fetch） †
データおよびイベント連携 †
ベストプラクティス †
親から子 †
- Props
不変のデータを親コンポーネントから子コンポーネントに渡す。
- 子側で（利用を）定義
this.props.XXXX
- 親側でデータを指定。
<子 XXXX={JavaScriptの値}>
- JSX Spread Attributes
親コンポーネントが保持しているデータを全て子コンポーネントのPropsに渡す。
- 親側のprops
<子 {...this.props}>
子から親 †
その他 †
Flux †
Redux †
SharedState? †
セカンド・ステップ †
サンプルの実装 †
を考慮し、以下のように実装する。
App.jsを書換 †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/react_app/src/App.js
Menu.jsを追加 †
https://github.com/OpenTouryoProject/SampleProgram/blob/SpaTemplate/Template/SPATemplate/react_app/src/Menu.js
Componentライブラリ †
CSS †
react-bootstrap †
BootstrapをReactから使いやすくしたライブラリ。
Material-UI †
- マテリアルデザインをReact.jsで実現するライブラリ。
- Bootstrapと提供機能はほとんど同じ。
リサイズ・移動など †
React-Resizable †
Drag&Dropで画面項目をリサイズ
React-Draggable †
Drag&Dropで画面項目を移動
UIコンポーネント †
React Contextmenu †
右クリックでメニューを表示する
React Tree Menu Component †
ツリーメニュー
rc-calendar †
カレンダーでの日付表示、日付入力機能
react-big-calendar †
スケジューラ用途のカレンダー
React Bootstrap Table †
高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。
参考 †
＠IT †
Qiita †
Schoo †
学べる生放送コミュニケーションサービス
POSTD †
create-react-app †
State と Props †
- React 0.13 日本語リファレンス | js STUDIO
Component Lifecycle †
データ連携 †
Flux †
Redux †
マイクロソフト系技術情報 Wiki †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
