![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
と、一方向化している。
JSXをサポートする言語を使用する。
画面定義のマークアップ言語
JSの拡張言語で、
{変数名}で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>
)
}
}見た目を担当するコンポーネント
ロジック（物事の振る舞い）に関与するコンポーネント
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(newProps) {
//JSON.stringify(newProps);
this.setState({count: newProps.count});
}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で画面項目を移動
右クリックでメニューを表示する
ツリーメニュー
カレンダーでの日付表示、日付入力機能
スケジューラ用途のカレンダー
高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。
遅延ロード用のコンポーネントをimportするための機能
FCで shouldComponentUpdate? 相当のことができる。
React v16.3以降、ライフサイクルメソッドの
deprecatedになるため、代用が必要。
学べる生放送コミュニケーションサービス
