「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
コンポーネント中のデータの流れをstate, props -> UI要素へ一方向化している。
{変数名}でJavaScript変数を出力
<button onClick={()=>this.renderChange()}>切替</button>
<div onClick={this.clickAction()}>
<div onClick={this.clickAction}>
自由に属性を設定可能。
<div> <MyComponent myTitle={'タイトル'} myValue={this.state.value} /> </div>
子コンポーネントからprops.(定義した属性名)と利用。
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> ) } }
constructor(props, context) { super(props, context) this.state = { viewText: props.text, viewFlg: props.defaultFlg, } }
constructorの記述自体を丸々省略できる。
import { SubComponent1 } from './SubComponent';
import { SubComponent1, SubComponent2 } from './SubComponent';
<SubComponent />
Stateless functional components
stateを自身で持たないシンプルなコンポーネントの場合、
React.Componentを継承したクラスの定義は不要。
const Hello = function() { return <div>Hello XXXX</div> }
const Hello = () => <div>Hello XXXX</div>
<Hello />
const Hello = ({name}) => <div>Hello {name}</div>
<Hello name="XXXX" />
// テンプレート・コンポーネント 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> ) } }
// Mainコンポーネント class MainComponent extends React.Component { render() { return ( <section> <h1>Main Title</h1> <TemplateComponent title={'コンテンツタイトル'}> <ChildComponent /> </TemplateComponent> </section> ) } }
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> ) } }
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> ) })
※ 基本形のコンポーネントとしても、
Stateless functional componentsとしても、書ける。
this.props.XXXX
<子 XXXX={JavaScriptの値}>
Hello.propTypes = { name: React.PropTypes.string } Hello.defaultProps = { name: 'XXX' }
親コンポーネントが保持しているデータを全て子コンポーネントのpropsに渡す。
var props = {}; props.foo = x; props.bar = y; var component = <子 {...props} />;
<子 {...this.props}>
propsの更新を反映する。
変更通知を受け取るので、この中でsetStateする。
componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); }
親のハンドラをthis.propsで子に渡して、子から呼び出す。
・・・
Reactコンポーネントが状態を失うことなく、
ライブで再ロードされるようにするプラグイン。
XMLHttpRequest?代替のfetch APIのPolyfill(WHATWG Fetch polyfill)。
BootstrapをReactから使いやすくしたライブラリ。
Drag&Dropで画面項目をリサイズ
Drag&Dropで画面項目を移動
右クリックでメニューを表示する
ツリーメニュー
カレンダーでの日付表示、日付入力機能
スケジューラ用途のカレンダー
高機能テーブルコンポーネント(ソートやフィルタリング、ページジング)。
学べる生放送コミュニケーションサービス
https://qiita.com/ryo_t/items/67e319f8cc41c2d96eb9