「ECMAScript2015」タグアーカイブ
【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】
Tagged template strings(タグテンプレートストリング)
Tagged template strings(タグテンプレートストリング)が多分便利なので 理解したことを書いておく コードはコチラ
もしも下記のように呼び出した場合、
[code language="javascript"] tag'もりた${kenji}です' [/code]
ES5でいうこのようなものとして呼び出している tag(["もりた","です"], kenji)
tagの第一引数に["もりた","です"]という変数として展開されない文字列が要素となる配列を受け取る それ以外のkenjiは第二引数以降受け取れる。 上記が
tag'もりた${kenji}です${yeah}' だとした場合 引数の数が増える
下記のように受け取った第一引数の配列のインデックスを参照することも可能(もちろん)
function tag(strings, ...values){ console.log(strings[0]) //もりた console.log(strings1) //です }
具体的な使用例
var long = '30px'; var weight = '40px';
function tag(strings, ...values){ return m:${values[0]}、p:${values[1]}; };
var str1 = tag身長${long}で、体重は${weight}です;
console.log(str1);
知らなかった!AtomでReact×ES6×JSX書くヒトの為のpackage「language-babel」が既にあった
https://atom.io/packages/language-babel
早速入れた。
【React × ES6 × Flux】を手っ取り早く学びたい人の為にサンプル作った【3の倍数と3が付くときだけ猫になるCounter】 Cat comes out when that contains the multiples of 3 and the string to 3
なかなかミニマムでこれらを学べるプロジェクトがみつからなくて、勉強も兼ねて作りました。 なるべく小さい部品だと分かりやすいですしね。 この【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で作ってみたい
ではみなさんいい週末を！！
【React × Flux × ES6】LINE風チャット
話は表題と違うのですが、
小さい頃よく母親の作る料理がどこか一箇所凝ったものが混ざってて、
普通の味噌汁でいいのにしめじ入ってたり、
普通の魚でいいのに苦手な野菜をあんかけにして乗っけてきたり、
普通の白ごはんでいいのに栗入れてきたり、、
普通のカレーやハンバーグでいいのにと思ってたのですが、そのカレーすらも茄子が入ってたり、、
よく買い物から帰ってきたスーパーの袋に小さい紙切れ入ってて、
鮮魚売り場で取ってきたレシピなんですよ、
「今度これ、作るのか、、勘弁してくれ、、」て。
今では「美味しいじゃん！」と思えるかもしれませんが、
小学生ですから舌もこえてないですよ。
失礼しました。
RactとFlux周りを勉強しているうちにじゃぁ実装しながら学んだ方がいいのではないか、
と思いました。
ここから状態をどう分けるかをやらなくちゃいけないですね。 コードは
こちら
こちら
です。よかったら
【 併せて読みたい 】
【React】Reactの動きを理解したい人の為の最小サンプル
【REACT入門】過去のREACT初心者の自分にREACTのPROPSとSTATEの違いを簡単に説明してあげたい
【REACT × ES6 × FLUX】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるCOUNTER】
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]
ES6(ECMAScript2015) related sites I have bookmarked
proto in ECMAScript 6 > <a href="https://See
reason is widely used. But non-encouragement.
See
Let's now check from now > See
You want to bookmark ES6 related