- 追加された行はこの色です。
- 削除された行はこの色です。
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>JavaScript#s4081e43]]
-[[戻る>(MV*) UIフレームワーク#s4081e43]]
*目次 [#f787db65]
#contents
*概要 [#dff610b2]
-Facebook社が開発しているSingle Page Application開発用の[[UIサブシステム>#y5519e45]]。
-[[コンポーネント指向>#m9350bfc]]に基づいて効率的にSPAを開発できる。
Facebook社が開発しているSingle Page Application開発用の[[UIサブシステム>#y5519e45]]。
**仕組み [#r8d6de50]
-[[コンポーネント指向>#m9350bfc]]に基づいて効率的に[[SPA>(MV*) UIフレームワーク]]を開発できる。
-[[JSX>#ne8ad84a]]（*.jsx、*.tsx）で作成され、[[Node.js]]開発環境でコンパイルされて*.jsを得る。
**生産性 [#l4225667]
-下記の[[特徴>#d16b27fe]]を見ると、JSのMV*も[[XAML>https://techinfoofmicrosofttech.osscons.jp/index.php?XAML]]的になったなぁという感覚がある。
-ただ、IDEが良くならないとエンプラの要求する生産性にまで上がらなさそうではある。
**エコシステム [#gf43afd7]
-ReactNativeに関しては、Microsoft社が力を入れているように見える。
-また、Facebookが社内の標準開発環境を「Visual Studio Code」に変更するなど。
*特徴 [#d16b27fe]
**Just the UI [#y5519e45]
-View(UI)部分のみを管理する
**コンポーネント指向 [#m9350bfc]
-Reactでは「コンポーネント」を生成し組み合わせていくことでUIを構築する。
-なお、コンポーネントのインスタンスのことを「エレメント」と言う。
***Virtual DOM [#b5a85f5b]
***仮想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]]」でもサポートされている。
-[[JSX>#ne8ad84a]]で記述する。
***Data flow [#i6a6e2f6]
コンポーネント中のデータの流れをProperty -> StateからUI要素へ一方向化している。
-コンポーネント中のデータの流れを
--[[state>#j6338a61]], [[props>#wac86e94]]
-- -> UI要素へ
*ファースト・ステップ [#g5b3c794]
>と、一方向化している。
**インストール [#qc29ece8]
-[[npm]]（[[Node.js>JavaScript#q9fc6e24]]）をインストールしておく。
-詳しくは、[[Flux>#s9dbd4f8]]を参照。
-create-react-app([[npm]] ,etc.の[[Node.js>JavaScript#q9fc6e24]]系のツール)のインストール
**自分の言葉で言うと、 [#ubdf4b16]
npm install -g create-react-app
***経緯 [#gac3c9fc]
-HTML再描画が、Ajaxによって部分描画のDOM操作になり、
-以下は、既定の構成
|#|カテゴリ|ツール/言語|備考|h
|1|開発言語|EcmaScript6|-|
|2|トランスパイラ|Babel|-|
|3|パッケージング|Webpack|・webpack-dev-server&br;・html-webpack-plugin&br;・style-loader|
|4|コード解析|ESLint|-|
|5|テストツール|Jest|-|
-HTML/JavaScriptにはイベントドリブンの仕掛けが整っている。
**サンプルの生成と実行 [#s2cc9cf9]
***生成 [#p6e8a8d3]
サンプルを生成する。
create-react-app react-app
-この土台の上で、リッチなUIサブシステムを実現しようとしたら、
***実行 [#nd9d45b2]
サンプルを実行する。
（サンプルのルートディレクトリで以下コマンドを実行）
npm start
--DOM操作のビルティング・ブロック化が目標になり、
**サンプルの実装 [#v5144bb8]
以下のように実装する。
--これを実現しているのが[[React Fiber>#t1dfc69f]]あたりの仕組みである。
***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
***React Fiber [#t1dfc69f]
-仮想DOMを更新してUIに反映するアルゴリズムをリコンシリエーション（reconciliation）と言う。
-以前は、仮想DOMのツリーを上から再帰的に比較していくという処理だった。
-Fiberでは再帰的な処理をやめて、ReactElementごとの更新処理を~
連結リストにして、一つ一つの更新処理を独立したものとして扱えるようにした。
--同期的な再帰処理を、停止・再開可能な非同期処理（Fiber）に分割した。
--Fiberのスケジューリングが可能になった（インクリメンタルレンダリング）
※ そもそもFiberとは「[[ファイバー (コンピュータ) - Wikipedia>https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%90%E3%83%BC_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF)]]」のこと。
*基本的な事項 [#b58a8b20]
**言語 [#r21e4c1c]
[[JSX>#ne8ad84a]]をサポートする言語を使用する。
***[[Babel>JavaScript#f322ef90]]([[ECMAScript]]) [#ta51c1cc]
-「[[Babel>JavaScript#f322ef90]]」（[[ECMAScript]]）を導入する方法が最も簡単。
-プログラム・ファイルの拡張子は、*.jsx。
***[[TypeScript>JavaScript#kf4fe370]] [#laccb233]
-また、「[[TypeScript>JavaScript#kf4fe370]]」でもサポートされている（TSX）。
-プログラム・ファイルの拡張子は、*.tsx。
**JSX [#ne8ad84a]
画面定義のマークアップ言語
***特徴 [#i7940c50]
JSの拡張言語で、
-React 要素作成する[[仮想DOM>#b5a85f5b]]を、簡便な形式でXMLマークアップのシンタックスを追加する。
-XMLマークアップには、標準のHTML5 + 拡張属性で、HTMLタグとJSXタグが共存する。
-制御構文とXMLマークアップが混在するという意味で、Razor的。
***変数出力 [#zd3c948e]
{変数名}でJavaScript変数を出力
***イベント・ハンドラ [#y2f3d04b]
-基本的に以下のように書く。
<button onClick={()=>this.renderChange()}>切替</button>
-以下は問題がある。
--レンダリング時にclickActionが起動してしまう。
<div onClick={this.clickAction()}>
--thisにアクセスできない。
<div onClick={this.clickAction}>
***属性の指定 [#d3f420c0]
自由に属性を設定可能。
<div>
<MyComponent
myTitle={'タイトル'}
myValue={this.state.value} />
</div>
子コンポーネントから[[props>#wac86e94]].(定義した属性名)と利用。
***Css in JS [#p175ea2a]
-React自信にデザインの機能はないのでCSSを利用する。
-「Css in JS」と言われる考え方が登場し、~
React用のCSSをインポート可能になっている。
-classはclassNameと書く。styleはstyleで良い。
<button className="btn btn-default" style={{color:"gray"}}/>
***コンポーネントの配置 [#o16e4347]
[[JSX>#ne8ad84a]]タグでコンポーネントを設置
-タグ名＝コンポーネントクラス名の
-[[JSX>#ne8ad84a]]タグは頭文字を大文字になる。
<MyComponent />
***コンポーネントのネスト [#h22a25e9]
[[コンポーネントのRender>#w9dbdb36]]内に、子コンポーネントを記述
<SubComponent />
**基本形のコンポーネント [#z184f699]
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
constructor(props, context){
super(props, context)
this.state = { viewText : 'テストページ' }
}
render(){
return (
<div>
<h1>Hello! World.</h1>
<p>このページは{ this.state.viewText }です。</p>
</div>
)
}
}
***extends [#g161dea2]
[[state>#j6338a61]], [[props>#wac86e94]]を使用する場合、React.Componentを継承する。
***export [#w927d04f]
-モジュール化することによってインポート可能なクラスにする。
export class MyComponent extends React.Component {
-defaultも付けると、デフォルトで読み込むモジュールになる
export default class MyComponent extends React.Component {
***import [#s62834cb]
exportでモジュール化したクラスは、importでインポートが可能。
-１クラス、インポート
import { SubComponent1 } from './SubComponent';
-ｎクラス、インポート（１ファイルに複数定義されている場合。
import { SubComponent1, SubComponent2 } from './SubComponent';
***state [#j6338a61]
-コンポーネントの状態を表す変数。
-コードからReact.Componentのプロパティと思われる。
-this.setStateで設定し、this.stateで参照する。
***props [#wac86e94]
-データ（[[state>#j6338a61]]）を親コンポーネントから子コンポーネントに渡す際に使用する。
-変更不可と書かれていることがあるが[[変更通知>#b6de5462]]を使用すれば変更可能。
-コードからReact.Componentのプロパティと思われる。
***constructor [#ha6acf80]
-[[state>#j6338a61]]あり
constructor(props, context) {
super(props, context)
this.state = {
viewText: props.text,
viewFlg: props.defaultFlg,
}
}
-[[state>#j6338a61]]なし~
[[state>#j6338a61]]を使わない、[[props>#wac86e94]]だけのコンポーネントの場合、
constructor(props, context){
super(props, context)
}
>constructorの記述自体を丸々省略できる。
***render [#w9dbdb36]
-生成したいHTML（正確には[[JSX>#ne8ad84a]]）を書く。
-return( の直下は1つのエレメントしか置けない。
-繰り返し処理~
map内にラムダ式を書く。
--配列
items = [
{ value : 'apple' },
{ value : 'orange' },
{ value : 'banana' },
];
--値
return items.map(_item => {
return(
<li>{_item.value}</li>
)
})
--キー、値
return items.map((_item,_key) => {
return(
<li key={_key}>{_item.value}</li>
)
})
-コンポーネントの再描画
--[[state>#j6338a61]]を更新して、コンポーネントを再描画する。
--イベントなどで、上記のthis.stateを変更するとHTMLが再描画される。
class MyComponent extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
viewText: props.text,
viewFlg: props.defaultFlg,
}
}
renderChange() {
// viewFlgの状態を切替(0 <-> 1)
let newFlg = this.state.viewFlg == 1 ? 0 : 1;
this.setState({ viewFlg: newFlg });
}
render() {
return (
<div>
<h1>Hello! World.</h1>
<LeadText viewText={this.state.viewText} viewFlg={this.state.viewFlg} />
<button onClick={()=>this.renderChange()}>切替</button>
</div>
)
}
}
**コンポーネント・ライフサイクル [#x5bcf220]
-Componentの状態の変化に合わせて色々メソッドを呼んでくれる。
-それに合わせて初期化や後始末な処理を書くことが出来る。
***componentWillMount [#f11d1073]
-初期化処理を行う。
-ComponentがDOMツリーに追加される前に一度だけ呼ばれる。
-server-side rendering時にも呼ばれる。
※ [[v16.3以降、deprecated（非推奨）>#f840f7e8]]
***componentDidMount [#md114be1]
-DOMに関わる初期化処理を行う。
-ComponentがDOMツリーに追加された状態で呼ばれる。
-server-side renderingの時には呼ばれない。
***componentWillReceiveProps [#f29ee389]
-[[props>#wac86e94]]が更新される時に呼ばれる。
-Componentが新しくDOMツリーに追加される時には呼ばれない。
-主に、Notification（変更通知）的に使う。
--親Componentの[[state>#j6338a61]]が[[props>#wac86e94]]として渡されていて、
--その値が変化した時に何かしたいときに使用する。
--[[setState>#b6de5462]]すると、描画もされる。
※ [[v16.3以降、deprecated（非推奨）>#f840f7e8]]
***shouldComponentUpdate [#sd9367d7]
-Componentがrerenderされる前に呼ばれる。
-Performanceの向上を目的に実装する。
--trueを返すとVirtualDOMの比較を行いrerenderされる。
--falseを返すとVirtualDOMの比較を行わずにrerenderもされなくなります。
***componentWillUpdate [#s36712f7]
-Component更新前に呼ばれる（初回時には呼ばれない）。
-この中でsetStateを呼ぶことは出来ない（→ [[componentWillReceiveProps>#f29ee389]]）。
***componentDidUpdate [#f11d2bdc]
-Component更新後に呼ばれる（初回時には呼ばれない）。
-DOMの変化にフックして何かしたい場合に使う。
***componentWillUnmount [#a49903a3]
-ComponentがDOMから削除される時に呼ばれる。
-イベントの解除などクリーンアップ処理に使用する。
***参考 [#k9b4c989]
-Qiita
--React.jsのComponent Lifecycle~
https://qiita.com/koba04/items/66e9c5be8f2e31f28461
--React Componentのライフサイクルのまとめと利用用途~
https://qiita.com/yukika/items/1859743921a10d7e3e6b
--Reactが用意しているライフサイクルメソッド7つ~
https://qiita.com/aka_k_root/items/8ac3c33737709fa510cf
--React コンポーネント作成時に非同期通信したいときは componentDidMount に書こう~
https://qiita.com/megane42/items/213e927a2af72530e920
**Component と Container [#m78a648c]
***Presentational Component [#i7081aae]
見た目を担当するコンポーネント
-独自のマークアップとスタイルを持つ。
-アクションやストアの部分は分離される。
-多くの場合
--this.props.childrenとして他に内包され、
--propsとしてデータとコールバックを受け取れる。
-稀に独自の[[state>#j6338a61]]を持つ。~
（それはデータではなくUIの状態として持つ。）
-[[SFC>#j9387807]]として記述できる場合は、[[SFC>#j9387807]]として記述する。
***Container Component [#x2578f6f]
ロジック（物事の振る舞い）に関与するコンポーネント
-通常、ラッピングのdivを除いてDOMマークアップ、スタイルを持たない。
--[[Presentational Component>#i7081aae]]や、~
その他のコンポーネントにデータと振る舞いを提供する。
--基本的に状態保持と処理を行う
---アクション呼び出しなどをコールバック~
として[[Presentational Component>#i7081aae]]に渡す。
---データソースとして機能する傾向がある
-通常、上位コンポーネントを使用して生成される
--React Reduxのconnect
--RelayのcreateContainer
--Flux UtilsのContainer.create
***参考 [#b18096df]
-ComponentとContainerについて - Qiita~
https://qiita.com/tenta1111/items/7b4d2ea1a4d1d2336032
-Presentational and Container Components - Dan Abramov - Medium~
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
**その他のコンポーネント [#c0057ae7]
***状態を持たないコンポーネント（SFC） [#j9387807]
-SFC : Stateless functional components
-[[state>#j6338a61]]を自身で持たないシンプルなコンポーネントの場合、~
React.Componentを継承したクラスの定義は不要。
-以下が不要な場合は、SFCとしてComponentを定義可能。
--[[state>#j6338a61]]の管理
--lifecycle系のメソッド
--[[Context>#b2c7d64b]]、[[refs>#ddbc9230]]
--サードパーティライブラリのインスタンス管理
--パフォーマンスの効率化
-定義
--[[props>#wac86e94]]がない場合
---匿名関数
const Hello = function() {
return <div>Hello XXXX</div>
}
---ラムダ式
const Hello = () => <div>Hello XXXX</div>
---使い方
<Hello />
--[[props>#wac86e94]]がある場合
---匿名関数
const Hello = function(name) {
return <div>Hello name</div>
}
---ラムダ式~
関数の引数でDestructuring
const Hello = ({name}) => <div>Hello {name}</div>
---使い方
<Hello name="XXXX" />
-参考
--Qiita
---ReactのStateless Functional Componentsの書き方~
https://qiita.com/ledsun/items/c577e004561b59f9a7e5
***テンプレート・コンポーネント [#u0271a61]
-定義~
{this.props.children}で子を描画。
// テンプレート・コンポーネント
class TemplateComponent extends React.Component {
render() {
return (
<main>
<header>
<h2>{this.props.title}</h2>
</header>
<div>
{this.props.children}
</div>
<footer>
<p>copyright company</p>
</footer>
</main>
)
}
}
-利用~
TemplateComponentにChildComponentを指定。
// Mainコンポーネント
class MainComponent extends React.Component {
render() {
return (
<section>
<h1>Main Title</h1>
<TemplateComponent title={'コンテンツタイトル'}>
<ChildComponent />
</TemplateComponent>
</section>
)
}
}
**コンポーネントの属性 [#sbf92665]
***ref属性 [#t4a0cd56]
同一コンポーネントのインスタンスを識別する。
*データおよびイベント連携 [#n8b8bac0]
**ベストプラクティス [#w46ead0e]
**親から子 [#dfd6902c]
**その他 [#zfb27b06]
***[[props>#wac86e94]] [#dea212dc]
-基本
***Flux [#s9dbd4f8]
--子側で（利用を）定義
this.props.XXXX
***Redux [#f382342b]
--親側でデータを指定。
<子 XXXX={JavaScriptの値}>
***SharedState [#s3316d0f]
-型指定と既定値
--[[基本形のコンポーネント>#z184f699]]~
・・・
*Componentライブラリ [#k04fc76a]
--[[Stateless functional components>#j9387807]]
Hello.propTypes = {
name: React.PropTypes.string
}
Hello.defaultProps = {
name: 'XXX'
}
***JSX Spread Attributes [#o23213b7]
親コンポーネントが保持しているデータを~
全て子コンポーネントの[[props>#wac86e94]]に渡す。
-子側の定義は不要で、以下のように利用可能。
-親側で[[スプレッド演算子>ECMAScript#ca4641e1]]によりデータを指定。
--任意のデータ
var props = {};
props.foo = x;
props.bar = y;
var component = <子 {...props} />;
--親側のpropsデータ
<子 {...this.props}>
***[[componentWillReceiveProps>#f29ee389]] [#b6de5462]
-親側は、
--this.stateを子の[[props>#dea212dc]]にバインドしておき、
--setStateで[[state>#j6338a61]]の変更を反映する。
-子側は、
--コンポーネントが変更された、新しい[[props>#dea212dc]]を受け取ると、~
[[componentWillReceiveProps>#f29ee389]]が変更通知として実行される。
--[[props>#dea212dc]]の更新をsetStateで反映する。
componentWillReceiveProps(newProps) {
//JSON.stringify(newProps);
this.setState({count: newProps.count});
}
**子から親 [#ubca9a39]
-親のハンドラをthis.propsで子に渡して、~
子からハンドラを呼び出す（引数指定可能）。
-その後、必要に応じて、「[[親から子>#dfd6902c]]」の[[データ連携>#zfb27b06]]を行う。
**参考 [#f279343c]
-Reactでイベントの伝播 - yugr’s diary~
http://yugr.hatenablog.com/entry/2017/11/22/132059
-javascript - Updating state with props on React child component - Stack Overflow~
https://stackoverflow.com/questions/39154967/updating-state-with-props-on-react-child-component
***js STUDIO [#yce6164b]
-React 0.13 日本語リファレンス
--propsの受け渡し~
http://js.studio-kingdom.com/react/guides/transferring_props
--JSXのスプレッド属性~
http://js.studio-kingdom.com/react/guides/jsx_spread
--componentWillReceiveProps~
http://js.studio-kingdom.com/react/component_lifecycle/updating_componentwillreceiveprops
***Qiita [#y1823572]
-React における State と Props の違い~
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50
-今からはじめるReact.js〜propsとstate、それからrefs〜~
https://qiita.com/kuniken/items/a22adda392ccc30011b1
-ざっくり React チュートリアル~
https://qiita.com/pullphone/items/efcaee59cf2a5725c61d
*Css in JS [#a4b204cc]
**概要 [#q52bec77]
**参考 [#h2c34ab1]
-Qiita
--React.js + CSS~
https://qiita.com/koba04/items/0e81a04262e1158dbbe4
-Styling and CSS - React~
https://reactjs.org/docs/faq-styling.html#what-is-css-in-js
*コンポーネント・ライブラリ [#k04fc76a]
**CSS [#lfebe228]
***react-bootstrap [#va73ad58]
BootstrapをReactから使いやすくしたライブラリ。
-BootstrapをReactから使いやすくしたライブラリ。
-インストールと、CSS自体の読み込みが必要。
-参考
--react-bootstrapで書くとコンポーネント的にBootstrapが使えるよ！ | 酒と涙とRubyとRailsと~
https://morizyun.github.io/javascript/react-js-bootstrap-javascript-css-framework.html
***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と提供機能はほとんど同じ。
npm install material-ui --save
**拡張機能 [#y91afda7]
***react-hot-loader（AppContainer） [#uf49a267]
Reactコンポーネントが状態を失うことなく、~
ライブで再ロードされるようにするプラグイン。
***react-router-dom（BrowserRouter） [#lb25a2fc]
https://reacttraining.com/react-router/~
https://reacttraining.com/react-router/web/guides/philosophy
-Router
--BrowserRouter~
通常のRouter
--HashRouter~
URLフラグメント、URLハッシュ値を使用したRouter
-パラメタ
--パラメタを持たないコンポーネント
<Route exact path="/" component={FormInput}/>
--パラメタを持つコンポーネント
---オブジェクト
<Route exact path="/" render={props => <FormInput data={this.state.data} />} />
<p>Data:{ this.state.data }</p>
---URL
<Route path="/:id" component={FormInput}/>
<p>ID:{props.match.params.id}</p>
-タグ
--Link
--Redirect
***isomorphic-fetch（fetch） [#q7ff35d6]
XMLHttpRequest代替のfetch APIのPolyfill（WHATWG Fetch polyfill）。
-Fetch API - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
**データ連携 [#zfb27b06]
***[[Flux]] [#s9dbd4f8]
***[[Redux]] [#f382342b]
***[[Hooks]] [#aac76e99]
**リサイズ・移動など [#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]
高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。
*新機能 [#r156a9a9]
**React. [#a19aa214]
***Fragment [#z490c76f]
-１つのタグにまとめるルートのタグとして使用できる。
-Fragmentタグ自体はレンダリングされない。
-配列も返すことが出来る（ただし、keyが必要）。
***createRef [#ddbc9230]
-[[ref属性>#t4a0cd56]]を定義した要素のRefsを取得する方法の一つ。
-RefsによりDOMやReactコンポーネントへのアクセスが可能となる。
-createRef以外にもcallbackによる取得も可能。
***createContext [#b2c7d64b]
-バケツリレー（prop drilling）問題を解決する。
-react-reduxのProviderとほぼ同様の機能
-ProviderとConsumerというComponentを使う。
-ProviderでwrapしたComponent以下は~
Consumer経由でいつでもProviderに~
設定されたパラメータを[[props>#wac86e94]]で参照できる。
***Suspense [#i1056ede]
-React.Timeoutだったり、React.Placeholderだったりしたもの。
-子コンポーネントでPromiseをthrowすることで、
--子コンポーネントのレンダリングを中断し、
--Promiseの完了時にレンダリングを再実行する。
***lazy [#df509254]
遅延ロード用のコンポーネントをimportするための機能
-JavaScriptファイルを分割ロード
-[[React.Suspense>#i1056ede]]と一緒に利用
***memo [#o60b0999]
FCで[[shouldComponentUpdate>#sd9367d7]]相当のことができる。
**getDerivedStateFromProps [#f840f7e8]
React v16.3以降、ライフサイクルメソッドの
-[[componentWillMount>#f11d1073]]
-[[componentWillReceiveProps>#f29ee389]]
-[[componentWillUpdate>#s36712f7]]
deprecated（非推奨）のため、代用が必要。
**Pointer Events [#w73a6b5e]
**エラー処理 [#f8c84527]
***ErrorBoundary [#u1f4940f]
-this.props.childrenの評価時に発生したエラーを~
親コンポーネントのcomponentDidCatchで取得できる。
-[[React.Suspense>#i1056ede]]で利用されている機構。
***getDerivedStateFromError [#x9eeb388]
*step by step 的な [#q22025df]
**[[Reactのファースト・ステップ]] [#w60e26e0]
**[[Reactのセカンド・ステップ]] [#o22ffa36]
**[[Reactのサード・ステップ]] [#rd8cbb68]
**[[Reactの4thステップ]] [#a3a208f5]
**[[Reactの5thステップ]] [#b5b72a5e]
*[[ReactNative]] [#q3dfb4b6]
*参考 [#i144c1a1]
-React - Wikipedia~
https://ja.wikipedia.org/wiki/React
-React – ユーザインターフェース構築のための JavaScript ライブラリ~
https://ja.reactjs.org/
-Microsoftエンジニア、~
「Officeを完全にJavaScriptで書き直した」~
とツイートして炎上 | ソフトアンテナブログ~
https://www.softantenna.com/wp/software/office-in-javascript/
-Facebookが社内の標準開発環境を変更、~
「Visual Studio Code」のリモート開発拡張~
も強化：独自言語サポートもある - ＠IT~
https://www.atmarkit.co.jp/ait/articles/1911/22/news049.html
**＠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
-Destructuring assignmentのご利用は計画的に~
https://qiita.com/okunokentaro/items/ec3210a1942471fba612
-react-router@v4を使ってみよう：シンプルなtutorial~
https://qiita.com/hoture/items/b4ca1773580317e7112e
-jsFiddleを使ってみる~
https://qiita.com/kazusa-qooq/items/f78791c827ae050ca127
**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/
**マイクロソフト系技術情報 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
-さらに多くのことが変化する – Fluxは新しい”WndProc”である~
https://postd.cc/the-more-things-change/
-Reactを用いたアプリケーションアーキテクチャ：Fluxを再考する~
https://postd.cc/application-architecture-with-react-rethinking-flux/
--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
***Redux [#g12d979f]
-モバイル上のJSフレームワークの実行可能性 – ReactとRedux~
https://postd.cc/viability-of-js-frameworks-on-mobile/
--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
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
