Reactやったるで〜
でもこいつどうやって動かすんだろう。
そんなときブラウザで動くサイトを見つけました。
わーい！
ん？ Babel・・・？
ぼくこれしってる！ なんか・・・JavaScriptのサーバサイドのふれーむわーくだ！
つまりよくわからん。
というわけでこいつの使い方をほどほどに理解するのがゴール
１．まず動くものを（ｒｙ
Facebookつながりだね！
とはいえ情報が足りない。React Babelでググるとなんか環境構築的なのがいくつかでてきたのでそれを参考にする。
CLIいれときゃ問題ないやろ（適当
英語・・・あっあっ
英語読めなくてもなんとかなるよとは言えないので不安な人は頑張って翻訳しよう！
私は別サイト見たりした。
ぱっけーじじぇーそんをつくるよ！
こいつはnpm installするときとかに便利なやつだよ。
てかpackage.jsonの使い方は沢山書いてあるけど
こいつとは！こういうやつだ！ って説明全然でてこない。。。
環境のお品書きみたいなものなのだろうか。
npm君にこういうの欲しくてこういうことはじめにやっときたいからよろしく！
みたいな感じで渡すメモという認識。
JS詳しい人に殺されそうな説明だ。
間違ってたらごめんちょ。詳しく知りたい人はこれ見たほうがいいな。
さて、続き。
とりあえずディレクトリ作ってそこに移動しよう！
mkdir babel-test && babel-test
package.jsonをぱぱっとつくるすごいコマンド！
npm init -y
babel-cliをインストール！
後変換するReactとECMAScript2015のプラグインもインスコ
npm install --save-dev babel-cli npm install --save-dev babel-preset-react babel-preset-es2015
--save-devはpackage.jsonになんか書き込んでくれるやつだよ！
catなりvimなりmicroなりで確認すればわかると思うけど
.
.
"devDependencies": {
"babel-cli": "^6.18.0"
}
.
.みたいなのが追加されてる。
んでpackage.jsonに
{ "name": "babel-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "build": "babel src -d lib" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.18.0" } }
＋のとこ追加してやる。
そして
npm run build
でbuildのコマンドを実行！！！
babel src -d lib
やってく・・・れ？
・
・
・
> babel src -d lib
src doesn't exist
えっ
あわああわわわわなんでなんでなんで
と一日中慌ててたのは流石に面白かった。
英語読めないなら読めないって認めて１単語ずつ翻訳しろよ。
後で気が付きましたがちゃんと書いてあるんですよね。
npm君「srcがねーよ！！！！！」
いやこれ中学生でもわかる英語やろ。。。
こんなアホなとこでハマるの私だけやろなぁ。
というわけで
mkdir src
npm run build
・
・
・
で？
なんかここからがbabel君のしごとらしいけど
えっと srcの下にreactのソースをJSに変換してlibにいれてくれるんやろ？モッピー知ってるよ
lib/test.js
var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
チェケ☆
npm build run
npm君「は？（笑）」ERR!
私「」
今回はすぐにわかった。てか書いてあった。
.babelrc
{ "presets": ["es2015", "react"], "plugins": ["transform-react-jsx"] }
下がReactのプラグイン使いますよってことなのは予想できる。
上って何
使う言語・・・？ES2015とReact使うよ的な
は？
presetの意味は前もって決めるとかそんな感じらしい。
やはり使う言語を前もって決めるってことなのか？
ググってもよくわからない・・・！
英語大切だなやっぱ。
とりあえずできるとこまで
再び
npm build run
src/test.js -> lib/test.js
おお 確認確認
'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render(React.createElement( 'h1', null, 'Hello, world!' ), document.getElementById('root'));
・
・
・
お、おう。