Create React App
Getting Started · Create React App
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
背景
https://github.com/facebook/create-react-app/discussions/11768#discussioncomment-1817264
CRA以前、React開発者はBabelやwebpackを手動で設定していた
正しく設定するのはかなり時間がかかった
アップグレードを簡単にするために機能を制限している
0.7.0を4.0.3にアップグレードしてうまくいくぐらい簡単にアップグレードできる
2018年の2.0以降はおおむねメンテナンスモード
重要なものはなるべく入れるようにしている
パフォーマンスを追求するようなアプリ向けではない
SSRやReact Server Componentsなどにも対応できない(大幅に再設計しないと)
ViteやNext.jsとかを使ったほうが良いだろうkadoyau.icon
WebpackやBabelの設定を書く必要がない
You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
TypeScriptでもかけるようになった
Adding TypeScript · Create React App
自分のprojectに追加すると、単純にType checkをしてくれる
2018年8月にBabelがTypeScriptをサポートしたからできるようになった?
Babel#5c67e6e03f44250000d8d213
実際のトランスパイルはBabelで行われるので、Babel側の都合ではまるかもしれない
@babel/plugin-transform-typescript · Babel
react-scriptsをアップデートしてもTypeScriptはアップデートされない
これはChangelogからも読み取れる。3.3.0のchangelogには次のように書いてある
If you're using TypeScript, you will need to upgrade your typescript dependency to 3.7.0 or later if you wish to use the new operators.
Create React App 2.0: Babel 7, Sass, and More – React Blog
1系からのupdateは楽にできるらしい
ESLintはcreate-react-app向けがデフォルトで設定される
設定
create-react-app/packages/eslint-config-react-app at eee8491d57d67dd76f0806a7512eaba2ce9c36f0 · facebook/create-react-app
The easiest way to use this configuration is with Create React App, which includes it by default.
You don’t need to install it separately in Create React App projects.
eslint-config-airbnbなどを使いたい場合には別途.esconfigなどを作成して設定が必要
Setting Up Your Editor
react-scriptsがeslintに依存しているので自前で入れる必要はなさそう
https://github.com/facebook/create-react-app/blob/30eaab4ef26f6c72ef7e75866fb3e5353bb21dbd/packages/react-scripts/package.json#L45-L52