![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
コンポーネント中のデータの流れをstate, props -> UI要素へ一方向化している。
npm install -g create-react-app
| # | カテゴリ | ツール/言語 | 備考 |
| 1 | 開発言語 | EcmaScript6 | - |
| 2 | トランスパイラ | Babel | - |
| 3 | パッケージング | Webpack | ・webpack-dev-server ・html-webpack-plugin ・style-loader |
| 4 | コード解析 | ESLint | - |
| 5 | テストツール | Jest | - |
create-react-app react-app
react-app/
README.md
index.html
favicon.ico
node_modules/
package.json
src/
App.css
App.js
index.css
index.js
logo.svgnpm start
下記の、
を考慮し、
以下のように実装する。
{変数名}で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
