りあクト! 輪読会 ver2
2021年8月27日
Create React Appは何をしてくれているのか
CRA(Create React App)とはFacebook社が社内でReactを使うときに使っていた環境整備の方法をコマンド化したもの。
実行することでアプリケーションのスケルトン(空のアプリ)が生成される。
$ create-react-app
コマンドで作られるもの
- react ・・・ React 本体のパッケージ
- react-dom ・・・ DOMを抽象化してReactから操作できるようにするレンダラーのパッケージ
- react-scripts
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にすることで対応。
回った!!
参考
Ruby on Railsの動作にNode.jsが必要な理由 https://www.xenos.jp/~zen/blog2/index.php/2019/03/19/post-1831/
【3分でわかるシリーズ】Ubuntuとは? https://eng-entrance.com/what-is-ubuntu
JavaScriptを単体テストする流行りのフレームワークJestを試してみる https://qiita.com/mima_ita/items/558ec8cee2c0e1005ffd