2021年8月27日

Create React Appは何をしてくれているのか

CRA（Create React App）とはFacebook社が社内でReactを使うときに使っていた環境整備の方法をコマンド化したもの。

実行することでアプリケーションのスケルトン（空のアプリ）が生成される。

$ create-react-appコマンドで作られるもの

react ・・・　React 本体のパッケージ
react-dom　・・・　DOMを抽象化してReactから操作できるようにするレンダラーのパッケージ
react-scripts
- Babel : 新しい仕様のJSのコードを古いブラウザでも実行できるようにコンパイルする
- webpack
- webpack-dev-server : ソースコードの変更を検知してリロードしなくてもリアルタイムに画面反映してくれる
- Jest : JavaScriptの単体テストのフレームワーク（RailsのRSpecみたいな書き方）
- dotenv

Create React Appで「Hello, World!」

npxコマンド

npmがインストールされていば、ネット経由で最新版ないし該当のパッケージをインストールし一回のみ実行してくれる。実行した後はキレイに削除してくれる。

実際にハンズオン！

$ npx create-react-app hello-world --template=typescript →TypeScriptのためのテンプレートを指定（このオプションを指定しないと素のJSで開発するためのcra-templateが適応される）

上記コマンドはrails newと同じ役割だと想像してください。ディレクトリの移動を忘れないよう気をつけましょう。
cd hello-world ←これやってから①
yarn start ←これをやります②

CRA実行時のエラー

pretty-format@27.1.0: The engine "node" is incompatible with this module.
Expected version "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0". Got "14.4.0"

記述されているnodeのversion以上を期待している。エラー発生時は14.4.0だった。 14.15.0にすることで対応。

回った！！