![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.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.(定義した属性名)と利用。
<button className="btn btn-default" style={{color:"gray"}}/>タグ名＝コンポーネントクラス名の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>
)
}
}
state, propsを使用する場合、React.Componentを継承する。
export class MyComponent extends React.Component {export default class MyComponent extends React.Component {exportでモジュール化したクラスは、importでインポートが可能。
import { SubComponent1 } from './SubComponent';import { SubComponent1, SubComponent2 } from './SubComponent'; constructor(props, context) {
super(props, context)
this.state = {
viewText: props.text,
viewFlg: props.defaultFlg,
}
}constructorの記述自体を丸々省略できる。
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>
)
})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>
)
}
}Stateless functional components
stateを自身で持たないシンプルなコンポーネントの場合、
React.Componentを継承したクラスの定義は不要。
const Hello = function() {
return <div>Hello XXXX</div>
}const Hello = () => <div>Hello XXXX</div>
<Hello />
const Hello = function(name) {
return <div>Hello name</div>
}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>
)
}
}同一コンポーネントのインスタンスを識別する。
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}>componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}
npm install material-ui --save
Reactコンポーネントが状態を失うことなく、
ライブで再ロードされるようにするプラグイン。
https://reacttraining.com/react-router/
https://reacttraining.com/react-router/web/guides/philosophy
<Route exact path="/" component={FormInput}/><Route exact path="/" render={props => <FormInput data={this.state.data} />} />
<p>Data:{ this.state.data }</p><Route path="/:id" component={FormInput}/>
<p>ID:{props.match.params.id}</p>XMLHttpRequest?代替のfetch APIのPolyfill（WHATWG Fetch polyfill）。
・・・
Drag&Dropで画面項目をリサイズ
Drag&Dropで画面項目を移動
右クリックでメニューを表示する
ツリーメニュー
カレンダーでの日付表示、日付入力機能
スケジューラ用途のカレンダー
高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。
学べる生放送コミュニケーションサービス
