「React.js」カテゴリーアーカイブ

【React】babelでbabel-preset-stage-0や使う方法「ES7 Property Initialiazers for Default Props and Prop 」を使いたい方へ

英語文しかなかったので自分のようなReactにおいて「ES7 Property Initialiazers for Default Props and Prop」を使いたい方へ記事書きました

参照 https://babeljs.io/blog/2015/10/29/6.0.0 https://egorsmirnov.me/2015/06/14/react-and-es6-part2.html

babelは6系からそれぞれプラグインをインストールすることになったみたいです。

具体的には これらを適当にインストールしてください(適当です)

"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-class-properties": "^6.5.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babelify": "^6.1.3",

その後 package.jsonに下のようにpresetsを設定(使いたいpresetのプラグインです)上のならbebel-plugin-[ここ] 「ES7 Property Initialiazers for Default Props and Prop 」はstage-0として設定すればOK .babelrcだったらpackage.jsonと同じ階層に置けばいいみたいです。今回はjsonに記述します。

"babel": {
"presets" : ["es2015", "react", "stage-0"
 ]
},
"devDependencies": {
//some
}

で gulpfileのtransformのところに

.transform("babelify", {presets: ["es2015", "react", "stage-0"]})

でok

ちょっとエラーが出たり分からなかった場合下記リンク先に playgroundあげてありますので余計なソースを削って使ってください。 ミニマムでReact,ES6の最新が動作できるようにされています。

https://github.com/kenmori/React-ES6-Flux-Playground/tree/master/playground

【 併せて読みたい 】

【REACT】REACTの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

REACT × FLUX × ES6 [WIP]LINE風チャット

他のReact記事

フロントエンド記事

github

qiita

【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作った【3の倍数と3が付くときだけ猫になるCounter】 Cat comes out when that contains the multiples of 3 and the string to 3

AWS11-5

なかなかミニマムでこれらを学べるプロジェクトがみつからなくて、勉強も兼ねて作りました。 なるべく小さい部品だと分かりやすいですしね。 この【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCounter】(Cat comes out when that contains the multiples of 3 and the string to 3)は clickすると値が増えるだけの本当に簡素なものですが、 中身はFluxで管理しているのでコードリーディングするのに動きがわかりやすくなっています。 component内でeventを感知すると状態を更新し、更新されたstateは予めリスナー登録していたメソッドをactionTypeによって振り分けてstore内で更新して、状態を子componentに伝えます。

プロジェクトをダウンロードして gulp立ち上げるとローカルサーバー立ち上がります。 jsが変更される度にbrowserifyでまとめてbabelifyでES6をES5に変換後bundleしてくれます。 ReactをClass構文で書きたい方、ES6も勉強したい方にはいいと思います。(僕も奮闘中です)

Fluxに関してはいろいろな書き方があるのですが、今実務でやっているような書き方でやっています。 (EventEmitterはライブラリではありません。)

プロジェクトはこちらです

Fluxに関して言えば前にも理解深めるためにこんなの作りました React × Flux × ES6 [WIP]LINE風チャット

ここからはわたしの今後。 わたしはAngular2もReactもマスターすると決めました。 「RactのこれはAngularでいうところのこれかぁ」、とか「AngularでいうところのtemplateってReactでこーなんだー」って結びつきが強くなるんですよね。 5年後残らないかもしれない技術でも学んだ意欲と「あれとどこか似ているぞ」というはどんなものが資産になるしね。 フロントは多分これからも過渡期ですよね。 ずーーと。 止まらない電車が止まったら乗るのではなく、動いている電車に飛び込んで、しがみつかないといけないと思っています。

こんどはおんなじものをAngular2 × TypeScriptで作ってみたい

ではみなさんいい週末を!!

フロントエンド系の話

github

qiita

【React × Flux × ES6】LINE風チャット

fafa
話は表題と違うのですが、
小さい頃よく母親の作る料理がどこか一箇所凝ったものが混ざってて、
普通の味噌汁でいいのにしめじ入ってたり、
普通の魚でいいのに苦手な野菜をあんかけにして乗っけてきたり、
普通の白ごはんでいいのに栗入れてきたり、、
普通のカレーやハンバーグでいいのにと思ってたのですが、そのカレーすらも茄子が入ってたり、、
よく買い物から帰ってきたスーパーの袋に小さい紙切れ入ってて、
鮮魚売り場で取ってきたレシピなんですよ、
「今度これ、作るのか、、勘弁してくれ、、」て。
今では「美味しいじゃん!」と思えるかもしれませんが、
小学生ですから舌もこえてないですよ。

失礼しました。
RactとFlux周りを勉強しているうちにじゃぁ実装しながら学んだ方がいいのではないか、
と思いました。
ここから状態をどう分けるかをやらなくちゃいけないですね。 コードは
こちら

こちら
です。よかったら

【 併せて読みたい 】

【React】Reactの動きを理解したい人の為の最小サンプル

【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい

【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】

他のReact記事

フロントエンド記事

React with ES6

getting start

https://jsbin.com/fuyedekaga/1/edit?html,js,console,output
Reactrepogtory
html
[html]
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"></script>
<script src="//fb.me/react-dom-0.14.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="fafa"></div>
</body>
</html>
[/html]

javascript
[javascript]
class HelloMessage extends React.Component {
constructor(props){
super(props);
}
render(){
return (<div>Hello {this.props.name}</div>
);
}
}
React.render(<HelloMessage name="kenji" />, document.getElementById("fafa"));
[/javascript]

https://jsbin.com/goweminevo/7/edit?html,js,output
[js]
var HelloWorldComponent = React.createClass({
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
});
React.render(
<HelloWorldComponent name="kenjimorita" />,document.getElementById("fafa")
);
[/js]


https://jsbin.com/goweminevo/9/edit?html,js,output

[js]
class HelloWorldComponent extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
);
}
};
React.render(
<HelloWorldComponent name="kenjimorita" />,document.getElementById("fafa")
);
[/js]

https://jsbin.com/goweminevo/13/edit?html,css,js,output
[js]
var Tags = React.createClass({
getInitialState: function(){
return {
selected:''
}
},
setFilter: function(filter) {
this.setState({selected : filter})
this.props.onChangeFilter(filter);
},
isActive:function(value){
return 'btn '+((value===this.state.selected) ?'active':'default');
},
render: function() {
return <div className="tags">
<button className={this.isActive('')} onClick={this.setFilter.bind(this, '')}>All</button>
<button className={this.isActive('front')} onClick={this.setFilter.bind(this, 'front')}>front</button>
<button className={this.isActive('backend')} onClick={this.setFilter.bind(this, 'backend')}>backend</button>
<button className={this.isActive('infrastructure')} onClick={this.setFilter.bind(this, 'infrastructure')}>infrastructure</button>
<button className={this.isActive('database')} onClick={this.setFilter.bind(this, 'database')}>database</button>
</div>
}
});

var Kid = React.createClass({
render: function() {
return <ul>
<li>{this.props.name}</li>
</ul>
}
});

var List = React.createClass({
getInitialState: function() {
return {
filter: ''
};
},
changeFilter: function(filter) {
this.setState({
filter: filter
});
},
render: function() {
var list = this.props.Data;

if (this.state.filter !== '') {
list = list.filter((i)=> i.tags.indexOf(this.state.filter) !== -1);
console.log(list);
}

list = list.map(function(Props){
return <Kid {...Props} />
});

return <div>
<h2>moriken ToDo filter</h2>
<Tags onChangeFilter={this.changeFilter}/>
{list}
</div>
}
});

var options = {
Data: [{
name: 'Learn Ract',
tags: ['front', 'js']
},{
name: 'Learn SQL',
tags: ['backend', 'database']
},{
name: 'Learn Angular2',
tags: ['front','js']
},{
name: 'Learn AWS',
tags: ['infrastructure', 'backend']
},{
name: 'Learn SpringFrameWork',
tags: ['backend', 'Java', 'database']
},
{
name: 'Learn NodeJS',
tags: ['backend', 'database']
},
{
name: 'Learn TypeScript',
tags: ['front']
},
{
name: 'Learn Java8',
tags: ['backend','database']
},
{
name: 'Learn ES6',
tags: ['front']
}
]
};

var element = React.createElement(List, options);
React.render(element, document.body);
[/js]

https://qiita.com/M-ISO
https://github.com/kenmori

/** @jsx React.DOM */

var ProductCategoryRow = React.createClass({
render: function() {
return (

{this.props.category}

);
}
});

var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :

{this.props.product.name}
;
return (

{name} {this.props.product.price}

);
}
});

var ProductTable = React.createClass({
render: function() {
console.log(this.props);
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push();
}
rows.push();
lastCategory = product.category;
}.bind(this));
return (

{rows}
Name Price

);
}
});

var SearchBar = React.createClass({
handleChange: function() {
this.props.onUserInput(
this.refs.filterTextInput.getDOMNode().value,
this.refs.inStockOnlyInput.getDOMNode().checked
);
},
render: function() {
return (


{' '}
Only show products in stock

);
}
});

var FilterableProductTable = React.createClass({
getInitialState: function() {
return {
filterText: '',
inStockOnly: false
};
},

handleUserInput: function(filterText, inStockOnly) {
this.setState({
filterText: filterText,
inStockOnly: inStockOnly
});
},

render: function() {
return (


);
}
});

var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

React.render(, document.body);