Zenn
Open6

React入門するぞ

YuuuuYuuuu

やったこと

# まずはReactの環境作るところから
$ npx create-react-app <プロジェクト名>
# とりあえず実行
npm start

でできた

YuuuuYuuuu

作られたディレクトリ

.
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js
YuuuuYuuuu

package.jsonの中身

  • dependencies
    • jest-dom
      • JestはJSのテストフレームワーク
      • Dom （Document Object Model）
        • HTMLやXMLドキュメントなどのマークアップ言語とCSSをJSなどからアクセスできるようにするためのAPI。。。？？
        • つまり、ドキュメントの作成や構造の閲覧、内容の編集ができるらしい
        • オブジェクトをドキュメントに変換することができる
    • react
      • SPAの構築に必要
    • react-scripts
      • 特定のディレクトリやファイルの呼び出し
    • web-vitals
      • Web UX向上に向けた測定ツール
    • "@testing-library/react": "^13.4.0",
    • "@testing-library/user-event": "^13.5.0",
    • "react": "^18.3.1",
    • "react-dom": "^18.3.1",
    • "react-scripts": "5.0.1",
    • "web-vitals": "^2.1.4"

参考：https://qiita.com/s_taro/items/0d2686b55593f59309cc

{
  "name": "tutorial_env",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
YuuuuYuuuu

イミュータブルにする理由はもう一回見ておく