create-react-appを理解する

はじめに

なんかブラウザアプリ作ってみたい +
仕事で少しjavascript触ったことある +
Reactいいよみたいな話聞いた記憶があるので
初めてのReactでなんか作ろうと思います。
備忘録とあわよくばフィードバックもらえると嬉しいなという気持ちでQiitaにアップしていきます。

今回は初めてのReactでなんか作る(create-react-app編)

Reactプロジェクトを作る

公式ドキュメントを参考にして

npm install -g create-react-app
npx create-react-app my-app

でReactプロジェクトが作られます。
中身がわからないままでは気持ち悪いので、作られたものを見ていきます。

フォルダ構成

my-app/  
  ├─.git/  
  ├─node_modules/  
  ├─public/  
  ├─src/  
  ├─.gitignore  
  ├─package.json  
  ├─package-lock.json  
  └─README.md  

git

自動的にgit管理されるようになっています。
gitのlogを見ると
masterブランチに"Initial commit from Create React App"というコミットメッセージでコミットされています。

.gitignoreも自動生成されており、/node_modulesや/buildなど色々ignoreされるように設定されています。
(/.pnpと.pnp.jsって何だろう？
ググるとSharePointが出てくるけどもいまいちわからん。)

package.json

private

npm Documentationによると、
"private": "true"とすることでnpmで(事故って)公開されることを防止してくれるそうです。

dependencies

• react
• react-DOM
• react-scripts

の３つのパッケージのみ

scripts

• "start": "react-scripts start"
• "build": "react-scripts build"
• "test": "react-scripts test"
• "eject": "react-scripts eject"

の４つのスクリプトが定義されています。

eslintConfig

react形式の書き方に対応するように設定を追加しています。

browserslist

production環境では
browserl.list上で0.2%以上のShareを持つものから

• deadステータスのもの
  • ちなみにこれによってIE9がターゲットから外されています
• opera mini
  • browserslistのREADMEに、
    opera miniにはアフリカに１０万人のユーザがいてEdgeよりも世界的にはPopularなんだから
    理由なく除くなよ的なことが書いてあります。なんで除かれているんでしょう？

の二つを抜いたものをターゲットにビルドされるように設定されています。

dev環境ではChrome, firefox, safariの最新バージョンがターゲットに設定されています。

public/ & src/

サンプルアプリの、ソースコードが入っています。
public/ には
ベースとなるhtmlファイルとmanifest.jsonとreactのiconが、
src/ にはjsファイルとcssファイルが入っています。

あとがき

• .gitignoreとかpackage.jsonをちゃんと読むと色々調べるきっかけになってよいですね。

• 飽きっぽいのでこれで終わりになってしまうかもしれません。