Babelに関して調べていると、いろいろと手順を踏んで環境構築しているのですが、create-react-appでいいじゃんと思ったので、自分でも文字に書き記したいと思います。
Babelに関しては本当に初心者なので、内容に誤りがあるかもしれません。
もし、誤りがあれば修正しますのでよろしければ指摘してください。
Babelとは
そもそもBabelとは、トランスコンパイラの1つ(TypeScriptもそのはず)で、JavaScriptのコードを古い書き方の物に変換するためのものです。
例えば、ES6のものをES5に変換したりできます。
もちろん、Reactとかで使うJSX構文でも変換できます。
Babelの存在理由
何でわざわざ古いバージョンに戻さないといけないの?と疑問に思いましたが、
- ブラウザによってES6が実装されていない場合があるから
- Node.jsの実行が、バージョンによってできない仕様になっていることがあるから
といった理由で使われているのですね。
環境構築
最近では、create-react-appだけで面倒な設定をすっとばせるのでこれから挑戦しようとしている方でも安心です。(私がそうだったので)
※version 4以上のNode.jsが入ってない場合は先にインストールします。
sudo npm install -g create-react-app
その後、
create-react-app ???
としたらもろもろの環境ができあがりです。(「???」には好きなディレクトリ名を入力してください)
ちなみに、Sassなど勝手に入ってないものもあるので、それは各自入れておきましょう。(そのうち入るようになるかも)
ちなみに、Sassの場合は、
$ cd ??? #先ほどで作ったプロジェクトフォルダを入れる
$ npm i -D node-sass
後はsrc内にあるApp.cssをApp.scssにして、App.jsの3行目にあるimport './App.css'をimport './App.scss'にすると使えるようになります。