Closed6

create-react-appを試してみる

suzuki-navisuzuki-navi

以下のGetting Startedに従ってみる。

https://create-react-app.dev/docs/getting-started

$ npx create-react-app my-app

以下のように聞かれて、インストールが始まる。

Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y

my-app というディレクトリが作成される。

$ cd my-app

package.json には以下のように書かれている。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "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"
    ]
  }
}

とりあえずgit first commitする。

$ git init .
$ git add -A
$ git status -s
A  .gitignore
A  README.md
A  package-lock.json
A  package.json
A  public/favicon.ico
A  public/index.html
A  public/logo192.png
A  public/logo512.png
A  public/manifest.json
A  public/robots.txt
A  src/App.css
A  src/App.js
A  src/App.test.js
A  src/index.css
A  src/index.js
A  src/logo.svg
A  src/reportWebVitals.js
A  src/setupTests.js
$ git commit -m 'first commit'
suzuki-navisuzuki-navi

Getting Startedにしたがって npm start

$ npm start

3000番ポートが開くらしい。

自分の環境の都合上ポート番号を8080にしておきたいので、以下のようにする。

$ PORT=8080 npm start

こんな画面になる。

suzuki-navisuzuki-navi

ビルドしてみる。

$ npm run build

こういうファイルが生成された。

$ tree build
build
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.073c9b0a.css
    │   └── main.073c9b0a.css.map
    ├── js
    │   ├── 787.28cb0dcd.chunk.js
    │   ├── 787.28cb0dcd.chunk.js.map
    │   ├── main.46f5c8f5.js
    │   ├── main.46f5c8f5.js.LICENSE.txt
    │   └── main.46f5c8f5.js.map
    └── media
        └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg

public/index.html には <script> 要素がないけど、 build/index.html には <script> が入っているし、HTMLコメントもなくなって改行もなくなる。HTMLファイル自体もビルドされるようだ。

suzuki-navisuzuki-navi

npm run test を実行すると npm run start と同じく待機状態になる。

ファイルが更新されると、自動でテストコードが実行される。

テストに成功した時の表示例

 PASS  src/App.test.js
  ✓ renders learn react link (47 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.493 s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

テストに失敗したときの表示例

      4 | test('renders learn react link', () => {
      5 |   render(<App />);
    > 6 |   const linkElement = screen.getByText(/learn react/i);
        |                              ^
      7 |   expect(linkElement).toBeInTheDocument();
      8 | });
      9 |

      at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
      at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
      at getByText (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:95:19)
      at Object.<anonymous> (src/App.test.js:6:30)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.827 s, estimated 1 s
Ran all test suites related to changed files.
suzuki-navisuzuki-navi

npm run start じゃなくて npm start だけでいいんだ・・・

この件、

package.jsonstart を試しに xstart などとすると、 npm xstart では動かない。

$ npm xstart
Unknown command: "xstart"

当然 npm run xstart とすれば動く。

$ npm run xstart
...

npm start でももちろん動かない。

$ npm start
npm ERR! Missing script: "start"

start だけ特別扱いなのかも。

https://docs.npmjs.com/cli/v8/commands/npm-start

このスクラップは2023/07/07にクローズされました