![[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
を考慮し、以下のように実装する。
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だけのコンポーネントの場合など、
内容がsuper(props, context)だけの場合には、
constructorの記述自体を丸々省略できる。
import { SubComponent } from './SubComponent';import { SubComponent1 } from './SubComponent';
import { SubComponent, SubComponent2 } from './SubComponent';Stateless functional components
Stateを自身で持たないシンプルなコンポーネントの場合、
React.Componentを継承したクラスの定義は不要。
const RenderHello = props => {
return <div>Hello {prop s.text}</div>;
}// テンプレート・コンポーネント
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>
)
}
}{変数名}でJavaScript変数を出力
<button onClick={()=>this.renderChange()}>切替</button><div onClick={this.clickAction()}><div onClick={this.clickAction}>Stateを更新すると再描画される。 イベントなどで、上記のthis.stateを偏光するとHTMLさ再描画される。
this.props.XXXX
<子 XXXX={JavaScriptの値}>var props = {};
props.foo = x;
props.bar = y;
var component = <子 {...props} />;<子 {...this.props}>componentWillReceiveProps: function(nextProps) {
this.setState({
likesIncreasing: nextProps.likeCount > this.props.likeCount
});
}親のハンドラをthis.propsで子に渡して、子から呼び出す。
・・・
BootstrapをReactから使いやすくしたライブラリ。
Drag&Dropで画面項目をリサイズ
Drag&Dropで画面項目を移動
右クリックでメニューを表示する
ツリーメニュー
カレンダーでの日付表示、日付入力機能
スケジューラ用途のカレンダー
高機能テーブルコンポーネント（ソートやフィルタリング、ページジング）。
学べる生放送コミュニケーションサービス
https://qiita.com/ryo_t/items/67e319f8cc41c2d96eb9
