最近
ブログ休んでいてすみません。
言い訳すると、 続きを読む
最新のコロンキー少年
https://www.instagram.com/moriken0801/
【instagram】→instagram 【twitter】→https://twitter.com/gyoushiojisan
水の無い水槽でピチピチ飛び跳ねている魚のようです。
そろそろ苦しいです。
WindowsPC久しぶりに開いてキータッチままならず、
Mac pro新しいのいつ出るのだろう。それまでWinでやった時の機会損失とその値段比べたら前者の方があるのではないだろうか、、
いっそ、2015年の買おうか、、でも次期バージョンはいろいろ変更が大きいらしいしな、、
来年になるなら今買いたいけど、今年中に出るなら待てだな、、
レンタルMacみたいなビジネスないかしら。。
毎日草生やしているGitHubだけどうにかコミットし続けないと、、Winで環境作るのか、、めんどいな、、
うー、、
最新のコロンキー少年
https://www.instagram.com/moriken0801/
【instagram】→instagram 【twitter】→https://twitter.com/gyoushiojisan
Container Components | @chantastic
記事はこのコードについて悪くはないがReactの利点を見逃していると述べています。
[code language="javascript"]
// CommentList.js
class CommentList extends React.Component {
constructor() {
super();
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "/my-comments.json",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
});
}
render() {
return
<ul> {this.state.comments.map(renderComment)} </ul>
;
}
renderComment({body, author}) {
return
<li>{body}—{author}</li>
;
}
}
[/code]
これをContainerとComponentを分ける。
なぜ分けるか
・データフェッチとレンダリングの関心を分ける→読みやすいとか保守しやすい
・再利用性が高まる
・型定義を使える(PropsType)
Container
→fetchして子コンポーネントに渡すだけ。stateを扱う
Component
→子コンポーネントはrenderするだけ。propsを扱う
Data structure
Your markup components should state expectations of the data they require. PropTypes are great for this.
コンポーネントはコンテナーからどんなデータが期待されて渡ってくるかを前もってPropTypesとして書いておくことで予想できてバグを見つけられたり、学習コストを下げるのですね。
コンテナー
[code language="javascript"]
// CommentListContainer.js
class CommentListContainer extends React.Component {
constructor() {
super();
this.state = { comments: [] }
}
componentDidMount() {
$.ajax({
url: "/my-comments.json",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
});
}
render() {
//CommentListとして切り出す。
return <CommentList comments={this.state.comments} />;
}
}
[/code]
コンポーネント
[code language="javascript"]
// CommentList.js
class CommentList extends React.Component {
constructor(props) {
super(props);//props継承する
}
render() {
return
<ul> {this.props.comments.map(renderComment)} </ul>
;
}
renderComment({body, author}) {
return
<li>{body}—{author}</li>
;
}
}
[/code]
これはgoodだそうです。
ただ「この記事」に言わせるとここからが本番らしいです。
※「この記事」はReduxのチュートリアルにリンクされている記事で、リンク先の「Presentational and Container Components」文中で、Reduxを学ぶ上で一読すべき記事として書かれています。
ちょっと今日はここまで
でわーー
reference
Container Components | @chantastic
【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル
【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい
【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】
ここら辺は「タクシーでネパール国境まで行かないか??」て誘われますが、耳を貸さないでください。
どこの国でもそうですがバスが一番やすいです。
この「コロンキー少年」ですが、12月頃に終わると思います。
それまで毎日更新しています。
なんのオチもないですがよろしくお願いいたします。
最新のコロンキー少年
https://www.instagram.com/moriken0801/
【instagram】→instagram 【twitter】→https://twitter.com/gyoushiojisan
インドとネパールの国境を目指してバラナシから来ました。
グランポール駅。
ここから国境付近までバスで行かなくてはなりません。
最新のコロンキー少年
https://www.instagram.com/moriken0801/
【instagram】→instagram 【twitter】→https://twitter.com/gyoushiojisan
Redux。。(ついこないだFlux理解したのに...)
続きを読む
最新のコロンキー少年
https://www.instagram.com/moriken0801/
【instagram】→instagram 【twitter】→https://twitter.com/gyoushiojisan
わたしもみている
Angular 2アプリケーションをimmutable.jsとReduxで構築する
エンジニアとしていかに幸せに生き抜くか?まつもとゆきひろ氏が説く「エンジニア・サバイバル」
React - Basic Theoretical Concepts
【関連記事】
【REACT】REACTの動きを理解したい人の為の最小サンプル
【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい
【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】
同期のライスとしずるがキングオブコントの決勝に進出しました。
頑張ってほしい。。
どっちも優勝してほしい。
どっちも日本一になってほしい。
https://www.king-of-conte.com/2016/result.php
最近お腹出てきた気がする。
この時この瞬間の幸福感を味わうことを優先しているのだと思う
そうやって太っていく
いろいろな種類の草とかぼちゃだけの毎日も飽きた
表題のような比較で違いを示している日本語記事がなかったので改めて。。
Local Storage vs Cookies
Local storage vs. Cookies: What's the difference?