React+TypeScript project construction case explanation

React project building can be very simple, but if it is combined with typescript, it is actually not very troublesome, and the official website also has very clear instructions. There are two ways:

1. To directly build a react project with typescript, we need to add additional parameters, and the template cannot use the default cra-template. Use cra-template-typescript instead.

npx create-react-app tsreactdemo --template typescript

The successful prompt for creation is not much different from the original one. Go directly to the project path, and then yarn start or npm start.

Entering the project, we are not in a hurry to start. First, let's take a look at what the file looks like. A tsconfig.json will be created by default, and the default index.js and App.js files in the src directory are changed to ts versions of index.tsx and App.tsx.

We can look at the dependencies in package.json:

In fact, the dependencies are just @types/jest, @types/node, @types/react, @types/react-dom.

At first, the command we used to create a typescript react project seemed to be npx create-react-app xxx --typescript, but this is no longer possible. The subsequent parameter must be --template typescript instead of directly --typescript. This needs to be explained. It's not that we made a mistake. In fact, it was used in this way originally. Now it has been updated and the method has changed. From this we can see that the web front-end changes too fast. If you don't study it for a year or two, it may completely overturn your cognition. This does not mean that --typescript cannot be created. It will create without error, but the default is a react project and will not contain typescript content.

In addition, when creating a project in this way, the official documentation also recommends that we do not install the create-react-app tool globally. In the latest version, you can directly create the latest react project through npx create-react-app. If you install create-react-app globally and the version is not the latest, it is very likely that an old version of the react project is created. If it is installed, you can directly uninstall it with npm uninstall -g create-react-app.

2. Based on the react project, just add typescript related dependencies.

npm install typescript @types/react --save

Start by creating a default react project:

In the command, I directly added --typescript. This is what I said before. It was originally created in this way, but now this method doesn’t work. However, it will not report an error. The default project created is a react project, and the template used is cra-template.

We directly add the typescript dependency:

In fact, you can just add it like this without adding a tsconfig.json file. It's like we directly added a dependency without making major changes to the project.

After we modify the index.js and App.js files to index.tsx and App.tsx, npm start or yarn start will create a tsconfig.json file by default. This is also clearly stated by the official website. We do not need to create tsconfig.json manually.

We can also look at the contents of the default generated tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

In fact, manual creation is probably like this, so it is better to just let it generate itself.

This is the end of this article about the case study of project construction with React+TypeScript. For more relevant content about project construction with React+TypeScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!