javascript - 如何在 React 中使用 App.tsx 而不是 App.js？

Question

我已经按照文档中的说明创建了一个 React 项目，该项目已自动将 App.js 文件添加到该项目中。我的问题是我想使用 App.tsx 而不是 App.js。由于某种原因，我无法运行 App.tsx 文件。请问我该如何解决这个问题？

我已阅读 this question asked here ，但我无法使用它，因为它对我来说没有任何意义，因为这是我的第一个使用 React 的项目。

这是我的文件夹结构。

可以在这张图片上看到，当我将 App.js 文件注释掉时，我在浏览器上收到错误。

这是index.js 文件，未更改。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

这是 package.json 文件

{
  "name": "dualnback",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.0",
    "@types/lodash": "^4.14.149",
    "@types/material-ui": "^0.21.7",
    "atob": "^2.1.2",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "bootstrap": "^4.4.1",
    "concurrently": "^5.0.0",
    "cookie-parser": "^1.4.4",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-session": "^1.17.0",
    "express-ws": "^4.0.0",
    "hammerjs": "^2.0.8",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.15",
    "material-ui": "^0.20.2",
    "mongoose": "^5.7.8",
    "morgan": "^1.9.1",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "passport-local": "^1.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "reactstrap": "^8.2.0",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.5.3",
    "tslib": "^1.10.0",
    "typescript": "^3.7.3",
    "websocket": "^1.0.30",
    "zone.js": "~0.9.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.3",
    "@types/reactstrap": "^8.2.0",
    "react-router-dom@next":"*"
  }
}

Answer 1

您可能只需要安装相关的类型库。

npm install --save @types/react @types/react-dom

尝试一下。