![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。 目次 †概要 †
特徴 †Just the UI †
コンポーネント指向 †
仮想DOM †
Data flow †
基本的な事項 †言語 †JSXをサポートする言語を使用する。 Babel(ECMAScript) †
TypeScript †
JSX †画面定義のマークアップ言語 特徴 †JSの拡張言語で、
変数出力 †{変数名}でJavaScript変数を出力 イベント・ハンドラ †
属性の指定 †自由に属性を設定可能。 <div>
<MyComponent
myTitle={'タイトル'}
myValue={this.state.value} />
</div>
子コンポーネントからprops.(定義した属性名)と利用。 Css in JS †
コンポーネントの配置 †JSXタグでコンポーネントを設置
<MyComponent /> コンポーネントのネスト †コンポーネントのRender内に、子コンポーネントを記述 <SubComponent /> 基本形のコンポーネント †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 †state, propsを使用する場合、React.Componentを継承する。 export †
import †exportでモジュール化したクラスは、importでインポートが可能。
state †
props †
constructor †
render †
その他のコンポーネント †状態を持たないコンポーネント †Stateless functional components stateを自身で持たないシンプルなコンポーネントの場合、
テンプレート・コンポーネント †
コンポーネントの属性 †refs †同一コンポーネントのインスタンスを識別する。 データおよびイベント連携 †親から子 †props †
JSX Spread Attributes †親コンポーネントが保持しているデータを
componentWillReceiveProps? †
子から親 †
参考 †
js STUDIO †
Qiita †
コンポーネント †Stateless Functional Components †概要 †参考 †
コンポーネント・ライフサイクル †概要 †参考 †
Css in JS †概要 †参考 †
コンポーネント・ライブラリ †CSS †react-bootstrap †
Material-UI †
拡張機能 †react-hot-loader（AppContainer?） †Reactコンポーネントが状態を失うことなく、 react-router-dom（BrowserRouter?） †https://reacttraining.com/react-router/
isomorphic-fetch（fetch） †XMLHttpRequest?代替のfetch APIのPolyfill（WHATWG Fetch polyfill）。
データ連携 †Flux †Redux †リサイズ・移動など †React-Resizable †Drag&Dropで画面項目をリサイズ React-Draggable †Drag&Dropで画面項目を移動 UIコンポーネント †React Contextmenu †右クリックでメニューを表示する React Tree Menu Component †ツリーメニュー rc-calendar †カレンダーでの日付表示、日付入力機能 react-big-calendar †スケジューラ用途のカレンダー React Bootstrap Table †高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。 step by step 的な †Reactのファースト・ステップ †Reactのセカンド・ステップ †参考 †＠IT †
Qiita †
Schoo †学べる生放送コミュニケーションサービス
POSTD †
マイクロソフト系技術情報 Wiki †
|
