React

【React】Create React Appでプロジェクトを作成する（React 19）

Reactの環境構築の手順を書いていきます。

Contents

事前にインストールしておくもの

ページ記載時点のバージョンです。

  • Node.js：v22.12.0
  • npm：v10.9.0

プロジェクトの作成

2種類の方法があり、どちらも作成されるものは一緒です。

npx create-react-app プロジェクト名
npm init react-app プロジェクト名

プロジェクトの作成（Typescript版）

Javascriptではなく、Typescriptで作成するならこちら。

npx create-react-app プロジェクト名 --template typescript

プロジェクトの実行

プロジェクトが作成されたら、下記コマンドを実行すると、ブラウザに実行結果が表示されれば無事成功です。

npm start

実行でエラーが発生している場合

App.tsxでエラーが発生している場合

  • 「logo.svg」がJSXモジュールとしてTypescriptから認識されていないのが原因です。
    src配下に「custom.d.ts」として下記ファイルを保存します。
declare module "*.svg" {
    const content: string;
    export default content;
}
  • 「custom.d.ts」の設定を反映するため、「tscconfig.json」をプロジェクト配下に作成します。
{
  "compilerOptions": {
    "target": "es2016",
    "jsx": "react-jsx",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

App.test.tsxでエラーが発生している場合

  • create-react-appコマンドで含まれていなかった依存関係を「package.json」に追加します。下記内容はすべて含めたものになります。
{
  "name": "test-react01",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template-typescript": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.2",
    "@types/react": "^19.0.2",
    "@types/react-dom": "^19.0.2",
    "typescript": "^5.7.2"
  }
}

あとがき

Reactアプリのプロジェクトを作成する方法をまとめました。
環境によっては設定が足りないこともあるかもしれないので、随時追加したいと思います。